vue中的⼀个Echarts和点击事件HTML部分
          <div class="Msg-curve" id="curveEcharts"></div>
JS部分
          // main.js中全局引⼊echarts然后调⽤ this.$echarts
          let myChart = this.$echarts.ElementById('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:{setoption
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'
}
}
},
}]
});
          // 添加点击事件
<('click', function(param) {
// console.log(param.data.name);
if(param.data.name == '') {
that.barArr = [10,60,40];
that.barColor = '#CA8622';
} else if(param.data.name == '') {
that.barArr = [30,40,60];
that.barColor = '#0C92EF';
} else if(param.data.name == '') {
that.barArr = [50,20,60];
that.barColor = '#C23531';
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。