vue echarts 柱状图

安装echarts

 npm install echarts --save

引入echarts

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

准备容器

<div id="MiddleLayerCadreSex" ></div>

javascript代码

	  // 初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('MiddleLayerCadreAge'))

      // 图表的配置项和数据
      var option = {
        title: {
          text: '中层干部队伍年龄分布情况'
        },
        legend: {
          right: '20px',
          top: '20px',
          data: ['正股职', '副股职']
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [],
        tooltip: {
          trigger: 'item'
        }
      }
      var xData = []
      var EquityPosition = []
      var DeputyStockPosition = []
      // PersonnelMiddleLayerCadreAge 后端返回的数据集合
      this.PersonnelMiddleLayerCadreAge.filter((item, index) => {
        xData.push(item.ageScope)
        EquityPosition.push(item.equityPosition)
        DeputyStockPosition.push(item.deputyStockPosition)
      })
      option.xAxis.data = xData
      option.series.push({
        label: {
          formatter: '{name|{b}}{time|{c}}人',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999'
            }
          }
        },
        name: '正股职',
        data: EquityPosition,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        barWidth: 15,
        color: '#769FFF',
        itemStyle: {
          normal: {
            // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
            barBorderRadius: 20
          }
        }
      })
      option.series.push({
        name: '副股职',
        data: DeputyStockPosition,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        barWidth: 15,
        color: '#00C28C',
        itemStyle: {
          normal: {
            // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
            barBorderRadius: 20
          }
        }
      })
      
	  // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)

      // 点击柱状图有效区域
      myChart.on('click', (params) => {
        console.log(params)
        var name = params.name
        var seriesName = params.seriesName
        
      })

效果图