ECharts的使用

什么是ECharts？

ECharts是百度团队开发的一个可以个性定制的数据可视化的图标库。数据可视化是指将数据以图形的形式进行显示。比如

    
        
        
        
    
    
        
分别将男女的个数用图形显示
        
200个男性
        
250 个女性
    

作用：将数据可视化，让数据更加直观。

使用

---

1、引入ECharts

  //引用AMD

 //也可以下载ECharts到本地引入

2、创建一个存放ECharts的图形容器（比如div）

3、初始化一个ECharts的实例

js

var demo = ECharts.init(document.querySelectior('div'))  //将ECharts的图表放到div容器中显示。

4、图表的数据和配置项

var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };

5、进行显示图表

demo.setOption(option);  //将数据在图表中进行显示

6、完整的demo

更详细看官网ECharts

vue使用ECharts

---

安装
1、通过npm安装命令
$ npm install echarts --save-dev
成功就会显示 + [email protected]（数字是版本号）

2、全局配置echarts

main.js文件配置

import ECharts from "vue-echarts/components/ECharts"  //全局引入echarts

import 'echarts/lib/chart/bar' //引入bar工具
import 'echarts/lib/components/toopic' //引入提示工具

Vue.component('echart' , ECharts);//全局引用echarts模板

3、如果使用了vue-cli创建项目更改build/webpack.base.conf.js文件部分内容

{
        test: /\.js$/,
        loader: 'babel-loader',
-       include: [resolve('src'), resolve('test')]
+       include: [
+         resolve('src'),
+         resolve('test'),
+         resolve('node_modules/vue-echarts'),
+         resolve('node_modules/resize-detector')
+       ]
      }

4、单文件组件配置

在vue的项目中配置了上面所说的设置就可以在vue项目中显示echarts了，但是当插入到echarts中的饼图时，你的项目会报错说请预先设置pie，怎样解决这个问题呢？
在原先配置好的main.js中引入echarts

import echarts from 'echarts' //添加
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

更详情vue-echarts-npm