【】图例默认为false,点击当前图例,发请求获取当前图例的数据,并渲染数据,绑定on(legendselectchanged),点击时,重复输出params.name和selected。。。获取输出后,并不渲染
配置项如下
var legen = ['环境温度', '地温', '环境湿度', '土壤湿度']
var seriesDatas = [
[10, 42, 11, 44, 10, 20, 10, 20, 12, 11, 34, 40],
[40, 42, 11, 44, 10, 20, 10, 20, 12, 11, 34, 40],
[30, 42, 11, 44, 10, 20, 10, 20, 12, 11, 34, 40],
[20, 42, 11, 44, 10, 20, 10, 20, 12, 11, 34, 40]
]
var seriesData = []
var serData=[]
for (var i = 0; i < legen.length; i++) {
var item = {
name:legen[i],
type: 'line',
smooth: true,
data: seriesDatas[i]
}
serData.push(item)
}
seriesData=serData
var option = {
color: [
'#ff6666', '#6699FF', '#40e0d0', '#C1232B', '#B5C334',
'#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63',
'#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579',
'#F4E001', '#F0805A', '#26C0C0'
],
title: {
text: '历史记录',
textStyle: {
fontSize: 28,
color: '#333'
},
top: '2%',
left: '1%'
},
tooltip: {
trigger: 'axis' // 触发类型:坐标轴触发
},
legend: { // 图例组件
type: '',
data:legen,
icon: 'line', // 图例项的 icon
itemWidth: 24, // 图例标记的图形宽度
itemHeight: 3, // 图例标记的图形高度
right: '1%',
top: '2%',
orient: 'vertical', // 图例列表的布局朝向
height: 150,
//selected: this.selected,
textStyle: {
fontSize: 12,
color: '#333'
}
},
grid: { // 直角坐标系内绘图网格
left: '3%',
right: '18%',
bottom: '3%',
containLabel: true // grid 区域是否包含坐标轴的刻度标签
},
xAxis: {
type: 'category',
boundaryGap: ['20%', '20%'], // 两边留白
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']
},
yAxis: [{
type: 'value',
name: '',
splitNumber: 10, // 分割段数
boundaryGap: ['20%', '20%'],
axisLabel: {
formatter: '{value}'
}
}],
series:seriesData
}
// 图例选中 添加数据
myChart.on('legendselectchanged', function(params) {
var selected = params.selected
var legend = params.name
console.log(selected)
console.log(legend)
if (selected[legend] === true) {}
})
myChart.setOption(option)