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

8 篇文章 0 订阅
2 篇文章 0 订阅

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

  • 首先使用npm安装echarts
npm install echarts --save
//or(或者使用)
cnpm install echarts --save
  • 在main中引入echarts

import * as echarts from ‘echarts’
Vue.prototype. e c h a r t s = e c h a r t s / / 全 局 引 入 , 并 配 置 全 局 变 量 , 使 用 t h i s . echarts = echarts //全局引入,并配置全局变量,使用this. 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值