vue+elementui中使用echarts给柱形图添加背景色

vue+elementui中使用echarts给柱形图添加背景色

• 首先使用npm安装echarts

npm install echarts --save
//or(或者使用)
cnpm install echarts --save

• 在main中引入echarts

import * as echarts from ‘echarts’
Vue.prototype.$echarts=echarts//全局引入，并配置全局变量，使用this.$echarts

* 在文件中使用echarts

~~~vue
<template>
  <div>
    <el-card>
      <div ref="main" style="width: 100%;height:400px;"></div>
    </el-card>
  </div>

</template>
//不需要额外导入import
 export default {
    data() {
      return {
        wholeChart: null,
      }
    },
    mounted() {
      this.initWholeCharts()
    },
 	methods: {
		initWholeCharts() {
       	 this.wholeChart = this.$echarts.init(this.$refs.main);
        // 使用刚指定的配置项和数据显示图表。
       	 this.wholeChart.setOption({
          title: {
            text: '各地区完成情况'
          },
          tooltip: {},
          legend: {
            padding: [10, 0, 0, 0],
            // data: ['人数']
          },
          xAxis: {
            axisTick: {
              alignWithLabel: {
                boundaryGap: true//x轴坐标在竖线上
              }
            },
            type:'category',
            data: ["地区1", "地区2", "地区3", "地区4", "地区5", "地区6", "地区7", "地区8", "地区9","地区10","地区11","地区12","地区13","地区14"]
          },
          yAxis: {
            type:'value'
          },
          series: [
            {
              type: 'bar',
              itemStyle:{
                color:'#17B3A3'
              },//柱形颜色
              barWidth:'50%',//柱形的宽度
              showBackground:true,//是否显示柱条的背景色
              backgroundStyle:{
                // color:'#17B3A3',
                shadowColor:'#e7e7e7'//阴影颜色
              },
              data: [59, 70, 59, 70, 49, 12, 34, 59, 59,34,34,34,34,34],
            }
          ]
        })
        window.addEventListener('resize', () => {
          this.wholeChart.resize()
//这个是防止大屏切换小屏或者小屏切换大屏出现宽度变化而改变位置
        })
      }
	}
}

echarts官网背景色属性api： https://echarts.apache.org/zh/option.html#series-bar.showBackground