Vue3使用ECharts的自定义堆叠条形图（纵向）

秋沐2024-08-09 12:19

先上效果图

展示区域

html 复制代码

<div id="main" style="height: 300px; width: 100%"></div>

配置信息

每个种类的data数组是number数组，这里我使用的变量是从接口返回的数据，为了方便理解，年度考核的绿色种类，里面的data数组我写死了，可以对照图上顺序自行理解

dataZoom:的配置是能够动态的显示条数据

javascript 复制代码

 var chartDom = document.getElementById('main')
    var myChart = echarts.init(chartDom)
    var option
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        min: 0
      },
      yAxis: {
        type: 'category',
        data: orgNameArr.value
      },
      series: [
        {
          name: '基本资料',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            color: '#165DFF'
          },
          data: basicArr.value
        },
        {
          name: '供热质量',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            color: '#14C9C9'
          },
          data: heatArr.value
        },
        {
          name: '设备维护',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            color: '#F7BA1E'
          },
          data: enqiudArr.value
        },
        {
          name: '应急响应',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            color: '#2817EA'
          },
          data: emrresArr.value
        },
        {
          name: '年终考核',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          itemStyle: {
            color: '#5DC47F'
          },
          emphasis: {
            focus: 'series'
          },
          // data: yearArr.value
          data: [10, 20, 30, 40]
        }
      ],
      dataZoom: [
        {
          type: 'slider',
          show: true,
          yAxisIndex: [0]
        },
        {
          type: 'inside',
          yAxisIndex: [0]
        }
      ]
    }
    option && myChart.setOption(option)