ECharts 图表渲染

一、安装引入

1.1 安装方式

（1）vue ui 可视化工具安装：进入依赖项面板 - 点击安装依赖 - 在运行依赖中搜索插件 echarts - 点击安装 echarts 。（推荐）

（2）npm 安装：npm install echarts --save（推荐）

（3）通过 jsDelivr 等 CDN 引入。（推荐）

（4）在 ECharts 的 GitHub 获取。

（5）从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。

1.2 引入项目

导入 ECharts：

在文件的 script 节点导入 ECharts：

import echarts from 'echarts'

这里会报错：”export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’

摸了下头皮发现是版本太新导致的，我的是 5.0.0 版本，需要这样来引入：

import * as echarts from 'echarts'

二、使用

2.1 页面放置图表区域

<!-- 卡片视图区域 -->
<el-card>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 Dom -->
  <div id="main" style="width: 750px;height:400px;"></div>
</el-card>

2.2 渲染图表

首先调用 echarts 包的 init 函数将上面的 div 初始化为 echarts 实例，值得注意的是：

初始化图表必须在页面的 dom 结构被渲染完毕后进行，在 mounted 生命周期钩子中初始化：

mounted() {
  // 3. 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))
}    

2.3 准备数据和配置项

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

2.4 展示数据

将 option 中的数据设置到 myChart 中，使用刚指定的配置项和数据显示图表：

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

此时网页中图表就渲染出来了！

三、合并服务器数据

3.1 调用接口

接下来需要发 ajax 请求获取基于时间统计的折线图，调用接口成功服务器会返回一个折线图数据。

但该数据不能直接交给图表进行渲染，需要先将数据先和 options 对象合并成一个新对象后交给图表展示。

// 此时页面上的元素已经被渲染完毕了
async mounted() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))

  const { data: res } = await this.$http.get('reports/type/1')
  if (res.meta.status !== 200) {
    return this.$message.error('获取折线图数据失败！')
  }
  // 展示数据
  myChart.setOption(res.data)
}

此时页面中多了一个折线图的图形：

3.2 合并 options

此时图表尚不完整，需要和官方文档提供的 options 选项做下合并。

将 options 放到 data 中：

data() {
    return {
      // 需要合并的数据
      options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    }
}

3.3 Lodash 合并对象

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库，之前使用它进行过深拷贝，这次用它合并对象。

官方文档：https://lodash.com/

导入 lodash

import _ from 'lodash'

调用 lodash 提供的 merge 函数合并对象：

// 准备数据和配置项
const result = _.merge(res.data, this.options)

// 将合并的新对象交给图表去展示
myChart.setOption(result)

完整代码：

<script>
// 1. 导入 echarts
import * as echarts from 'echarts'
import _ from 'lodash'

export default {
  data() {
    return {
      // 需要合并的数据
      options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    }
  },
  // 此时，页面上的元素，已经被渲染完毕了！
  async mounted() {
    // 3. 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))

    const { data: res } = await this.$http.get('reports/type/1')
    if (res.meta.status !== 200) {
      return this.$message.error('获取折线图数据失败！')
    }

    // 4. 准备数据和配置项
    const result = _.merge(res.data, this.options)

    // 5. 展示数据
    myChart.setOption(result)
  },
}
</script>

此时完整的图表就展示出来了！