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 //全局引入，并配置全局变量，使用this.echarts=echarts//全局引入，并配置全局变量，使用this.echarts


* 在文件中使用echarts~~~vue
<template><div><el-card><div ref="main" style="width: 100%;height:400px;"></div></el-card></div></template>
//不需要额外导入importexport 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

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

vue+elementUI中使用Echarts （懒人无脑版）
vue+elementUI中使用Echarts (懒人无脑版)+(史上最强版) 前言一.Echarts 1.提供一个Echarts 网站随去随用 http://img.9cfcf.com/#tp- ...
ElementUI中使用ECharts
ElementUI中使用ECharts 一.引入ECharts 2.1.直接引入echarts (安装echarts项目依赖) npm install echarts --save 2.2.全局引入 ...
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象自我记录. Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做除了使 Vue 变 ...
vue 工程中加入 echarts 图表不显示的问题
vue 工程中加入 echarts 图表不显示的问题一.问题原因 vue 引用 echarts 方式错误,高版本采用了低版本的引用方式二.vue工程使用echarts vue官方教程 1. 安装 ...
vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
在Vue项目中使用echarts完成迁徙图（Map组件）
在Vue项目中使用echarts完成迁徙图此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答代码我放在了gith ...

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

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

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

最新文章

热门文章