Echarts 系列文章：
在写这个文章前先看下 Echarts 的最新动态。
Echarts 发布了最新的 5.1.1 版本（21年4月23日），同时官方网站也同步更新了。
新的官方网站的配色看上去更好看了，示例也方便了不少。
对于使用来说，最大的更新是导入的方式：
import * as echarts from ‘echarts‘
其他使用基本可以不变（如果是按需引入，要再看）。
在大部分的场景中，我们直接使用的 API 比较少，用的比较多的就是 init、setOption。
在实现高亮前需要先了解几个 Echarts 的 API。
1、init
这个是最基础的，每次使用的时候初始化的函数。
echarts.init(dom: HTMLElement, theme?: string | object, opts?: { renderer?: RendererType; devicePixelRatio?: number; width?: number; height?: number; locale?: string | LocaleOption; })
第一个是必传的，后面的两个参数看自己情况而定。
2、setOption
这个 API 的功能是重置图标的参数，每次更改数据的时候都需要调用这个 API 重置数据。
参数就是我们一般写的配置对象：options。
3、resize
在窗口变化、或者想手动更改图标的大小时可以调用以自适应。
基本使用是：直接调用
chart.resize()
这样是自动使用当前的变化。也可以传参使用指定的值。
chart.resize(opts?: { width?: number|string, height?: number|string, silent?: boolean, animation?: { duration?: number easing?: string } })
4、dispatchAction
这个就是我们今天要说的主角了。
触发一些图表的行为（凡是页面上的交互行为都是通过这个实现）。
所以“自动”就是通过这个 API 去调用指定效果行为的 API。
chart.dispatchAction({ type: ‘type‘, xxx: xxxx // 根据不同的行为传参 })
对于不同的 Action 参数的话，官网有专门的部分介绍。
5、on
这个是对图标实例绑定一些事件处理函数（这个就是 js 里面的事件监听）。
例如常见的鼠标事件（这个不用多说），图标一些组件事件等。
这一部分官网也要专门的部分介绍。
下面我们就看一个饼图动态高亮的实例。
效果如下：
下面是 基于 Vue 组件的代码示例。
<template>
<div class="dynamic-com">
<div class="pie-box">
<ZEcharts ref="pieChart" :options="pieOptions" />
</div>
</div>
</template>
<script>
import ZEcharts from ‘@/components/ZEcharts‘
const PIE_OPTIONS = {
grid: {
left: 10,
top: 10,
right: 10,
bottom: 10,
containLabel: true
},
series: [
{
type: ‘pie‘,
name: ‘动态高亮‘,
radius: [‘50%‘, ‘85%‘],
label: { show: false, position: ‘center‘ },
labelLine: { show: false },
emphasis: {
scaleSize: 20,
label: { show: true, fontSize: 20 }
},
data: [
{ value: ‘20‘, name: ‘设备1‘ },
{ value: ‘30‘, name: ‘设备2‘ },
{ value: ‘40‘, name: ‘设备3‘ },
{ value: ‘50‘, name: ‘设备4‘ },
{ value: ‘35‘, name: ‘设备5‘ }
]
}
]
}
export default {
components: { ZEcharts },
data() {
return {
pieOptions: PIE_OPTIONS,
highlightInterval: null,
pieChart: null,
pieDataLength: 5,
higIndex: 0
}
},
mounted() {
this.pieChart = this.$refs.pieChart.chart
this.intervalHandler()
// 绑定 mouseover 事件
this.pieChart.on(‘mouseover‘, (params) => {
clearInterval(this.highlightInterval)
// 清除高亮（每次高亮前必须重复该操作，否则会叠加）
this.pieChart.dispatchAction({
type: ‘downplay‘,
seriesIndex: 0
})
this.pieChart.dispatchAction({
type: ‘highlight‘,
seriesIndex: 0,
dataIndex: params.dataIndex
})
// 鼠标移出后从该处继续高亮
this.higIndex = params.dataIndex
})
// 绑定 mouseout 事件
this.pieChart.on(‘mouseout‘, (params) => {
this.intervalHandler()
})
},
beforeDestroy() {
this.highlightInterval && clearInterval(this.highlightInterval)
},
methods: {
intervalHandler() {
this.pieChart.dispatchAction({
type: ‘downplay‘,
seriesIndex: 0
})
this.pieChart.dispatchAction({
type: ‘highlight‘,
seriesIndex: 0,
dataIndex: this.higIndex
})
this.highlightInterval = setInterval(() => {
this.pieChart.dispatchAction({
type: ‘downplay‘,
seriesIndex: 0
})
this.pieDataLength === this.higIndex + 1 ? (this.higIndex = 0) : (this.higIndex++)
this.pieChart.dispatchAction({
type: ‘highlight‘,
seriesIndex: 0,
dataIndex: this.higIndex
})
}, 2000)
}
}
}
</script>
为了不能在动态高亮同时，也支持鼠标移入移出高亮，结合事件绑定做了处理。
原文：https://www.cnblogs.com/zhurong/p/14776761.html