bootstrap table中文文档_Echarts.js使用文档梳理—引入及使用

前言：当前项目中有大量的数据需要使用ECharts.js来做展示，所以花了很多时间去翻找文档，结果最后能解决问题的答案基本都是在各位大佬和前辈们的文章中查到的，原因就是ECharts的官方API对于初次使用的初学者来讲，很难直接找到对应的配置和使用方法，所以这里做一下简单的整理。

ECharts.js的引入

• 本地文件引入

可以把ECharts下载到本地然后拖拽到项目中使用script标签引入。

ECharts 下载

开发环境代码下载

开发环境代码就是多了对报错的提示和警告。

• CDN引入

所有CDN网站都能够拿到ECharts的CDN链接。

echarts - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

• webpack引入

对于webpack搭建的项目比如Vue等就直接使用命令行安装。

npm install echarts --save

接着就是各个项目的全局引入或按需引入，因为我写过的Vue项目最多，这里就还拿Vue举例子。

全局引入：在plugins目录中的main.js或者default.js（你的配置js）中引入ECharts。

import echarts from 'echarts'

Vue.prototype.$echarts = echarts 

按需引入：在需要用到ECharts的vue页面引入需要使用到的模块或组件。

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

官方模块表

ECharts.js的使用

• html项目中使用

你需要一个容器，来使用它：

*一定要记得给容器一个高度！

<div id="myecharts"></div>

接着你需要在js中init它：

var myecharts = echarts.init(document.getElementById("myecharts"))

这时ECharts就引入并可以使用了，接下来就是使用setOption方法开始配置你想要的ECharts图表了。

• wabpack项目中使用

同理使用vue时我们需要有一个同样的容器，然后我们需要写一个init的方法。

methods: {
    initECharts(){
        // 基于准备好的，初始化echarts实例
        let myecharts= this.$echarts.init(document.getElementById('myecharts'))
        // 绘制图表
        myecharts.setOption({

             ：
             ：

        });
    }
  }

方法有了，我们就要根据需求来执行方法来创建实例了。一般我们会在mounted周期中执行方法来创建实例，但遇到单页面应用路由跳转频繁时，有时需要每次进入页面都要初始化重新渲染一遍，那么这个时候我们可以把方法写在activated周期里。

mounted() {
    this.initECharts();
 }
或者
activated() {
    this.initECharts();
 }

最后

写到这里ECharts算是可以正常的使用和配置了。其中的坑不是很多，无非就是一个很小的细节，记得给容器一个高度，不然会傻乎乎的找半天，还纳闷为什么页面不渲染图表呢……