使用图表插件（echarts）

使用图表插件（echarts）

安装运行依赖

npm install echarts(加上' - -save' 是开发依赖，不加是运行依赖，我们需要的是运行是依然在的，所以
安装的是运行依赖)

安装完成后可以打开官方文档，查看使用方法可以根据自己的需求，看看需要如何使用，由于我是在vue中使用的，所以需要在项目中引入echarts
使用的是按需引入

第一步：导入echarts

import * as echarts from "echarts";
import _ from "lodash";

第二步：在vue的html内容中为echarts准备一个盒子，存放echarts内容

<div id="main" style="width: 600px; height: 400px"></div>

第三步：初始化图表 基于渲染好的dom，初始化echarts

由于图表的初始化是在dom渲染完成之后，开始渲染的，所以应该在渲染页面时，进行渲染，即从mounted（）
中进行渲染

var myChart = echarts.init(document.getElementById("main"));

第四步：准备数据和配置项（可以直接将想要渲染的图标类型复制过来）

data(){
	return {
	option = {
  		legend: {},
  		tooltip: {},
  		dataset: {
    	// 提供一份数据。
    	source: [
      		['product', '2015', '2016', '2017'],
     		 ['Matcha Latte', 43.3, 85.8, 93.7],
      		['Milk Tea', 83.1, 73.4, 55.1],
      		['Cheese Cocoa', 86.4, 65.2, 82.5],
      		['Walnut Brownie', 72.4, 53.9, 39.1]
    	]
  	},

第五步：展示数据

myChart.setOption(option)

---

---

数据合并方式（lodash）

1. 导入lodash

import _ from 'lodash'

2. 准备数据和配置项（mounted）中：

const result = _.merge(res.data,this.options)

3. 展示数据

myChart.setOption(result)