在項目中需要對數據進行可視化處理, 然后echarts非常強大, 在vue中引用echarts分析圖表數據
1.首先需要vue-cli搭建，安裝echarts依賴
npm install charts -S
或者使用淘寶鏡像：
安裝cnpm:? npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm安裝echarts
cnpm install echarts -S
2.在main.js引入echarts
3.創(chuàng)建echarts.vue的頁面， 在頁面上使用echarts
<template>
<div> <h3>可視化圖表</h3> <div id="myChart" :style="{width: '300px', height: '300px'}"></div> </div>
</template>
<script>
export default {
name: 'echart',
data ()
{ return { msg: 'Welcome to Your Vue.js App' } },
mounted(){ this.drawLine(); },
methods: { drawLine(){
// 基于準備好的dom，
初始化echarts實例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 繪制圖表 myChart.setOption({ title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] },
yAxis: {},
series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } } }
</script>
<style scoped></style>
4.頁面上顯示：
按需引入
由于全局引入會將所有的echarts圖表打包，導致體積過大
在Echarts.vue文件中
// 引入基本模板letecharts=require('echarts/lib/echarts')// 引入柱狀圖組件require('echarts/lib/chart/bar')// 引入提示框和title組件require('echarts/lib/component/tooltip')require('echarts/lib/component/title')
使用 require 而不是 import
基于前面的疑問洼哎，加上實際運用到項目中遇到的一些問題，我思考使用組件的形式。
以組件的形式用echarts
從上邊可以看出减途，你每次在使用echarts的時候，都必須要重復的引入曹洽，這樣很不方便
vue作為一個組件化開發(fā)的框架鳍置，我們可以使用組件的方式進行集成。每次我們引入組件送淆，進行使用税产，這樣就方便的多。
下面是一個我自己對echarts進行的一個簡單的vue組件的集成偷崩。
在echarts中
子組件：
props部分是我接收到的參數辟拷，父組件獲取數據分發(fā)，data是父組件分發(fā)給echarts的數據源阐斜。
父組件：
如果在大型的項目衫冻，而且圖表又非常的多，那么vuex少不了谒出。如果把數據集中存儲到了vuex中隅俘，echarts組件再從vuex中獲取數據，我們也能隨時保存獲取的結果笤喳，對這些數據可以添加收藏也可以加入緩存中考赛，下次再請求可以先從緩存調用
