echart绘制

1.两重叠柱状图

总结：

1. 配置分析：一个x，两个y，有一个y只有data其他属性都是false（满格柱子），series中有两个bar图的配置
2. x的最大值配置，以5为间隔，因此shadowBar是除5乘5得到的
3. 排名样式formatter和rich配合使用，formatter设置排名1,2,3,4,日持设置其样式，看官网去

let shadowBar = new Array(data.length).fill(Math.ceil(data[data.length - 1].inflWeight / 5) * 5)
let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b0}：{c0}%'
        },
        grid: {
          left: 27,
          right: 33,
          top: 26,
          bottom: 32,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          data: data.map(data => data.inflWeight),
          nameTextStyle: {
            color: '#56A5FF'
          },
          // x坐标线配置(颜色)
          axisLine: {
            lineStyle: {
              color: '#56A5FF',
              type: "dotted"
            }
          },

          splitLine: {
            show: false,
          },
          axisLabel: {
            formatter: function (value) {
              return `${value.toFixed(1)}%`;
            }
          },
          max: shadowBar[0],
          min: 0.0,
        },
        yAxis: [{
          type: 'category',
          data: data.map(data => data.name),
          nameTextStyle: {
            color: '#56A5FF'
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#56A5FF',
            }
          },
          axisTick: {
            show: false // 是否显示坐标轴轴线
          },
          splitLine: {
            show: false,
          },

        },
        {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: data.map(data => data.name),
        },
        ],
        series: [
          {
            type: 'bar',
            yAxisIndex: 1,
            data: shadowBar,
            zlevel: 1,
            barWidth: 20,
            itemStyle: {
              normal: {
                color: 'rgba(168,186,255,0.1)',
              },
            },
          },
          {
            type: 'bar',
            barWidth: 20,//柱图宽度
            data: data.map(data => data.inflWeight),
            zlevel: 2,
            label: {
              show: true,
              position: 'right',
              align: 'center',
              verticalAlign: 'middle',
              padding: [0, 0, 0, -25],
              formatter: (params) => {
                if (data.length - params.dataIndex < 5) {
                  return `{a|${data.length - params.dataIndex}}`
                }
                return ''
              },
              rich: {
                a: {
                  fontFamily: ' PingFangSC-Medium',
                  fontSize: 14,
                  color: '#000000',
                  letterSpacing: '0',
                  verticalAlign: 'middle',
                  textAlign: 'center',
                  backgroundColor: '#F5C200',
                  lineHeight: 20,
                  height: 20,
                  borderRadius: 10,
                  width: 20
                }
              }
            },
            itemStyle: {
              normal: {
                // 柱形图圆角
                barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(
                  1, 0, 0, 1,
                  [
                    { offset: 0, color: 'rgba(116,224,255,1)' },
                    { offset: 1, color: 'rgba(39,137,247,0.8)' }
                  ]
                )
              },
            },
          },
        ]
      };