Echarts 使用（二）：动态交互

Echarts 系列文章：

Echarts 使用（一）：动态参数

Echarts 使用（二）：动态交互

在写这个文章前先看下 Echarts 的最新动态。

Echarts 发布了最新的 5.1.1 版本（21年4月23日），同时官方网站也同步更新了。

新的官方网站的配色看上去更好看了，示例也方便了不少。

对于使用来说，最大的更新是导入的方式：

import * as echarts from 'echarts'

其他使用基本可以不变（如果是按需引入，要再看）。

原先的标题是：“动态高亮”

觉得不是很合适，这个应该叫“动态交互”（今天看了 echarts 官网对新版本特性说明有感）

一、几个主要 API

在大部分的场景中，我们直接使用的 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>

为了不能在动态高亮同时，也支持鼠标移入移出高亮，结合事件绑定做了处理。

三、热力图动态过滤

这个是看到有人在群里面提问，就想到了这一点。

在这里也根据这个动态交互测试下。

先看下效果动态图：

这个示例的基本配置选择的是官方给的例子。下面的代码只是添加了一些鼠标监听事件。

<template>
  <div class="dynamic-com">
    <div class="pie-box" style="700px;">
      <ZEcharts ref="heatMapChart" :options="heatMapOptions" />
    </div>
  </div>
</template>

<script>
import ZEcharts from '@/components/ZEcharts'

// 下面配置项使用的是官方示例配置
const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
  '7a', '8a', '9a', '10a', '11a',
  '12p', '1p', '2p', '3p', '4p', '5p',
  '6p', '7p', '8p', '9p', '10p', '11p']
const days = ['Saturday', 'Friday', 'Thursday',
  'Wednesday', 'Tuesday', 'Monday', 'Sunday']

let data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]

data = data.map(function(item) {
  return [item[1], item[0], item[2] || '-']
})

const HEATMAP_OPTIONS = {
  tooltip: {
    position: 'top'
  },
  grid: {
    height: '50%',
    left: 100,
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: hours,
    splitArea: {
      show: true
    }
  },
  yAxis: {
    type: 'category',
    data: days,
    splitArea: {
      show: true
    }
  },
  visualMap: {
    min: 0,
    max: 10,
    range: [0, 10],
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%'
  },
  series: [{
    name: 'Punch Card',
    type: 'heatmap',
    data: data,
    label: {
      show: true
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
}

export default {
  components: { ZEcharts },
  data() {
    return {
      pieOptions: PIE_OPTIONS,
      highlightInterval: null,
      pieChart: null,
      pieDataLength: 5,
      higIndex: 0,

      heatMapChart: null,
      heatMapOptions: HEATMAP_OPTIONS
    }
  },
  mounted() {
    // 热力图
    this.heatMapChart = this.$refs.heatMapChart.chart

    this.heatMapChart.on('mouseover', (params) => {
      this.heatMapOptions.visualMap.range = [params.data[2], params.data[2]]
    })

    this.heatMapChart.on('mouseout', (params) => {
      this.heatMapOptions.visualMap.range = [0, 10]
    })

    // 鼠标全局移出事件（移出当前图标）
    // 之所以用这个的原因
    //  1、heatmap 对 mouseout 监听不到，没有效果
    //  2、在移出图表后重置 visualMap range 是合理的
    this.heatMapChart.on('globalout', (params) => {
      this.heatMapOptions.visualMap.range = [0, 10]
    })
  }
}
</script>