Echarts 数据可视化使用笔记

1.echarts v4 版本按需引入

1.1.安装equire插件

npm i -D babel-plugin-equire

"babel-plugin-equire": "1.1.1" 

1.2.修改babel配置

babel.config.js

module.exports = {
  'plugins': [
    'equire'
  ]
}

1.3.封装公共初始化方法

vendor/echarts/index.js

// 使用JSON格式registerTheme，js注册方式会影响equire按需引入
import theme from './theme.json'
/**
 * 按需引入Echarts模块
 * @param {Array} 需要引入的模块
 * @see {*} https://github.com/ywwhack/babel-plugin-equire#转化规则
 */
// eslint-disable-next-line
const echarts = equire([ // 正常打包
// const equireCharts = equireAsync([ // 动态引入，单独一个包
  /** @chart 图表类型 */
  'bar', // 柱状图
  // 'boxplot', // 箱形图
  // 'candlestick', // K线图
  // 'chord', // 弦图
  'custom', // 自定义系列
  // 'effectScatter', // 带有涟漪特效动画的散点（气泡）图
  // 'funnel', // 漏斗图
  // 'gauge', // 仪表盘
  // 'graph', // 关系图
  // 'heatmap', // 热力图
  'line', // 折线、面积图
  // 'lines', // 路径图
  // 'map', // 地图
  // 'parallel', // 平行坐标系的系列
  // 'pictorialBar', // 象形柱图
  'pie', // 饼图
  'echarts/lib/chart/radar', // 雷达图
  // 'sankey', // 桑基图
  'scatter', // 散点（气泡）图
  // 'themeRiver', // 主题河流
  // 'tree', // 树图
  // 'treemap',
  /** @component 组件、工具 */
  'angleAxis', // 极坐标系的角度轴
  'axis', // 直角坐标系 grid 中的 x 轴
  'axisPointer',
  // 'brush', // 区域选择组件
  // 'calendar', // 日历坐标系组件
  'dataZoom', // 区域缩放
  'dataZoomInside', // 内置型数据区域缩放组件
  'dataZoomSelect', // 框选型数据区域缩放组件
  // 'geo', // 地理坐标系组件
  'graphic', // 原生图形元素组件
  'grid', // 直角坐标系内绘图网格
  // 'gridSimple',
  'legend', // 图例组件
  'legendScroll',
  // 'markArea',
  // 'markLine',
  'markPoint',
  // 'parallel', // 平行坐标系
  // 'parallelAxis', // 平行坐标系中的坐标轴
  'polar', // 极坐标系
  'echarts/lib/component/radar', // 雷达图坐标系组件
  'radiusAxis', // 极坐标系的径向轴
  'singleAxis', // 单轴
  'timeline', // 多个 ECharts option 间进行切换
  'title', // 标题组件，包含主标题和副标题
  // 'toolbox', // 工具栏
  'tooltip' // 提示框组件
  // 'visualMap', // 视觉映射组件
  // 'visualMapContinuous', // 连续型视觉映射
  // 'visualMapPiecewise' // 分段型视觉映射
])

// will transform to below
// import echarts from 'echarts/lib/echarts';
// import 'echarts/lib/chart/bar';
// import 'echarts/lib/chart/line';

/**
 * 实例化Echarts
 * @param {Element} element DOM 容器
 * @param {Boolean} isuseTheme 是否注册主题
 * @param {Boolean} isExpose 是否暴露echarts，部分绘图需用到echarts的方法
 * @returns {Object} {echarts: echarts对象, instance: echarts的实例化对象}
 */
const initEcharts = (element, isuseTheme = true, isExpose = false) => {
  // const echarts = await equireCharts()
  if (isExpose) {
    return {
      echarts,
      instance: isuseTheme ? (echarts.registerTheme('walden', theme), echarts.init(element, 'walden')) : echarts.init(element)
    }
  } else {
    return isuseTheme ? (echarts.registerTheme('walden', theme), echarts.init(element, 'walden')) : echarts.init(element)
  }
}

export default initEcharts

vendor/echarts/theme.json 是在echarts上下载的主题json格式文件

https://echarts.apache.org/zh/download-theme.html

1.4.使用按需引入

import initEcharts from '@/vendor/echarts'

this.chartInstance = initEcharts(this.$refs.chart)
this.chartInstance = initEcharts(document.getElementById('chart'))

// 需使用echarts方法的情况，如果渐变echarts.graphic.LinearGradient
const { echarts, instance } = initEcharts(this.$refs.chart, true, true)
this.chartInstance = instance
const option = {
  series: [
    {
      name: '渐变面积图',
      type: 'line',
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(114,222,191,.5)'
        }, {
          offset: 1,
          color: 'rgba(114,222,191,.1)'
        }])
      },
      data: []
    }
  ]
}

2.echarts v5 版本按需引入

2.1.封装按需引入方法

vendor/echarts/index.js

// 引入主题文件
import theme from './theme.js'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import {
  BarChart,
  LineChart,
  PieChart
} from 'echarts/charts'
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
  CanvasRenderer
} from 'echarts/renderers'

// 注册必须的组件
echarts.use(
  [
    TitleComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent,
    BarChart, LineChart, PieChart,
    CanvasRenderer
  ]
)

/**
 * 实例化Echarts
 * @param {Element} element DOM 容器
 * @param {Boolean} isuseTheme 是否注册主题
 * @param {Boolean} isExpose 是否暴露echarts，部分绘图需用到echarts的方法
 * @returns {Object} {echarts: echarts对象, instance: echarts的实例化对象}
 */
const initEcharts = (element, isuseTheme = true, isExpose = false) => {
  if (isExpose) {
    return {
      echarts,
      instance: isuseTheme ? (echarts.registerTheme('walden', theme), echarts.init(element, 'walden')) : echarts.init(element)
    }
  } else {
    return isuseTheme ? (echarts.registerTheme('walden', theme), echarts.init(element, 'walden')) : echarts.init(element)
  }
}

export default initEcharts

vendor/echarts/theme.js

从echarts官网下载js格式的主题文件

// 部分属性(如timeline、visualMap、markPoint等)若用不到，需注释掉，否则会影响按需引入
const theme = {
  'color': [
    '#5AD8A6',
    '#5B8FF9',
    '#FF779B',
    '#7C9EDF',
    '#c4ebad',
    '#96dee8',
    '#13c2c2',
    '#0596e6',
    '#67C23A',
    '#ffa940'
  ],
  'backgroundColor': 'rgba(252,252,252,0)',
  'title': {
    'textStyle': {
      'color': '#666666'
    },
    'subtextStyle': {
      'color': '#999999'
    }
  },
  ......
}

export default theme

使用方法和v4.0的一样，这里不在赘述

3.常见问题

3.1.更新图表原来的数据没有被清空

const options = {
   series: ...
}
this.chartInstance.setOption(options, true)

3.2.多个图表联动

鼠标在一个图标的坐标轴内移动，去对应category对应的值更新到第二个图表

方法1：使用tooltip的formatter

chart1.setOption({
  tooltip: {
    formatter: params => {
      chart2.setOption({
        series: {
          id: 'line',
          type: 'gauge',
          data: [
            {
              value: params.dataIndex,
              name: ''
            }
          ]
        }
      })

      return ...
    }
  }
})

需要注意的是：ECharts 图表的所有操作都需要在主线程中执行，如果要在 tooltip 的回调函数中更新当前实例的选项，可以使用 settimeout 延迟一些时间

chart.setOption({
  tooltip: {
    formatter: params => {
      // 将操作放入 setTimeout 的回调函数中执行
      setTimeout(function () {
        chart.setOption({
          ...
        })
      })

      return ...
    }
  }
})

方法2：使用updateAxisPointer事件

let dataIndex = -1
chart1.on('updateAxisPointer', event => {
  const updateDataIndex = event.dataIndex
  if (updateDataIndex != null && updateDataIndex !== dataIndex) {
    dataIndex = updateDataIndex
    
    chart2.setOption({
      series: {
        id: 'line',
        type: 'gauge',
        data: [
          {
            value: dataIndex,
            name: ''
          }
        ]
      }
    })
  }
})

3.3.官网不稳定

Echarts自从成为Apache 软件基金会一员后，官网地址变成echarts.apache.org/zh/index.html，有时候因为网络问题导致无法访问：

可以访问国内的镜像网站，这里还有很多示例

首页 - ECharts图表集,ECharts demo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com

3.4.tooltip内容太多

图表系列数据太多，导致tooltip气泡框高度太大，超出可视区域

方法：设置气泡框的最大高度，超出后滚动展示，且鼠标可以移入气泡框

tooltip: {
  trigger: 'axis',
  // appendToBody: true,
  confine: true,
  enterable: true,
  formatter: params => {
    const name = params[0].name
    const result = [
      `<p style="font-size: 14px;color: #666;">${name}</p>`,
      '<div style="max-height: 190px;padding-bottom: 2px;padding-right:2px;overflow-y: auto;">'
    ]

    params.forEach(item => {
      const serieItem = `<div style="margin-top:10px;line-height:1;">
        ${item.marker}
        <span style="font-size:14px;color:#666;">${item.seriesName}</span>
        <span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900;">${
          item.data[1]
        }</span>
        <div style="clear:both"></div>
      </div>`
      result.push(serieItem)
    })

    return result.join('')
  }
}