Echarts在线免费图表

 
            var
   xNameList = [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
   ],
   allData = [
      [40, 41, 35, 32, 28, 34, 36, 4, 42, 41, 42, 38],
      [35, 32, 26, 24, 22, 28, 3, 36, 34, 34, 34, 29],
      [40, 41, 35, 32, 28, 34, 36, 4, 42, 41, 42, 38],
      [35, 32, 26, 24, 22, 28, 3, 36, 34, 34, 34, 29],
      [40, 41, 35, 32, 28, 34, 36, 4, 42, 41, 42, 38],
      [35, 32, 26, 24, 22, 28, 3, 36, 34, 34, 34, 29],
      [20, 26, 2, 19, 18, 22, 26, 3, 28, 3, 28, 2],
      [21, 22, 15, 10, 14, 15, 20, 16, 6, 8, 16, 12],
   ],
   titleList = [
      {
         name: "当期潜在人数",
      },
      {
         name: "当期就诊人数",
      },
      {
         name: "当期停诊人数",
      },
      {
         name: "同期潜在人数",
      },
      {
         name: "同期就诊人数",
      },
      {
         name: "同期停诊人数",
      },
      {
         name: "同比",
         icon: "circle",
      },
      {
         name: "环比",
         icon: "circle",
      },
   ],
   colorArr = [
      "#8AB7F3",
      "#FFC35E",
      "#9186FF",
      "#BEDAFF",
      "#FFD794",
      "#C6C1FF",
      "#F6BD16",
      "#52698F",
   ],
   rotate = 0,
   firstIndex=3,
   secondIndex=3

var normalColor = "#666";
let seriesData = [];
allData.forEach((item, index) => {
   var obj1 = {};
   if (index < firstIndex) {
      if (index <= 0) {
         var obj2 = {
            name: "",
            type: "bar",
            stack: "truck0",
            data: item,
            barWidth: "15%",
            lineStyle: {
               normal: {
                  width: 0,
               },
            },
            itemStyle: {
               normal: {
                  color: "transparent",
                  borderColor: "transparent",
                  borderWidth: 1,
               },
            },
         };
         seriesData.push(obj2);
      }
      obj1 = {
         name: titleList[index].name,
         type: "bar",
         stack: "truck",
         data: item,
         barWidth: "15%",
         itemStyle: {
            normal: {
               color: colorArr[index],
               borderWidth: 1,
            },
         },
      };
      seriesData.push(obj1);
   } else if (index >= firstIndex && index < secondIndex + firstIndex) {
      obj1 = {
         name: titleList[index].name,
         type: "bar",
         stack: "truck1",
         data: item,
         barWidth: "15%",
         itemStyle: {
            normal: {
               color: colorArr[index],
               borderWidth: 1,
            },
         },
      };
      seriesData.push(obj1);
   } else {
      var obj3 = {
         name: titleList[index].name,
         type: "line",
         yAxisIndex: 1,
         smooth: false,
         // symbol: "circle",不加默认空心圆
         symbolSize: 8,
         lineStyle: {
            normal: {
               width: 2,
            },
         },
         itemStyle: {
            normal: {
               color: colorArr[index],
               borderWidth: 1,
            },
         },
         data: item,
         label: {
            normal: {
               show: false,
            },
         },
      };
      seriesData.push(obj3);
   }
});
let option = {
   backgroundColor: "#fff",
   grid: {
      top: "12%",
      right: "0%",
      bottom: "5%",
      containLabel: true,
   },
   legend: {
      show: true,
      itemWidth: 16,
      itemHeight: 9,
      right: "0%",
      top: "0%",
      textStyle: {
         color: "#000",
      },
      data: titleList,
   },
   tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0, 0, 0, .8)", //设置背景颜色
      textStyle: {
         color: "#fff",
      },
      axisPointer: {
         type: "line",
      },
      formatter: function (params) {
         var str = "";
         for (var i = 0; i < params.length; i++) {
            if (params[i].seriesName !== "") {
               str +=
                  params[i].name +
                  ":" +
                  params[i].seriesName +
                  "-" +
                  params[i].value +
                  "<br/>";
            }
         }
         return str;
      },
   },
   xAxis: [
      {
         type: "category",
         data: xNameList,
         axisPointer: {
            type: "line",
         },
         axisLabel: {
            interval: 0,
            align: "center",
            margin: 15,
            rotate: rotate,
            textStyle: {
               color: normalColor,
               fontSize: 12,
            },
         },
         axisLine: {
            lineStyle: {
               color: "rgba(0, 0, 0, 0.4)",
            },
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         },
      },
   ],
   yAxis: [
      {
         type: "value",
         axisLabel: {
            formatter: "{value}",
            textStyle: {
               color: normalColor,
               fontSize: 14,
            },
         },
         axisLine: {
            lineStyle: {
               color: "#1C82C5",
            },
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: true,
            lineStyle: {
               type: "dashed",
               color: "rgba(223, 223, 223, 1)",
            },
         },
      },
      {
         type: "value",
         // name: "%",
         // nameTextStyle: {
         //     color: normalColor,
         //     fontSize: 12
         // },
         // min: -100,
         // max: 100,
         axisLabel: {
            formatter: "{value}",
            textStyle: {
               color: normalColor,
               fontSize: 12,
            },
         },
         axisLine: {
            lineStyle: {
               color: "#1C82C5",
            },
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
            lineStyle: {
               type: "dashed",
               color: "rgba(255,255,255,0.2)",
            },
         },
      },
   ],
   series: seriesData,
};