echarts(九) 高级篇（鼠标事件监听、组件交互事件监听、代码触发 ECharts 中组件的行为[信息高亮提示]）

高级篇

监听事件

• ECharts 使用on 绑定事件，事件名称对应 DOM 事件名称，均为小写的字符串。如：

myChart.on('click', function (params) {
    // 控制台打印数据的名称
    console.log(params.name);
});

鼠标事件监听

• ECharts 支持常规的鼠标事件类型，包括 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。
• 所有的鼠标事件包含参数 params，如被点击的图形信息 params.componentType 。

const myChart = echarts.init(document.getElementById('main'));

//数据源
const source=[
    ['大前端','学习人数','就业人数'],
    ['html',  30,       50],
    ['css',   20,       40],
    ['js',    40,       80],
];
// 指定图表的配置项和数据
const option={
    tooltip:{},
    legend:{},
    dataset:{source},
    xAxis:{
        data:['html','css','js']
    },
    yAxis:{},
    series:[
        {type:'bar'},
        {type:'bar'},
    ]
};
myChart.setOption(option);

/*
* 使用on 方法绑定click点击事件
* */
myChart.on('click',function(opt){
    console.log(opt);
})

组件交互事件监听

• 在 ECharts 中基本上所有的组件交互行为都会触发相应的事件。如图例开关的行为会触发 legendselectchanged 事件：

myChart.on('legendselectchanged', function (params) {
        // 获取点击图例的选中状态
        let isSelected = params.selected[params.name];
        // 在控制台中打印
        console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
        // 打印所有图例的状态
        console.log(params.selected);
});

代码触发 ECharts 中组件的行为

• ECharts 通过调用 echarts 实例对象的dispatchAction() 方法触发组件行为。如触发某个元素的highlight 高亮事件：

myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: app.currentIndex
});

• type 触发的行为类型
  • highlight 高亮
  • showTip 显示提示
  • downplay 取消高亮
  • hideTip 取消提示
• seriesIndex 系列索引，用于寻找系列列表中的某个系列
• dataIndex 数据所有，用于寻找系列中的某个元素

使用dispatchAction 方法高亮并定时提示一个扇形信息

const myChart = echarts.init(document.getElementById('main'));
//数据源
const source=[
    ['html',  30],
    ['css',   20],
    ['js',    40],
    ['canvas',70],
];
//维度
const dimensions=['大前端','学习人数'];
// 指定图表的配置项和数据
const option = {
    title:{
        text:'前端语言学习人数'
    },
    tooltip:{},
    legend:{
        left:'left',
        orient:'vertical',
        top:40
    },
    dataset:{source,dimensions},
    series:{
        type:'pie',
        emphasis:{
            itemStyle:{
                shadowColor:'rgba(0,0,0,0.5)',
                shadowOffsetY:10,
                shadowBlur:10
            }
        }
    }
};
myChart.setOption(option);
/*使用dispatchAction 方法高亮并提示一个扇形
*   type 触发的行为类型
*       highlight 高亮
*       showTip 显示提示
*       downplay 取消高亮
*       hideTip 取消提示
*   seriesIndex 系列索引，用于寻找系列列表中的某个系列
*   dataIndex 数据所有，用于寻找系列中的某个元素
* */
myChart.dispatchAction({
    type:'highlight',
    seriesIndex:0,
    dataIndex:0
})
myChart.dispatchAction({
    type:'showTip',
    seriesIndex:0,
    dataIndex:0
})
/*myChart.dispatchAction({
    type:'downplay',
    seriesIndex:0,
    dataIndex:0
})
myChart.dispatchAction({
    type:'hideTip',
    seriesIndex:0,
    dataIndex:0
})*/
// 当前索引
let curInd=0;
/*获取系列数据的长度*/
const len=source.length;
/*建立时间监听器*/
setInterval(function(){
    myChart.dispatchAction({
        type:'downplay',
        seriesIndex:0,
        dataIndex:curInd
    });
    myChart.dispatchAction({
        type:'hideTip',
        seriesIndex:0,
        dataIndex:curInd
    });
    curInd++;
    if(curInd===len){
        curInd=0;
    }
    myChart.dispatchAction({
        type:'highlight',
        seriesIndex:0,
        dataIndex:curInd
    });
    myChart.dispatchAction({
        type:'showTip',
        seriesIndex:0,
        dataIndex:curInd
    });
},1500)