echarts横向渐变柱状图，顶部带scatter,effectScatter,背景色

1.echarts横向渐变柱状图，顶部带scatter,effectScatter,背景色 （代码和效果如下）

<template>
<div class="chart" ref="mychart"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "lineChart",
  props: ['activeName'],
  data(){
    return {
      maxNum: 0,
      mapData: [],
      chartData:{
        citys: ['郑州', '安阳', '新乡', '洛阳', '南阳', '周口', '商丘', '许昌', '焦作', '平顶山', '信阳', '驻马店', '漯河', '濮阳', '开封', '鹤壁', '三门峡', '济源',],
        data: [6678256, 1374293, 1262234, 1189261, 1119845, 1063884, 964898, 913642, 798590, 753726, 590892, 440507, 438074, 394671, 338423, 263765, 256068, 100619]
      },
      option: {
        grid: {
          left: this.$fontSize(46),
          right: this.$fontSize(60),
          bottom: this.$fontSize(20),
          top: this.$fontSize(20),
          containLabel: true
        },
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function(params) {
            return params[0].name + ' : ' + params[0].value
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ABD7FF',
              fontSize: this.$fontSize(18),
              align: 'right',
              padding: [0, this.$fontSize(18), 0, 0]
            },
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: []
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontWeight: 'bold',
              // align: 'right',
              fontSize: this.$fontSize(20),
            },
          },
          data: []
        }],
        series: [{
          name: '值',
          type: 'bar',
          itemStyle: {
            normal: {
              barBorderRadius: this.$fontSize(20),
              color: function(params) {
                let topColor = 'rgba(3, 42, 89, 0.5)'
                let bottomColor = '#00B5FB'
                if(params.dataIndex===0){
                  topColor = 'rgba(3, 42, 89, 0.5)'
                  bottomColor = '#FB9400'
                }else if(params.dataIndex===1){
                  topColor = 'rgba(3, 42, 89, 0.5)'
                  bottomColor = '#FBE000'
                }else if(params.dataIndex===2){
                  topColor = 'rgba(3, 42, 89, 0.5)'
                  bottomColor = '#7AFCFD'
                }
                return  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: topColor
                }, {
                  offset: 1,
                  color: bottomColor
                }])
              }
            },
          },
          // shadowColor: 'red',
          // shadowBlur: 10,
          barWidth: this.$fontSize(14),
          data: [],
          zlevel: 1,
        }, {
          type: 'scatter',
          data: [],
          tooltip: {
            show: false,
          },

          symbol: 'circle',
          symbolSize: [this.$fontSize(12), this.$fontSize(12)],
          symbolOffset: [this.$fontSize(2), 0],
          zlevel: 2,
          itemStyle: {
            normal: {
              barBorderRadius: 20,
              color: function(params) {
                let color = '#00B5FB'
                if(params.dataIndex===0){
                  color = '#FB9400'
                }else if(params.dataIndex===1){
                  color = '#FBE000'
                }else if(params.dataIndex===2){
                  color = '#7AFCFD'
                }
                return  color
              }
            },
          },
        },
          {
            type: 'effectScatter',
            data: [],
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                color: function(params) {
                  let color = '#00B5FB'
                  if(params.dataIndex===0){
                    color = '#FB9400'
                  }else if(params.dataIndex===1){
                    color = '#FBE000'
                  }else if(params.dataIndex===2){
                    color = '#7AFCFD'
                  }
                  return  color
                }
              },
            },
            symbolSize:  [this.$fontSize(12), this.$fontSize(12)],
            symbolOffset: [this.$fontSize(2), 0],
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: this.$fontSize(14),
            barGap: '-100%',
            data: [],
            itemStyle: {
              normal: {
                color: '#20406A',
                barBorderRadius: this.$fontSize(20),
              }
            },
          },
        ]
      }
    }
  },

  mounted() {
    this.initChart()
  },
  methods:{
    //监听变化重新渲染

    //渲染图表
    initChart(){
      this.myChart = this.$echarts.init(this.$refs.mychart);
      console.log(this.chartData.citys)
      console.log(this.chartData.data)
      let citys = this.chartData.citys;
      let data = this.chartData.data;
      let datas = JSON.parse(JSON.stringify(this.chartData.data));
      let salvProMax = []; //背景按最大值
      let max = datas[1]
      for (let i = 0; i < data.length; i++) {
        salvProMax.push(max*2)
      }
      this.option.yAxis[0].data = citys
      this.option.yAxis[1].data = data
      datas[0] = datas[1]*2
      this.option.series[0].data = datas
      this.option.series[1].data = datas
      this.option.series[2].data = datas
      this.option.series[3].data = salvProMax
      this.myChart.setOption(this.option, true);
      window.addEventListener("resize", () => {
        this.myChart.resize();
        location.reload()
      });
    },
  }
}
</script>

<style scoped lang="less">
.chart {
  width: 100%;
  height: 100%;
}
</style>