Echart之自定义图例

前言

echart提供的图例，样式比较单调，有时候满足不了需求，比如我现在要把图例纵向显示并且改成多选框的形式，echart图例本身提供的功能就满足不了需求，这时候echat提供了事件的方法，我们可以自己写图例，然后根据ehcat暴露的方法，控制图例的展示。

dispatchAction属性

触发图表行为，例如图例开关legendToggleSelect, 数据区域缩放dataZoom，显示提示框showTip等等

代码示例

dispatchAction({
    type: 'downplay',
    // 可选，系列 index，可以是一个数组指定多个系列
    seriesIndex?: number|Array,
    // 可选，系列名称，可以是一个数组指定多个系列
    seriesName?: string|Array,
    // 可选，数据的 index
    dataIndex?: number,
    // 可选，数据的 名称
    name?: string
})

// 注意option设置中legend为false  因为自己写了图例，默认的图例就不显示了
// 点击自己写的图例的时候，执行对应的事件
myChart.dispatchAction({
    type: 'legendToggleSelect',
    // 图例名称 
    name: str  // 此处为series的data中设置的name属性
})