integrated_traffic_vue/src/views/BI/js/echarts1.js

import * as echarts from "echarts";
import { tryOnMounted, tryOnUnmounted } from "@vueuse/core";
let myChart1;
function echarts1(id) {
  myChart1 = echarts.init(document.querySelector(`#${id}`));
  function xWrapText(params, num = 2) {
    let newParamsName = "";
    const paramsNameNumber = params.length;
    const provideNumber = num; // 一行显示几个字
    const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
    if (paramsNameNumber > provideNumber) {
      for (let p = 0; p < rowNumber; p++) {
        let tempStr = "";
        const start = p * provideNumber;
        const end = start + provideNumber;
        if (p === rowNumber - 1) {
          tempStr = params.substring(start, paramsNameNumber);
        } else {
          tempStr = params.substring(start, end) + "";
        }
        newParamsName += tempStr;
      }
    } else {
      newParamsName = params;
    }
    return newParamsName;
  }
  const legend = ["烟雾", "水电", "烟雾", "烟雾", "烟雾"];
  const echartCount = [12, 15, 11, 8, 16];
  const option = {
    backgroundColor: "",
    grid: {
      top: "10%",
      left: "10%",
      right: "5%",
      bottom: "10%",
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "#3A4667",
      borderColor: "#3A4667",
      textStyle: {
        color: "#fff",
      },
      formatter: "{b} : {c} %",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },

    xAxis: {
      type: "category",
      axisPointer: {
        type: "shadow",
      },
      axisLabel: {
        textStyle: {
          color: "#B3CFFF", // x轴文本颜色
          fontSize: 10,
        },
        formatter(params) {
          const res = xWrapText(params, 6);
          return params.length > 15 ? `${res.slice(0, 15)}...` : res;
        },
      },
      axisTick: {
        show: false,
      },
      data: legend,
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "#162647",
          type: "solid",
        },
      },
      axisLabel: {
        formatter: "{value}%",
        textStyle: {
          color: "#B3CFFF", // x轴文本颜色
          fontSize: 12,
        },
      },
      name: "",
      nameTextStyle: {
        color: "#B3CFFF",
        fontSize: 12,
        padding: [0, -20, 0, 30],
      },
    },
    series: [
      {
        type: "bar",
        name: "基金投资回报率",
        barWidth: 8,
        emphasis: {
          itemStyle: {
            color: "#7fb7e9",
          },
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 1,
                color: "rgba(109, 131, 180, 1)",
                opacity: 0.6,
              },
              {
                offset: 0,
                color: "rgba(66, 91, 147, 1)",
                opacity: 1,
              },
            ]),
            barBorderRadius: [0, 0, 0, 0],
          },
        },
        data: echartCount,
      },
      {
        name: "基金投资回报率",
        tooltip: {
          show: false,
        },
        type: "bar",
        barWidth: 8,
        emphasis: {
          itemStyle: {
            color: "#2e9bff",
          },
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 1,
                color: "rgba(109, 131, 180, 1)",
                opacity: 0.6,
              },
              {
                offset: 0,
                color: "rgba(99, 126, 188, 1)",
                opacity: 1,
              },
            ]),
            barBorderRadius: [0, 0, 0, 0],
          },
        },
        data: echartCount,
        barGap: 0,
        legendHoverLink: false,
      },
      {
        name: "基金投资回报率",
        tooltip: {
          show: false,
        },
        type: "pictorialBar",
        itemStyle: {
          normal: {
            color: "rgba(183, 195, 226, 1)",
          },
        },
        symbol: "diamond",
        symbolRotate: 0,
        symbolSize: ["17", "7"],
        symbolOffset: ["0", "-4"],
        symbolPosition: "end",
        data: echartCount,
        z: 3,
      },
    ],
  };
  myChart1.setOption(option);
}
tryOnMounted(() => {
  window.onresize = function () {
    myChart1 && myChart1.resize();
  };
});
tryOnUnmounted(() => {
  myChart1 = null;
});
export default echarts1;