柱形echarts图,顶部和底部加椭圆

    initbarChart(data) {
      if (!this.barChart) {
        this.barChart = this.$echarts.init(document.getElementById(this.id))
      }
      // let xData = val.divisionName
      // let yData = val.value0
      const xData = data.map((item) => item.name)
      const yData = data.map((item) => item.value)
      // 修改柱子宽度之后需要根据实际情况微调一下下面的symbolOffset
      const barWidth = 30
      this.barChart.setOption({
        backgroundColor: '#fff',
        grid: {
          top: '8%',
          left: '2%',
          bottom: '6%',
          right: '6%',
          containLabel: true
        },
        tooltip: {
          // trigger: 'axis',
          show: true,
          backgroundColor: '#fff',
          borderColor: '#fff',
          textStyle: {
            color: '#606266'
          },
          // showContent: true,
          formatter: '{b}：{c}个'

          // formatter: (params) => {
          //   console.log(params, 'params')
          // },
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: '0%',
          feature: {
            saveAsImage: { show: true } // 保存图表
          }
        },
        animation: false,
        xAxis: [
          {
            name: '',
            nameGap: 10,
            nameTextStyle: {
              color: 'rgba(192, 210, 230, 1)',
              fontSize: 12,
              fontWeight: 'bold',
              padding: [0, 0, 0, 0]
            },
            show: true,
            type: 'value',
            // type: 'log', //第1步，换成log；
            // logBase: 3,
            // min: 1,
            axisLabel: {
              textStyle: {
                color: 'rgba(48, 49, 51, 1)'
              }
              // formatter: function (value) {
              //   return value === 1 ? 0 : value //第2步，将y轴最小值1变成从0开始；
              // },
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(223, 227, 232, 1)',
                type: 'dashed'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            data: xData,
            cursor: 'pointer',
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            nameTextStyle: {
              color: '#82b0ec'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#82b0ec'
              }
            },
            labels: {
              style: {
                cursor: 'pointer'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(48, 49, 51, 1)',
                lineHeight: 18

              },
              formatter: function(value, index) {
                // let text=
                return `${value.slice(0, 6)}\n${value.slice(6, -1)}查`
              },
              // rotate: 30,
              margin: 15
            }
          }
        ],
        series: [
              // 难点
          {
124             name: '',
125             type: 'pictorialBar',
126 
127             yAxisIndex: 0,
128             symbolSize: function(d) {
129               return d > 0 ? [8, barWidth] : [0, 0]
130             },
131             symbolOffset: [4, 0], // 上部椭圆
132             symbolPosition: 'end',
133             z: 12,
134             label: {
135               // 顶部文字
136               normal: {
137                 show: false,
138                 position: 'top',
139                 // "formatter": "{c}%"
140                 fontSize: 14,
141                 // fontWeight: "bold",
142                 color: '#52E568'
143               }
144             },
145             color: '#ffa041',
146             data: yData
147           },
148           {
149             name: '',
150             type: 'pictorialBar',
151             symbolSize: function(d) {
152               return d > 0 ? [10, barWidth] : [0, 0]
153             },
154             symbolOffset: [-4, 0], // 下部椭圆
155             // "barWidth": "20",
156             z: 12,
157             color: '#f57b22',
158             data: yData
159           },
          {
            type: 'bar',
            // silent: true,
            barWidth: barWidth,
            Offset: [2, 0],
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: '#ff740a'
                  },
                  {
                    offset: 1,
                    color: '#fe9c3e'
                  }
                ]),
                opacity: 0.8
              }
            },
            data: yData
          }
        ]
      }, true)
      const that = this
      this.barChart.off('click')
      this.barChart.on('click', async function(param) {
        if (that.xData.includes(param.name)) {
          let getNames
          let getDatas
          data.forEach(item => {
            if (param.name === item.name) {
              that.currentItem = item
              getDatas = item.children.map(item1 => item1.name)
              getNames = item.children.map(item2 => item2.name)
            }
          }
          )
          that.barChart.setOption({}, true)
          setTimeout(() => {
            that.initbarChart(that.currentItem.children)
            that.$emit('showBackButton')
          }, 100)
          /*  that.barChart.setOption({
            yAxis: [
              {
                data: getDatas
              }
            ],
            series: [
              {
                data: getNames
              }
            ]
          }) */
        }
      })
      this.barChart.resize()
    },