vue.js 前端用echarts实现柱状图

前言：什么是 Echarts 插件柱状图成品展示步骤：柱状图代码：

前言：

大家都知道，一般情况下，想要使用前端设置一个柱状图需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。

今天先和大家说一下如何引入 Echarts 插件，和柱状图需要如何使用，代码如何进行编写

什么是 Echarts 插件

echars是一棵树这个图标是简单还是复杂，取决你在这棵树上绘制的枝干有多少树就是dom容器，初始化，挂载到dom容器上，把枝干在配置进来枝干可以在示例中，具体代码里有配置，在文档中查看具体效果

柱状图成品展示

步骤：

首先下载 Echarts 插件，下载需要的版本即可，我这里使用的是 4.9.0 版本（最新版的一般都有一些 BUG）

cnpm install echarts@4.9.0 --save

引入 Echarts 插件（在vue中一般都是引入到main.js组件中）

import echarts from 'echarts'

// 挂载到vue原型中就可以全局使用

Vue.prototype.$echarts = echarts

在js中使用需要进行的步骤：

1. 先设置一个显示的标签

2. 初始化echatrs实例，并挂载到dom容器中

let myChart = this.$echarts.init(document.getElementById("main"));

3. 对照着需求，来逐个编写配置项(参考文档)和接收数据

let option = {}

4. 将配置和数据添加到实例中

myChart.setOption(option);

下面代码的意思，可以跳转至 Echarts 官方网站进行查看

柱状图代码：

夸智网