聊聊在Vue中实现数据可视化之echarts图表

随着大数据的逼近，数据可视化基本成为前端标配了，今天聊聊怎样在Vue中实现数据可视化以及地图。

关于在项目中进行数据可视化有几个小经验，小的用echarts，大的用d3.js（还有个NBI一站式大数据可视化分析平台也不错）

今天我们用echarts实现，先上效果图：

1.如何在Vue项目中插入图表

首先在项目中安装echarts

npm install echarts --save

然后我们可以在src目录下建立一个plugins文件夹来存放我们即将编写的Echart.js

举个例子：上一段Echarts.js中的代码：（这段代码可以直接使用，虚线之间的部分是咱们需要修改的，也就是想实现哪种图，可以直接在echarts官网上找到配置，我写的其中的一种）

import echarts from 'echarts'
/**
 * 创建echarts图标
 */
const install = function (Vue) {
    Object.defineProperties(Vue.prototype, {
        $charts: {
            get() {
                return {
                    //上边是通用结构，下边是咱们想添加什么类型的图就以方法的形式添加就好

                    //---------------------------------------------------
                    barAnimationDelay(id) {
                        this.chart = echarts.init(document.getElementById(id));
                        this.chart.clear();

                        var xAxisData = [];
                        var data1 = [];
                        var data2 = [];
                        for (var i = 0; i < 100; i++) {
                            xAxisData.push('类目' + i);
                            data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
                            data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
                        }

                        var option = {
                            title: {
                                text: '柱状图动画延迟'
                            },
                            legend: {
                                data: ['bar', 'bar2'],
                                align: 'left'
                            },
                            toolbox: {
                                // y: 'bottom',
                                feature: {
                                    magicType: {
                                        type: ['stack', 'tiled']
                                    },
                                    dataView: {},
                                    saveAsImage: {
                                        pixelRatio: 2
                                    }
                                }
                            },
                            tooltip: {},
                            xAxis: {
                                data: xAxisData,
                                silent: false,
                                splitLine: {
                                    show: false
                                }
                            },
                            yAxis: {},
                            series: [{
                                name: 'bar',
                                type: 'bar',
                                data: data1,
                                animationDelay: function (idx) {
                                    return idx * 10;
                                }
                            }, {
                                name: 'bar2',
                                type: 'bar',
                                data: data2,
                                animationDelay: function (idx) {
                                    return idx * 10 + 100;
                                }
                            }],
                            animationEasing: 'elasticOut',
                            animationDelayUpdate: function (idx) {
                                return idx * 5;
                            }
                        };
                        this.chart.setOption(option);
                    },

                    //-----------------------------------------------------

                }
            }
        }
    })
}
export default install

好，主体配置完，还需要几个关联配置：

1.需要在main.js中引入并且使用echarts

import echarts from "./plugins/Echarts"
Vue.use(echarts)

2.需要在component文件夹中建立一个dataView.vue文件夹来加载（随意命名）

<template>
  <div>
    <div id="barAnimationDelay"></div>
  </div>
</template>

<script>
export default {
  name: "DataView",
  mounted() {
    this.$charts.barAnimationDelay("barAnimationDelay");
  }
};
</script>

<style scoped>
#barAnimationDelay {
  width: 500px;
  height: 500px;
}
</style>

3.需要把dataView.vue传到入口App.vue上：（App.vue代码）

<template>
  <div>
   <DataView />
  </div>
</template>
<script>
import DataView from './components/dataView'
export default {
  name:'App',
  components:{
    DataView
  }
}
</script>

然后启动项目就可以再网页上正常显示了，讲真的，Markdown编辑器我传不上去本地图片很难受0.0，有不同意见欢迎指正交流。。。