integrated_traffic_vue/src/views/BI/js/echarts2.js

import * as echarts from "echarts";
import { tryOnMounted, tryOnUnmounted } from "@vueuse/core";
let myChart2;
function echarts2(id, month, accumulated, currentMonth) {
  myChart2 = echarts.init(document.querySelector(`#${id}`));
  const option = {
    backgroundColor: "",
    tooltip: {},
    grid: {
      top: "5%",
      left: "1%",
      right: "1%",
      bottom: "0%",
      containLabel: true,
    },
    legend: {
      icon: "circle",
      data: ["累计趋势", "当月趋势"],
      textStyle: {
        color: "#999999",
        borderColor: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: true,
        axisLine: {
          // 坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: "#f9f9f9",
          },
        },
        axisLabel: {
          // 坐标轴刻度标签的相关设置
          color: "#d1e6eb",
          margin: 15,
          interval: 0,
          rotate: 30,
        },
        axisTick: {
          show: false,
        },
        data: month,
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        // max: 140,
        splitNumber: 7,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#0a3256",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          margin: 20,
          color: "#d1e6eb",
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "累计趋势",
        type: "line",
        symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 8,
        lineStyle: {
          color: "#28ffb3", // 线条颜色
        },
        itemStyle: {
          color: "#28ffb3",
          borderColor: "#fff",
        },
        tooltip: {
          show: true,
        },
        areaStyle: {
          // 区域填充样式
          // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,154,120,1)",
              },
              {
                offset: 1,
                color: "rgba(0,0,0, 0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
          shadowBlur: 20, // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        data: accumulated,
      },
      {
        name: "当月趋势",
        type: "bar",
        barWidth: 20,
        tooltip: {
          show: false,
        },
        itemStyle: {
          color: "#1492FF",
        },
        data: currentMonth,
      },
    ],
  };
  myChart2.setOption(option);
}
tryOnMounted(() => {
  window.onresize = function () {
    myChart2 && myChart2.resize();
  };
});
tryOnUnmounted(() => {
  myChart2 = null;
});
export default echarts2;