echarts实现柱状图

实现效果

代码如下

html

<div class="charts-grid-con2 white-bg">
  <h3>用途收入</h3>
  <div ref="usageStatistics" class="echart_container"></div>
</div>

script

mounted(){
   //用途收入
this.initUsageStatistics() 
},
methods:{
initUsageStatistics() {
  let nameList = []
  let valueList = []
  this.usageData.forEach(item => {
    nameList.push(item.name)
    valueList.push(item.value)
  })
  let option = {
    xAxis: {
      type: 'category',
      //x轴字体太多斜放
      axisLabel: {
        interval: 0,
        rotate: 40
      },
      data: nameList
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        itemStyle: {
          normal: {
            //这里设置每个柱子颜色不一样
            color: function (params) {
              // 定义一个颜色数组colorList
              let colorList = ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'];
              return colorList[params.dataIndex]
            },
            //柱状上方显示数据
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'black',
                fontSize: 12
              }
            }
          },
        },
        data: valueList
      }
    ]
  };
  echarts.init(this.$refs.usageStatistics).setOption(option);
},
},