//堆疊條形圖
<template>
<!--
ref="myechart"定義該div也就是畫布的名字，在this.$echarts.init(this.$refs.myechart) 圖表初始化的時候使用
this.$refs.myechart 也可以替換為 document.getElementById('main') 或者 document.getElementByClassName('echart-box')
-->
<div class="demo5 echart-box" ref="myechart" id="main"></div>
</template>
<script>
export default {
name: "demo5",
data() {
return {};
},
//頁面加載完成時候執行
mounted: function() {
// console.log(this.$echarts)
//初始化
let myChart = this.$echarts.init(document.getElementById('main'))
// 定義圖表，各種參數
//setOption 用this.option中的數據開始作圖
//官網中的例子直接在這里面套用就可以了
myChart.setOption({
title : {
text:'堆疊條形圖',//右上角標題，格式必須這樣寫不然會報錯
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
legend: {
data: ['直接訪問', '郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日']
},
series: [
{
name: '直接訪問',
type: 'bar',
stack: '總量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: '郵件營銷',
type: 'bar',
stack: '總量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '聯盟廣告',
type: 'bar',
stack: '總量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '視頻廣告',
type: 'bar',
stack: '總量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
stack: '總量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
});
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.demo5 {
width: 1000px;
height: 600px;
background: #cce6f0;
/* margin: 0 auto; */
}
</style>
