使用echarts 做图表

方法一：

1. 去官方文档直接下载自己所需要的主题组件

Apache ECharts

下载好把echarts.js文件复制粘贴去项目里面

1. 然后直接在<script></script>里面直接引用进去即可

加入引用：

import * as echarts from “../../echarts.min.js;“ 

然后在初始化实例的时候需要改一下

方法二：

1. 先在自己的电脑安装node ,以此可以来执行npm 命令

可参考教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

1. 使用npm安装Echarts

在自己的项目打开cmd窗口，输入此命令：

 npm install echarts --save 

     安装成功的结果如图所示

1. 在main.js中引用echarts，添加下面两行代码

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

开始建立图表

1、  在项目中新加一个页面echarts

2、  在echarts.vue里面给一个view 来接收图表，并给一个id

3、在methods 下写一个方法getBlog()，先获取上面的id

 

初始化echarts实例，“init”就是初始化的意思

  写获取全部类别的方法

  接着就可以指定图表的配置项和数据

  可以参考echarts官方文档：https://echarts.apache.org/zh/index.html 

  然后使用刚指定的配置项和数据显示图表。

4、 在mounted里面调用方法

扇形表也是类似这种方法

注：

formatter: '{d}%' 显示的字符串类型如图所示

效果图：