如何设置图表最后一个数据的itemStyle样式显示,点击不同数据点时图上白色的圆点可切换
配置项如下
option = {
grid: {
left: '0%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true,
data: ['15', '16', '17', '18', '19', '20', '21', '22','23', '24', '25', '27', '今天'],
axisTick: {
show: false
},
},
yAxis: {
type: 'value',
nameLocation: 'start',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
baseline: 'bottom'
}
}
},
series: [{
name: '邮件营销',
type: 'line',
lineStyle: {
normal: {
color: 'transparent'
}
},
itemStyle: {
normal: {
areaStyle: {
color: (function() {
return {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(255,255,255,1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(255,255,255,.3)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
};
})()
},
borderWidth: 20,
opacity: 1,
borderColor: 'transparent',
color:'red'
},
emphasis: {
color: '#fff',
borderWidth: 13,
opacity: 1,
borderColor: (function() {
return {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(255,255,255,1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(255,255,255,.3)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
};
})()
}
},
data: [67, 68, 69, 78, 70, 77, 89, 88, 78, 90, 67, 90, {value:87,
symbol:'pin',
symbolSize:20}]
}],
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgb(248,93,75)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgb(253,134,52)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
};
myChart.on('click', function (params) {
// alert(params.name);
for (var i = 0; i < option.series[0].data.length; i++) {
if ((typeof option.series[0].data[i]) !== 'number') {
option.series[0].data[i] = option.series[0].data[i].value;
}
if (params.name == option.xAxis.data[i]) {
// console.log(typeof option.series[0].data[i]);
if ((typeof option.series[0].data[i]) == 'number') {
option.series[0].data[i] = {
value: params.value,
symbol: 'pin',
symbolSize: 20
};
}
}
}
myChart.clear();
myChart.setOption(option);
});