echart 百分比+竖式柱状图

<template>
  <div
    id="diseases-distribution"
    ref="diseases_distribution"
    :style="{height:height,width:width}"
  ></div>
</template>

<script>
import echarts from 'echarts'
import resize from '@/util/resize'
export default {
  name: "DiseasesDistribution",
  mixins:[resize],
  props:{
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    title:{
      type: String,
      default: ''
    },
    data:{
      type:Array,
      default:()=>[]
    },
  },
  mounted() {
    this.initChart()
  },
  watch:{
    data: {
      deep: true,
      handler() {
        this.initChart()
      }
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods:{
    initChart() {
      this.chart = echarts.init(this.$refs.diseases_distribution)
      const dataLine = []
      const final = []
      const name = []
      let dataTotal = 0
      for (let i = this.data.length-1; i >=0 ; i--) {
        name.push(this.data[i].name)
        dataTotal += parseInt(this.data[i].value)
      }
      for (let i = this.data.length-1; i >=0 ; i--) {
        if ((dataTotal)==0){
          dataLine.push(0)
        }else {
          dataLine.push(((parseInt(this.data[i].value)/dataTotal)*100).toFixed(2))
        }
        final.push(this.data[i].value)
      }
      const option = {
        title: {
          text: this.title,
          x:20,
          textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 15,
            color: 'black',
            fontWeight: 'bolder',
          },
        },
        backgroundColor: '#fff',
        yAxis: {
          type: 'category',
          axisLine: {
            show: false //坐标线
          },
          axisTick: {
            show: false //小横线
          },
          axisLabel: {
            color: '#999' //坐标轴字颜色
          },

          data: name
        },
        xAxis: {
          show: true,
          splitLine:{
            show:false
          },
          axisLine: {
            show: true, //坐标线
            lineStyle:{
              color:'#ccc'
            }

          },
          axisLabel: {
            color: '#000' //坐标轴字颜色
          },
          axisTick: {
            show: true //小横线
          },

        },
        tooltip: {
          show: true, //鼠标放上去显示悬浮数据
        },
        grid: {
          top: '13%',
          right: '12%',
          left: '12%',
          bottom: '13%' //图表尺寸大小
        },
        // animationDuration: function (idx) {
        //                 // 越往后的数据时长越大
        //                 return idx * 9000;
        //             },
        animationDuration: 100,
        series: [{
          /* data: [120, 200, 150, 80, 70, 110, 130], */
          type: 'bar',
          barWidth: '15px',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.4)',
            //barBorderRadius: [30, 30, 30, 30] //圆角大小
          },
          label: {
            normal: {
              show: true,
              position: "right",
              distance: 8,
              formatter: function(data) {
                return dataLine[data.dataIndex]+ "%"
              },
              textStyle: {
                color: "#000000",
                fontSize: 16
              }
            }
          },
          itemStyle: {
            normal: {
              /*color: (params) => {
                let colors = ['#4956ff', '#2d82ff', '#2dc6ff', '#2fca95']
                return colors[params.dataIndex]
              }, //每个数据的颜色*/
              color: '#8167F5',
              //barBorderRadius: [30, 30, 30, 30], //圆角大小
              shadowBlur: 10,
              shadowColor: 'rgba(0, 103, 255, 0.2)',
              shadowOffsetX: -5,
              shadowOffsetY: 5,
            },
          },
          data: final
        }]
      }
      this.chart.setOption(option)
    }
  },
}
</script>

<style scoped>

</style>