HTML部分
<div class="Msg-curve" id="curveEcharts"></div>
JS部分
// main.js中全局引入echarts然后調用 this.$echarts
let myChart = this.$echarts.init(document.getElementById('curveEcharts'))
// 繪制圖表
myChart.setOption({
title: {
text: ''
},
grid:{ // 上下左右間距大小
x:50,
y:10,
x2:50,
y2:50
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
xAxis: {
type: 'category',
data: [],
show: true, // 不顯示坐標軸線、坐標軸刻度線和坐標軸上的文字
axisLabel: {
textStyle: {
color: '#fff',//坐標值得具體的顏色
}
},
//設置軸線的屬性
axisLine:{
lineStyle:{
color:'#FFFFFF',
width:0, //這里是為了突出顯示加上的
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#FFFFFF' // y坐標軸字體顏色
}
},
splitLine: {
show: true, //去除網格線
lineStyle: {
type: 'dashed' //設置網格線類型
},
},
axisTick: { // y軸刻度線
show: false
},
axisLine: { // y軸
show: false,
}
},
series: [{
name: '事件總數',
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 1,
color: "rgba(39,148,173,1)" // 0% 處的顏色
}, {
offset: 1,
color: "rgba(220,56,129,0)" // 100% 處的顏色
}],
globalCoord: false // 缺省為 false
}
}
},
data: [10, 20, 50, 30, 40, 10],
color: '#2091BB',
itemStyle: {
normal: {
lineStyle: {
color: '#2091BB'
}
}
},
}]
});
// 添加點擊事件
myChart.on('click', function(param) {
// console.log(param.data.name);
if(param.data.name == '') {
that.barArr = [10,60,40];
that.barColor = '#CA8622';
that.nowdaybar();
} else if(param.data.name == '') {
that.barArr = [30,40,60];
that.barColor = '#0C92EF';
that.nowdaybar();
} else if(param.data.name == '') {
that.barArr = [50,20,60];
that.barColor = '#C23531';
that.nowdaybar();
}
});

