Echarts鼠标移入图例如何改变图例颜色

Question

Echarts鼠标移入图例如何改变图例颜色

Answer 1

以下案例，是否是楼主所要的效果？

打开这个带有 图例 (lengend)  的 echarts 代码-案例 网页：

１.     删掉 最后一块　"定时按顺序选中各个图例" 的代码, 即：

app.currentIndex = -1;

setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    app.currentIndex = (app.currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    // 显示 tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
}, 1000);

2. 　在　option　的定义中，覆盖　属性　color:

          color:col,

3..    自定义两套颜色数组，供绘制饼图交替使用：
       col=['red','green','orange','blue','grey','pink','lightgey'];
       col1=['#f7acbc','#5c7a29','#000000','#d71345','#843900','#8a5d19','#543044'];

4.    再定义一个鼠标移入图中的事件：每当鼠标进入图例之中，变换图例的颜色设置。：

taggle=0;     

myChart.on('mouseover', function (params) {    
   if (taggle==0){        
   option.color=col1;        
   taggle=1;
    } else {        
   option.color=col;        
   taggle=0;
    }   
   myChart.setOption(option);
});

具体操作是：

1. 将以下代码，复制粘贴到该网页代码(示例编辑)代码的开始，即粘贴到 option={....} 之上(之前)。
2. 按运行按钮，再用鼠标测试效果。

   col=['red','green','orange','blue','grey','pink','lightgey'];
   col1=['#f7acbc','#5c7a29','#000000','#d71345','#843900','#8a5d19','#543044'];
   taggle=0;	 
   myChart.on('mouseover', function (params) {
       if (taggle==0){
           option.color=col1;
           taggle=1;
       } else {
           option.color=col;
           taggle=0;
       }
       myChart.setOption(option);
   });
   option = {
       color:col,
   .......

    

3. 结果：

　　　　　ａ.   初始显示：

　　　　　b.    鼠标移入、再移出的结果(这时，echarts 使用第二套颜色数组重新绘制出饼图)：

4.     如果想要： “当鼠标移出时，让图例样式复原",  可分别定义鼠标 "一进、一出" 两个事件，分别使用各自的颜色数组。将插入的代码修改成如下的样子就行了：

col=['red','green','orange','blue','grey','pink','lightgey'];
col1=['#f7acbc','#5c7a29','#000000','#d71345','#843900','#8a5d19','#543044'];
myChart.on('mouseover', function (params) {
        option.color=col1;
    myChart.setOption(option);
});
myChart.on('mouseout', function (params) {
        option.color=col;
    myChart.setOption(option);
});

option={
     color:col,
     ......

5.   上述实验操作，可以在 echarts 的 其它带有图例的案例中执行， 效果是一样的。例如这个直方图的案例。

Answer 2

是Echarts鼠标移入某一图例，如何从新设置图例颜色，相当于hover样式，当鼠标移出时，图例样式恢复原状。

Answer 3

楼主的意思是否是 
Echarts鼠标移入某一图例，如何从新设置图例颜色？还是
设置 Echart实现鼠标移入移出事件？