Echarts实现堆叠图

先看图：

 完整代码：

<template>
<div class="echart-sheet" style="background-color: #ffffff">
<!--堆叠条形图-->
<div id="main" style="width: 100%; height: 800px;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: "index",
data() {
return {
data1: [],
data2: [],
data3: [],
}
},
mounted() {
this.draw()
},
methods: {
draw() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
let y1 = [10,20,30]
let y2 = [10,20,30]
let y3 = [10,20,30]
let y4 = [10,20,30]
var option1 = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'line'
// 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['x1', 'x2', 'x3'],
splitLine: {show: false},//去除网格线
}
],
yAxis: [
{
type: 'value',
}
],
series: [
{
name: '记录数',
type: 'bar',
stack: '1',
emphasis: {
focus: 'series'
},
label: {
show: true,
formatter: '{c}%'
},
data: y1
},{
name: '值',
type: 'bar',
stack: '1',
emphasis: {
focus: 'series'
},
label: {
show: true,
formatter: '{c}%'
},
data: y3
},
{
name: '记录数',
type: 'bar',
stack: '1',
emphasis: {
focus: 'series'
},
label: {
show: true,
formatter: '{c}%'
},
data: y4
},
{
name: '值',
type: 'bar',
stack: '1',
data: y2,
emphasis: {
focus: 'series'
},
label: {
show: true,
formatter: '{c}%'
},
// markLine: {
//
lineStyle: {
//
type: 'dashed'
//
},
//
data: [
//
[{type: 'min'}, {type: 'max'}]
//
]
// }
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option1);
}
}
}
</script>
<style scoped>
</style>

最后

以上就是魁梧羊为你收集整理的Echarts实现堆叠图的全部内容，希望文章能够帮你解决Echarts实现堆叠图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。