Echarts在线免费图表

 
                 let chartData = [
        {
          seriesName: "金额",
          value: [100, 20, 30,40,20,50,80,30,50,44,32,55,21],
            name: ["1日", "2日", "3日","4日","5日", "6日", "7日","8日","9日","10日","11日","12日","13日"],
          label: {
                  show: true,
                  position: "top",
                },
        },
        {
          seriesName: "重量",
          value: [32,87,12,50, 30, 30,25,33,99,88,77,44,11],
            name: ["1日", "2日", "3日","4日","5日", "6日", "7日","8日","9日","10日","11日","12日","13日"],
          label: {
                  show: true,
                  position: "top",
                },
        },
        {
          seriesName: "订单",
          value: [50, 20, 30,11,44,77,22,55,88,33,66,99,100],
         name: ["1日", "2日", "3日","4日","5日", "6日", "7日","8日","9日","10日","11日","12日","13日"],
           label: {
                  show: true,
                  position: "top",
                },
        },
      ];
      var series = [];
      function getSeries(name) {
        return {
          name: name,
          type: "bar",
          symbolSize: 8,
          data: [],
          smooth: true,
          itemStyle: {
            color: {
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0.1,
                  color: "#1478C8", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#11C2FF", // 100% 处的颜色
                },
              ],
            },
          },
        };
      }
      var xarr = [];
      let selectedObj = {};
      for (var i = 0; i < chartData.length; i++) {
        var item = chartData[i];
        var serie = getSeries(item.seriesName);
        serie.data = item.value;
        serie.barWidth = 20;
        series.push(serie);
        let realtimeArr = [];
        for (var j = 0; j < item.name.length; j++) {
          let realtime = item.name[j];
          realtimeArr.push(realtime);
        }
        xarr = realtimeArr;
      }
   
   
   option = {
        backgroundColor: "#ffffff",
        title: {
          show: false,
        },
        legend: {
          show: true,
          bottom: 15,
          itemWidth: 15,
          itemHeight: 2,
          itemGap: 20,
          align: "center",
          right: "0",
          formatter: "{a|{name}}",
          inactiveColor: "transparent",
          selectedMode: "single",
          textStyle: {
            width: 10,

            padding: [-20, -25, 0, 0],

            rich: {
              a: {
                align: "center",
                fontSize: 14,
                color: "#333333",
              },
            },
          },
          selected: selectedObj,
        },

        tooltip: {
          trigger: "axis",
          show: true,
          rotate: -90,
          extraCssText: "transform: rotate(90deg)",
        },
        title: {
          show: false,
          text: "回收交易数据",
          left: "left",
          textStyle: {
            color: "#333333",
            fontSize: 18,
          },
        },
        grid: {
          left: 40,
          right: 100,
          bottom: 40,
          top: 30,
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: "#EFEFEF",
            },
          },
          position: "top", //x 轴的位置【top bottom】
          nameRotate: -90, //坐标轴名字旋转，角度值。
          scale: true, //是否是脱离 0 值比例
          axisLabel: {
            color: "#999999",
            rotate: 90,
            textStyle: {
              color: "#999999",
              fontSize: 11,
            },
          },
          splitLine: {
            lineStyle: {
              type: "solid",
              color: "#EFEFEF",
            },
          },
        },
        yAxis: {
          // name: "(金额：元 | 重量：KG | 订单：笔)",
          data: xarr,
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            color: "red",
          },
          inverse: "true", //是否是反向坐标轴。
          axisLabel: {
            color: "#999999",
            rotate: -90,
            textStyle: {
              color: "#999999",
              fontSize: 11,
            },
          },
          splitLine: {
            lineStyle: {
              type: "solid",
              color: "#EFEFEF",
            },
          },
        },

        series: series,
        dataZoom: {
          // inside
          type: "inside",
          minValueSpan: 7,
          maxValueSpan: 7,
          yAxisIndex: [0, 1],
        },
      };