Echarts在线免费图表

 
            option = {
  
        backgroundColor: '#02263e',
        grid: [{
          left: "4%",
          right: "4%",
          bottom: "6%",
          height: "80%",
          containLabel: true,
        }],
        legend: {
          show: true,
          data: [],
          itemWidth: 15,
          itemHeight: 15,
          icon: 'rect',
          orient: 'horizontal',
          right: 20,
          top: 10,
          textStyle: {
            fontSize: 20,
            color: '#9EB7CC'
          },
        },
        xAxis: [{
          type: "category",
          data: new Array(9).fill().map((v, i) => `${i+1}月`), // 修改值
          axisLabel: {
            textStyle: {
              color: "rgba(232,241,249,0.65)",
              fontSize: 20
            }
          },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLine: {
            lineStyle: { color: "#616F84" }
          }
        }, {
          type: 'category',
          data: new Array(9).fill().map((v, i) => `${i+1}月`), // 修改值
          axisLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          boundaryGap: true,
          xAxisIndex: 1
        }],
        yAxis: [{
          type: "value",
          name: "次",
          nameGap: "14",
          nameTextStyle: {
            color: "rgba(232,241,249,0.65)",
            fontSize: 20
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            formatter: "{value}",
            color: "rgba(232,241,249,0.65)",
            fontSize: 20
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false,
          },
        }],
        series: [
          {
            name: '户表改造',
            data: [110, 120, 125, 130, 135, 140, 155, 160, 130], // 修改值
            type: 'bar',
            stack: 'total',
            barMaxWidth: 15,
            barGap: '30%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(51,136,255,0.10)' },
                { offset: 1, color: '#33A0FF'}
              ]),
              barBorderRadius: [0, 0, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              distance: 0,
              formatter: `{line|}`,
              rich: {
                line: {
                  width: 15,
                  height: 2,
                  backgroundColor: '#fff'
                }
              }
            },
            zlevel: 12
          },
          {
            name: '小区开户',
            data: [116, 100, 130, 166, 108, 125, 167, 122, 105], // 修改值
            type: 'bar',
            stack: 'total',
            barMaxWidth: 15,
            barGap: '30%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(51,136,255,0.10)' },
                { offset: 1, color: '#00DF8B'}
              ]),
              barBorderRadius: [0, 0, 0, 0],
            },
            zlevel: 12
          },
          {
            name: '私户开户',
            data: [160, 120, 100, 166, 110, 125, 167, 122, 133], // 修值
            type: 'bar',
            stack: 'total',
            barMaxWidth: 15,
            barGap: '30%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(51,136,255,0.10)' },
                { offset: 1, color: '#7C78FF'}
              ]),
              barBorderRadius: [0, 0, 0, 0],
            },
            zlevel: 12
          },
          // 阴影柱子
          {
            name: '',
            type: 'bar',
            barMaxWidth: 15,
            barGap: '-100%',
            data: new Array(9).fill(700), // 修改值， 最大值
            tooltip: {
              backgroundColor: 'transparent',
              formatter: ' ',
            },
            itemStyle: {
              normal: {
                color: 'rgba(14, 38, 69)'
              }
            },
            zlevel: 11
          },
          {
            name: '',
            type: 'bar',
            barWidth: 40,
            barGap: '-120%',
            data: new Array(9).fill(700), // 修改值，最大值
            tooltip: { show: false },
            itemStyle: {
              normal: {
                color: 'rgb(4,25,47)'
              },
            },
            zlevel: 9,
            xAxisIndex: 1
          }
        ]
};