HTML部分
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();
}
});