Echarts在线免费图表

 
            let XData = ["陆家所","花桥所","千灯所","锦溪所","兵希所","陆家所1","花桥所1","千灯所1"]
let valueData = [
  {
    data: [7845,6587,6109,5907,3209,3200,2478,1438]
  },
  {
    data: [325,435,654,54,223,67,45,4]
  }
  ]
option = {
        color: ["#65779E"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "10%", //距离dom间距
          right: "10%",
          top: "10%",
          bottom: "1%"
        },
        xAxis: [
          {
            type: "value",
            axisPointer: {
              type: "shadow"
            },
            // 横坐标 分割线等取消显示
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              // show: false,
              margin: 50,
              fontSize: 15,
              align: 'left',
              color: '#000000',
              padding: [0,0,0,-50],
              interval: 0,
              rich: {
                  a: {
                      color: 'rgba(37, 168, 250, 1)',
                      backgroundColor: '#fff',
                      borderColor: 'rgba(37, 168, 250, 1)',
                      borderWidth: 2,
                      width: 24,
                      height: 24,
                      align: 'center',
                      borderRadius: 24,
                      fontSize: 15,
                  }
              },
              formatter: function(params) {
                  var index = XData.map(item => item).indexOf(params);
                  index = index + 1;
                   return [
                      '{a|' + index + '}' + '  ' + params
                   ].join('\n')
              }
            },
            // 纵坐标数据
            data: XData,
            yAxisIndex: 0,
            // 横坐标 分割线等取消显示
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          {
            type: "category",
            // inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              // show: false,
              // margin: 50,
              fontSize: 15,
              align: 'right',
              color: '#000000',
              padding: [0,-70,0,0],
              interval: 0,
              rich: {
                  a1: {
                      color: 'rgba(21, 161, 249, 1)',
                      fontSize: 15,
                  },
                  a2: {
                      color: 'rgba(125, 182, 9, 1)',
                      fontSize: 15,
                  },
              },
              formatter: function (value, index) {
                return `{a1|${value}/}`+`{a2|${valueData[1].data[index]}}`
            },
            },
            // 统计的总量 用纵坐标模拟
            data: valueData[0].data
          }
        ],
        series: [
          {
            name: "全量",
            type: "bar",
            // 宽度
            barWidth: "16",
            // 堆叠
            stack: "总量",
            showBackground: true,
            // 全部背景
             backgroundStyle: {
              color: "#EEF2F9",
              borderColor: 'rgba(183, 209, 222, 0.58)',
              borderWidth: 1
            },
            data: valueData[0].data,
            itemStyle: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 16
                },
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "RGBA(37, 168, 250, 1)"
                    },
                    {
                      offset: 1,
                      color: "RGBA(37, 168, 250, 1)"
                    }
                  ],
                  false
                )
              }
            }
          },
          {
            name: "标准",
            type: "bar",
            // 宽度
            barWidth: "16",
            // 堆叠
            stack: "总量",
            showBackground: true,
            // 全部背景
            backgroundStyle: {
              color: "#EEF2F9",
              borderColor: 'rgba(183, 209, 222, 0.58)',
              borderWidth: 1
            },
            data: valueData[1].data,
            itemStyle: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 16
                },
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(115, 154, 14, 1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(175, 231, 69, 1)"
                    }
                  ],
                  false
                )
              }
            }
          }
        ]
      };