基于圖表的處理，我們一般往往都是利用對應第三方的圖表組件，然后在這個基礎上為它的數據模型提供符合要求的圖表數據即可，VUE+Element 前端應用也不例外，我們這里使用了基于vue-echarts組件模塊來處理各種圖表vue-echarts是對echarts圖表組件的封裝。

首先使用npm 安裝vue-echarts組件。

git地址：https://github.com/ecomfe/vue-echarts

NPM安裝命令

npm install echarts vue-echarts

然后在對應模塊頁面里面引入對應的組件對象，如下代碼所示。

<script>import ECharts from ’vue-echarts’ // 主圖表對象import ’echarts/lib/chart/line’ // 曲線圖表import ’echarts/lib/chart/bar’ // 柱狀圖import ’echarts/lib/chart/pie’ // 餅狀圖import ’echarts/lib/component/tooltip’ // 提示信息

接著在Vue組件里面對象中加入對象即可。

export default { components: { ’v-chart’: ECharts },

如果是全局注冊使用，那么可以在main.js里面進行加載

// 注冊組件后即可使用Vue.component(’v-chart’, VueECharts)

我們來看看圖表展示的效果圖

柱狀圖效果

餅狀圖

曲線圖

其他類型，極坐標和散點圖形

或者曲線和柱狀圖組合的圖形

更多的案例可以參考官網的展示介紹：https://echarts.apache.org/examples/zh/index.html

對于我們需要的各種常規的柱狀圖、餅狀圖、折線圖（曲線圖）等，我下來介紹幾個案例代碼，其他的一般我們根據官方案例提供的data數據模型，構造對應的數據即可生成，就不再一一贅述。

另外，我們也可以參考Vue-echarts封裝的處理demo:https://github.com/ecomfe/vue-echarts/tree/master/src/demo

對于柱狀圖，效果如下

在Vue模塊頁面的Template 里面，我們定義界面代碼如下即可。

<v-chart ref='simplebar' :options='simplebar' autoresize/>

然后在data里面為它準備好數據即可，如下代碼所示。

data() { return { simplebar: {title: { text: ’柱形圖Demo’ },tooltip: {},xAxis: { data: [’襯衫’, ’羊毛衫’, ’雪紡衫’, ’褲子’, ’高跟鞋’, ’襪子’]},yAxis: {},series: [{ name: ’銷量’, type: ’bar’, data: [5, 20, 36, 10, 10, 20]}] } } }

當然我們也可以把這些構造對應數據的邏輯放在單獨的JS文件里面，然后導入即可。

例如對于餅圖，它的界面效果如下所示。

它的vue視圖下，Template里面的代碼如下所示。

<v-chart ref='pie' :options='pie' autoresize />

一般對于圖表的數據，由于處理代碼可能不少，建議是獨立放在一個JS文件里面，然后我們通過import導入即可使用。

然后在data里面引入對應的對象即可，如下所示。

<script>import ECharts from ’vue-echarts’ // 主圖表對象import ’echarts/lib/chart/line’ // 曲線圖表import ’echarts/lib/chart/bar’ // 柱狀圖import ’echarts/lib/chart/pie’ // 餅狀圖import ’echarts/lib/component/tooltip’ // 提示信息// 導入報表數據import getBar from ’./chartdata/bar’import pie from ’./chartdata/pie’import scatter from ’./chartdata/scatter’import lineChart from ’./chartdata/lineChart’import incomePay from ’./chartdata/incomePay’export default { components: { ’v-chart’: ECharts }, return { pie, scatter,, lineChart, incomePay, simplebar: {title: { text: ’柱形圖Demo’ },tooltip: {},xAxis: { data: [’襯衫’, ’羊毛衫’, ’雪紡衫’, ’褲子’, ’高跟鞋’, ’襪子’]},yAxis: {},series: [{ name: ’銷量’, type: ’bar’, data: [5, 20, 36, 10, 10, 20]}] } } },

其中pie.js里面放置的是處理餅圖數據的邏輯，如下代碼所示。

export default { title: { text: ’餅圖程序調用高亮示例’, x: ’center’ }, tooltip: { trigger: ’item’, formatter: ’{a} <br/>{b} : {c} (dphr7xbzdxf%)’ }, legend: { orient: ’vertical’, left: ’left’, data: [’直接訪問’, ’郵件營銷’, ’聯盟廣告’, ’視頻廣告’, ’搜索引擎’] }, series: [ { name: ’訪問來源’, type: ’pie’, radius: ’55%’, center: [’50%’, ’60%’], data: [{ value: 335, name: ’直接訪問’ },{ value: 310, name: ’郵件營銷’ },{ value: 234, name: ’聯盟廣告’ },{ value: 135, name: ’視頻廣告’ },{ value: 1548, name: ’搜索引擎’ } ], itemStyle: {emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: ’rgba(0, 0, 0, 0.5)’} } } ]}

在界面處理的時候，值得注意的時候，有時候Vue頁面處理正常，但是圖表就是沒有出來，可能是因為高度或者寬度為0的原因，需要對對應的樣式進行處理設置，以便能夠正常顯示出來。

如下是我 對圖表的設置的樣式處理，使得圖表在一個卡片的位置能夠顯示正常。

<style scoped> .echarts { width: 100%; height: 400px;} .el-row { margin-bottom: 20px; } .el-col { border-radius: 4px; margin-bottom: 20px; }</style>

最后幾個界面組合一起的效果如下所示。

以上就是基于vue-echarts處理各種圖表展示，其中常規的引入組件很容易的，主要就是需要根據對應的圖表案例，參考數據組成的規則，從而根據我們實際情況構建對應的數據，賦值給對應的模型變量即可。

以上就是Vue Element前端應用開發之echarts圖表的詳細內容，更多關于Vue Element之echarts圖表的資料請關注好吧啦網其它相關文章！