rightBarEchart() {
var chartDom = document.getElementById('rightBar');
var myChart = echarts.init(chartDom);
var option= myChart.getOption();
var colors = ['#00BFFF', '#FFA500', '#00FF00'];
option = {
color: colors,
// title: {
// text: '',
// subtext: ''
// },
tooltip: {
trigger: 'axis'
},
legend: {
data: ['昨日', '今日', '前日']
},
toolbox: {
show: false,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.today.timeList,
},
yAxis: {
type: 'value',
axisLabel: {
// formatter: '{value} °C'
},
},
series: [
{
name: '昨日',
type: 'line',
data: this.yesterday.valueList,
animationDelay: function (idx) {
return idx * 300 + 50;
},
// markPoint: {
// data: [
// {type: 'max', name: '最大值'},
// {type: 'min', name: '最小值'}
// ]
// },
// markLine: {
// data: [
// {type: 'average', name: '平均值'}
// ]
// }
},
{
name: '今日',
type: 'line',
data: this.today.valueList,
animationDelay: function (idx) {
return idx * 300;
},
// markPoint: {
// data: [
// {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
// ]
// },
markLine: {
symbol: ['none', 'arrow'], //['none']表示是一条横线;['arrow', 'none']表示线的左边是箭头,右边没右箭头;['none','arrow']表示线的左边没有箭头,右边有箭头
label: {
position: 'middle',
formatter: this.lowerLimit,
},
data: [{
silent: false, //鼠标悬停事件 true没有,false有
lineStyle: { //警戒线的样式 ,虚实 颜色
color: "#7CFC00",
},
yAxis: this.lowerLimit // 警戒线的标注值,可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'},type值有 max min average,分为最大,最小,平均值
}]
}
},
{
name: '前日',
type: 'line',
data: this.theDayBeforeYesterday.valueList,
markLine: {
symbol: ['none', 'arrow'], //['none']表示是一条横线;['arrow', 'none']表示线的左边是箭头,右边没右箭头;['none','arrow']表示线的左边没有箭头,右边有箭头
label: {
position: "middle", //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
formatter: this.upperLimit
},
data: [{
silent: false, //鼠标悬停事件 true没有,false有
lineStyle: { //警戒线的样式 ,虚实 颜色
// type:"dotted", //样式 ‘solid’和'dotted'
color: "#FA3934",
// width: 3 //宽度
},
yAxis: this.upperLimit // 警戒线的标注值,可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'},type值有 max min average,分为最大,最小,平均值
}]
}
},
]
};
const _this = this;
myChart.on('legendselectchanged', function(obj) {
var name=obj.name;
var option=myChart.getOption();
if(name=='今日'){
option.xAxis[0].data=_this.today.timeList;
}else if(name=='昨日'){
option.xAxis[0].data=_this.yesterday.timeList;
}else if(name=='前日'){
option.xAxis[0].data=_this.theDayBeforeYesterday.timeList;
}
myChart.setOption(option,true);
});
option && myChart.setOption(option);
}
echarts 点击legend改变x轴的值
最新推荐文章于 2023-11-15 15:28:32 发布