Highcharts 点击多选框取消，添加数据上绑定最大，最小值和图例上绑定提示框数据
// 自定义图例
<div class="left">
<el-checkbox-group v-model="checkList" @change="changCheck">
<el-checkbox v-for="item in legendData" :label="item.index" :key="item.index" @change="handleCheck($event,item.index, item.name)">{{item.name}}<span class="legendNum" :style="{color: item.color}">{{item.legendNum}}</span></el-checkbox>
</el-checkbox-group>
</div>
import Highcharts from 'highcharts';
import annotations from 'highcharts/modules/annotations'; // 主要引入annotations
当鼠标移在图上移动图例上也显示当前值
Highcharts 图例提示框代码
tooltip: {
useHTML: true,
backgroundColor: '#fff',
borderWidth: 0,
valueDecimals: 2,
shared: true, // 提示框显示所有数据
formatter: function () {
// 图例右侧数据
this.points.map((item) => {
that.$set(that.legendData[i],'legendNum',item.y) // 主要这段
})
return tooltip(this.points);
}
},
// 点击按钮取消、添加最大，最小值 绑定id
chartSetMaxMinCheck(type) {
console.log(type)
if(type) {
this.chartData.map(item => {
item.addAnnotation( {
id: 'max',
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 1609257600000, // 我的图表x轴是时间，1609257600000是时间戳
y: 0
},
text: 'min value'
}]})
})
} else {
this.chartData.map(item => {
item.removeAnnotation('max');
})
}
},
