Echarts在线免费图表

 
             const color = [
        "#EAEA26",
        "#906BF9",
        "#FE5656",
        "#01E17E",
        "#3DD1F9",
        "#FFAD05",
        "#EAEA26",
        "#906BF9",
        "#FE5656",
        "#01E17E",
        "#3DD1F9",
        "#FFAD05",
      ]; //2个以上的series就需要用到color数组
      const legend = {
        //data，就是取得每个series里面的name属性。
        icon: "circle", //图例形状
        padding: 0,
        top: 20,
        right: 40,
        itemWidth: 8, //小圆点宽度
        itemHeight: 8, // 小圆点高度
        itemGap: 20, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        textStyle: {
          fontSize: 14,
          color: "#333",
        },
      };
      const tooltip = {
        show: true,
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        formatter: function (prams) {
          let str = prams[0].axisValue + '月：<br/>'
          prams.map(item => {
            str += item.marker + ' ' + item.seriesName + '：' + item.value + '个<br/>'
          })
          return str;
        },
      };
      let xdata = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
      let seriesData = [
         {
            name:'类别1',
            data:[1,5,12,25,8,48,52,32,27,15,16,14]
         },
         {
            name:'类别2',
            data:[8,48,52,32,27,15,16,14,1,5,12,25,]
         },
         {
            name:'类别3',
            data:[12,25,8,48,52,32,27,15,16,1,41,5,]
         },
         {
            name:'类别4',
            data:[1,5,12,15,16,14,25,8,48,52,32,27]
         },
         {
            name:'类别5',
            data:[1,32,27,15,16,14,5,12,25,8,48,52,]
         }
      ];
      const commonConfigFn = (index) => {
        return {
          type: "line",
          smooth: true,
          showSymbol: false,
          symbol: "emptyCircle", //空心小圆点。线条小圆点形状
          symbolSize: 6, //小圆点大小
          itemStyle: {
            //还是小圆点设置
          },

          label: {
            show: false, //不显示小圆点上的label文字
          },
          lineStyle: {
            width: 1, //线条设置
          },

          areaStyle: {
            //填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
            opacity: 0.2,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: color[index], // 上处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(255,255,255,1)", // 下处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        };
      };

      seriesData = seriesData.map((item, index) => ({
        ...item,
        ...commonConfigFn(index),
      }));
      let option = {
        color,
        tooltip,
        legend,
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          name: "月",
          nameTextStyle: {
            verticalAlign: 'top',
            padding: [8, 0, 0, -15], // 修改单位位置
            color: "#333333",
            fontSize: 12,
          },
          axisLine: {
            show: true, //显示x坐标轴轴线
            lineStyle: {
              type: "solid",
              color: "#E4E4E4",
            },
          },
          axisTick: {
            show: false, //不显示x坐标1cm刻度
          },
          axisLabel: {
            interval:0,
            fontSize: 12,
            color: "#333333",
          },
          splitLine: {
            show: false, //不显示grid竖向分割线
          },
          data: xdata,
        },
        yAxis: {
          type: "value",
          name: "个",
          nameTextStyle: {
            padding: [0, 20, 0, 0], // 修改单位位置
            color: "#7F7F7F",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLabel: {
            color: "#7F7F7F",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#EFEFEF",
            },
          },
        },

        series: seriesData,
      };