echarts实现堆叠柱状图
1、引入echarts并在main.js中全局安装npm install echarts --save在main.js中全局注册import echarts from "echarts";Vue.prototype.$echarts = echarts;2、用echarts绘制一个堆叠柱状图// html<div id="main" ref="echarts" class="mt-40" v
·
1、引入echarts并在main.js中全局安装
- npm install echarts --save
- 在main.js中全局注册
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
2、用echarts绘制一个堆叠柱状图
// html
<div id="main" ref="echarts" class="mt-40" v-show="!noData"></div>;
// js
let _xAxis = ["创意审核", "金点子", "情报传递", "新闻发布", "内容审核"];
console.log(JSON.stringify(_xAxis));
let _series = [
{
name: "已审核",
type: "bar",
stack: "check",
data: [],
itemStyle: {
normal: {
color: "#3272ae"
}
}
},
{
name: "未审核",
type: "bar",
stack: "check",
data: [],
// 设置
itemStyle: {
normal: {
color: "#e0e0e0"
}
}
}
];
_series[0].data = [200, 100, 80, 100, 200, 300];
_series[1].data = [200, 100, 80, 100, 200, 300];
// 绘制图表
var myChart = this.$echarts.init(this.$refs.echarts);
// 绘制图表
myChart.setOption({
title: {},
tooltip: {},
xAxis: {
data: _xAxis
},
yAxis: {},
series: _series
});
- 展示结果
注意事项:设置柱状图颜色必须使用itemStyle对象
更多推荐
已为社区贡献13条内容
所有评论(0)