点击某一个柱子,鼠标移开后,想要该柱子保持一个选中的状态,比如高亮。试过dispactAction方法,行不通,求大佬们分享解决方案。。
配置项如下
var option = {
color: [{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#00a1e9' // 0% 处的颜色
}, {
offset: 1,
color: '#01e3ae' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}],
backgroundColor: '#04225e',
legend: {
top: 8,
right: 28,
itemWidth: 17,
itemHeight: 12,
data: ['次数'],
textStyle: {
color: '#00c0ff',
fontSize: 14,
},
borderRadius: 0
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: '{b}:{c}',
backgroundColor: '#009ffc'
},
grid: {
left: 30,
right: 30,
top: 40,
bottom: 40,
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['2017/01', '2017/02', '2017/03', '2017/04', '2017/05', '2017/06', '2017/07', '2017/08', '2017/09', '2017/10', '2017/11', '2017/12'],
axisLine: {
lineStyle: {
color: '#06358f',
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#00c0ff'
}
}
],
yAxis: [
{
type: 'value',
name: '(单位:次)',
nameTextStyle: {
color: '#00c0ff'
},
splitNumber: 5,
splitLine: {
show: true,
lineStyle: {
color: '#025ea8'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#00c0ff'
}
}
],
series: [
{
name: '次数',
type: 'bar',
barWidth: 25,
data: [40, 78, 25, 42, 68, 25, 54, 43, 48, 56, 42, 50],
itemStyle: {
normal: {
opacity: 0.5
},
emphasis: {
opacity: 1
}
}
}
]
};
myChart.setOption(option);
myChart.on('click', function (params) {
console.log(params.name);
applyChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
name: params.name
});
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
name: '2017/12'
});