Echarts在线免费图表

 
            let tableData = [
   {
      color: "red",
      deptName: "测试1",
      echartsType: "line",
      indexName: "副名称1",
      data: [
         { timer: '2023-01', indexValue: 5678 },
         { timer: '2023-02', indexValue: 1234 },
         { timer: '2023-03', indexValue: 456 },
         { timer: '2023-04', indexValue: 1245 },
         { timer: '2023-05', indexValue: 1452 },
      ],
      reportType: "balance",
      unit: "元",
      xyAxis: "left",
   },
   {
      color: "yellow",
      deptName: "测试2",
      echartsType: "bar",
      indexName: "副名称2",
      data: [
         { timer: '2023-01', indexValue: 100 },
         { timer: '2023-02', indexValue: 200 },
         { timer: '2023-03', indexValue: 300 },
         { timer: '2023-04', indexValue: 400 },
         { timer: '2023-05', indexValue: 500 },
      ],
      reportType: "balance",
      unit: "元",
      xyAxis: "left",
   },
   {
      color: "pink",
      deptName: "测试3",
      echartsType: "line",
      indexName: "副名称3",
      data: [
         { timer: '2023-01', indexValue: 123 },
         { timer: '2023-02', indexValue: 456 },
         { timer: '2023-03', indexValue: 10 },
         { timer: '2023-04', indexValue: 20 },
         { timer: '2023-05', indexValue: 30 },
      ],
      reportType: "balance",
      unit: "元1",
      xyAxis: "right",
   },
   {
      color: "blue",
      deptName: "测试4",
      echartsType: "bar",
      indexName: "副名称4",
      data: [],
      reportType: "balance",
      unit: "元1",
      xyAxis: "right",
   },
]
let list = tableData.map(item=>{
   item['timerArray'] = item.data.map(its=>{
      return its.timer
   })
   item['valueArray'] = item.data.map(its=>{
      return its.indexValue
   })
   return item
})
let unitArray = Object.values(
   list.reduce((obj, item) => {
      if (!obj[item.xyAxis]) {
         obj[item.xyAxis] = {};
      }
      obj[item.xyAxis][item.xyAxis] = item.unit;
      return obj;
   }, {})
);
let xAxisData = list.reduce((prev, next) => {
   return prev.timerArray.length > next.timerArray.length ? prev : next;
});
let yAxisArray = unitArray.map((item, index) => {
   let obj = {};
   for (let key in item) {
      obj = {
         type: "value",
         name: item[key],
         position: key,
         splitNumber: window.innerWidth > 1920 ? 10 : 5,
         axisLine: {
            show: false,
            lineStyle: {
               color: "#aaaaaa",
            },
         },
         nameTextStyle: {
            fontSize: window.innerWidth > 1920 ? 24 : 12,
         },
         axisTick: {
            show: false,
         },
         axisLabel: {
            color: "#aaaaaa",
            formatter: function (value, index) {
               if (value > 0 && value < 100000000) {
                  value = Number(value) / 10000 + " 万";
               } else if (value >= 100000000) {
                  value = Number(value) / 100000000 + " 亿";
               }
               return value;
            },
            textStyle: {
               fontSize: window.innerWidth > 1920 ? 24 : 12,
            },
         },
         splitLine: {
            show: true,
            lineStyle: {
               color: "#e7e9ef",
               type: "dashed",
            },
         },
      };
   }
   return obj;
});
let setSeriesArray = list.map((item) => {
   let lineStyle =
      item.echartsType == "line" ? { color: item.color, width: 3 } : {};
   let itemStyleLine =
      item.echartsType == "line" ? { normal: { color: item.color } } : {};
   let itemStyle =
      item.echartsType == "bar" ? { color: item.color, width: 3 } : {};
   let yAxisIndex = unitArray.length > 1 && item.xyAxis == "right" ? 1 : 0;
   console.log(item, 'itemitemitemitem')
   let obj = {
      name: `${item.deptName}-${item.indexName} (${
         item.xyAxis == "left" ? " 左边轴" : " 右边轴"
         } ${item.data.length == 0 ? '无数据 ' : ''})`,
      type: item.echartsType,
      symbol: "circle", //标记的图形为实心圆
      yAxisIndex: yAxisIndex,
      symbolSize: window.innerWidth > 1920 ? 20 : 10, //标记的大小
      lineStyle: lineStyle,
      itemStyle: item.echartsType == "line" ? itemStyleLine : itemStyle,
      barMaxWidth: window.innerWidth > 1920 ? 30 : 15,
      data: item.valueArray,
   };
   return obj;
});
option = {
   //你的代码
   grid: {
      top: "15%",
      left: "5%",
      right: "5%",
      bottom: "15%",
      containLabel: true,
   },
   tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(1, 13, 19, 0.5)",
      borderWidth: window.innerWidth > 1920 ? 2 : 1,
      axisPointer: {
         type: "shadow",
      },
      formatter: function (params) {
         var str = "";
         if (params.length > 0) {
            str = params[0].name + "<br/>";
         }
         for (var i = 0; i < params.length; i++) {
            if (params[i].seriesName !== "") {
               str += params[i].seriesName + ":" + params[i].value + "<br/>";
            }
         }
         return str;
      },
      textStyle: {
         color: "rgba(212, 232, 254, 1)",
      },
      extraCssText: "z-index:2",
   },
   legend: {
      left: "center",
      bottom: "1%",
      icon: "rect",
      itemWidth: window.innerWidth > 1920 ? 30 : 15,
      itemHeight: window.innerWidth > 1920 ? 8 : 4,
      itemGap: window.innerWidth > 1920 ? 30 : 15,
      borderRadius: window.innerWidth > 1920 ? 8 : 4,
      textStyle: {
         color: "#8c8c8c",
         fontFamily: "Alibaba PuHuiTi",
         fontSize: window.innerWidth > 1920 ? 24 : 12,
      },
   },
   xAxis: {
      type: "category",
      data: xAxisData.timerArray,
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         show: true,
         textStyle: {
            color: "#393939", //X轴文字颜色
            fontSize: window.innerWidth > 1920 ? 24 : 12,
         },
      },
   },
   yAxis: yAxisArray,
   series: setSeriesArray,
};