自定义系列的颜色及鼠标的事件处理

option = {

    title: {

        text: 'ECharts 入门示例'

    },

    tooltip: {},

    legend: {

        data:['销量']

    },

    xAxis: {

        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

    },

    yAxis: {},

    series: [{

        name: '销量',

        type: 'bar',

        itemStyle: {

            //设置当前系列的颜色

            normal: {

                color:'blue'

            }

        },

        data: [51, 20, 36, 10, 15, 20]

    },{

        name: '销量2',

        type: 'bar',

        itemStyle: {

            //设置当前系列的颜色

            normal: {

                color:'green'

            }

        },

        data: [25, 12, 16, 8, 23, 28]

    }]

};

 

 

鼠标事件的处理

ECharts 支持常规的鼠标事件类型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。

// 基于准备好的dom，初始化ECharts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option ={
    xAxis:{
        data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},
    yAxis:{},
    series:[{
        name:'销量',
        type:'bar',
        data:[5,20,36,10,10,20]}]};// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click',function(params){
    window.open('https://www.baidu.com/s?wd='+ encodeURIComponent(params.name));});

所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象，如下格式：

{// 当前点击的图形元素所属的组件名称，// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,// 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,// 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,// 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,// 数据名，类目名
    name: string,// 数据在传入的 data 数组中的 index
    dataIndex: number,// 传入的原始数据项
    data:Object,// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，// dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。// 其他大部分图表中只有一种 data，dataType 无意义。
    dataType: string,// 传入的数据值
    value: number|Array// 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}

如何区分鼠标点击到了哪里：

myChart.on('click',function(params){if(params.componentType ==='markPoint'){// 点击到了 markPoint 上if(params.seriesIndex ===5){// 点击到了 index 为 5 的 series 的 markPoint 上。}}elseif(params.componentType ==='series'){if(params.seriesType ==='graph'){if(params.dataType ==='edge'){// 点击到了 graph 的 edge（边）上。}else{// 点击到了 graph 的 node（节点）上。}}}});

你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等等，如下示例代码：

myChart.on('click',function(parmas){
    $.get('detail?q='+ params.name,function(detail){
        myChart.setOption({
            series:[{
                name:'pie',// 通过饼图表现单个柱子中的数据分布
                data:[detail.data]}]});});});

组件交互的行为事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 events 文档中有列出。

下面是监听一个图例开关的示例：

// 图例开关的行为只会触发 legendselectchanged 事件
myChart.on('legendselectchanged',function(params){// 获取点击图例的选中状态var isSelected = params.selected[params.name];// 在控制台中打印
    console.log((isSelected ?'选中了':'取消选中了')+'图例'+ params.name);// 打印所有图例的状态
    console.log(params.selected);});