echarts 进度条类型柱状图

父组件：

javascript 复制代码

<barChartProfit :opt="avgProfit" />

import barChartProfit from "./components/barChartProfit";

data() {
	return {
		avgProfit: {
	        xData: ['2019', '2020', '2021', '2022', '2023'],
	        totalData: [30,30,30,30,30],
	        seriesData: [10,11,12,21,15]
	      }
	}
}

子组件：

javascript 复制代码

<template>
  <div style="width: 100%;height: 100%;">
    <ChartPanel ref="chart" :option="options" :style="opt.yAxisName ? 'height:calc(100% - 16px)' : ''"></ChartPanel>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import ChartPanel from '@/components/ChartPanel';
export default {
  components: {
    ChartPanel
  },
  props: {
    opt: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      options: null
    }
  },
  watch: {
    opt: {
      deep: true,
      immediate: true,
      handler(val) {
        // if (val && val.seriesData) {
        this.getOpt(val)
        // }
      }
    }
  },
  methods: {
    getOpt(val) {
      let {
        seriesData,
        xData,
        totalData
      } = val
      this.options =  {
        title: {
          text: '年人均利润',
          x: 'left',
          y: 0,
          textStyle: {
            color: 'rgba(35, 35, 56, 1)',
            fontSize: 16,
            fontWeight: '700',
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: params => {
            let i = params.length - 1
            let result = `
            <div>${params[i].name}年
              <span style="color:#336CFF;font-weight:700">${params[i].value}万元</span>  
            </div>`
            return result
          }
        },
        xAxis: {
          type: 'value',
          max: totalData[0],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#595D64",
              fontSize: 14,
            }
          },
          splitLine: {
            show: false,
          }
        },
        grid: {
          left: '40',
          right: '16',
          bottom: '0',
          top: 32,
          containLabel: true
        },
        yAxis: [{
          type: "category",
          inverse: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          data: xData,
        }],
        series: [{
          // 灰色背景
          type: "bar",
          barWidth: 12,
          legendHoverLink: false,
          silent: true,
          itemStyle: {
            normal: {
              color: 'rgba(242, 244, 247, 1)',
            }
          },
          label: {
            normal: {
              show: true,
              position: "left",
              formatter: "{b}",
              textStyle: {
                color: "rgba(89, 93, 100, 1)",
                fontSize: 14,
              }
            }
          },
          data: totalData,
          z: 1,
          animationEasing: "elasticOut"
        },
        {
          // 灰色背景分隔线
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: "#fff"
            }
          },
          symbolRepeat: "fixed",
          symbolMargin: 4,
          symbol: "rect",
          symbolClip: true,
          symbolSize: [2, 14],
          symbolPosition: "start",
          symbolOffset: [1, -1],
          data: totalData,
          z: 2,
          animationEasing: "elasticOut"
        }, {
          // 蓝色背景
          type: "bar",
          barWidth: 12,
          barGap: '-100%',
          legendHoverLink: false,
          silent: true,
          itemStyle: {
            normal: {
              color: 'rgba(53, 98, 212, 1)',
            }
          },
          label: {
            normal: {
              show: true,
              position: "right",
              formatter: "{c}万元",
              textStyle: {
                color: "#595D64",
                fontSize: 14
              }
            }
          },
          data: seriesData,
          z: 3,
          animationEasing: "elasticOut"
        },
        {
          // 分隔线
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: "#fff"
            }
          },
          symbolRepeat: "fixed",
          symbolMargin: 4,
          symbol: "rect",
          symbolClip: true,
          symbolSize: [2, 14],
          symbolPosition: "start",
          symbolOffset: [1, -1],
          data: seriesData,
          z: 4,
          animationEasing: "elasticOut"
        },
        ]
      };
      this.$nextTick(() => {
        this.$refs.chart.initChart(echarts, chart => {
          // chart.setOption(this.options)
          this.options && chart.setOption(this.options, true);
        });
      })
    }
  }
}
</script>