基于圖表的處理，我們一般往往都是利用對(duì)應(yīng)第三方的圖表組件，然后在這個(gè)基礎(chǔ)上為它的數(shù)據(jù)模型提供符合要求的圖表數(shù)據(jù)即可，VUE+Element 前端應(yīng)用也不例外，我們這里使用了基于vue-echarts組件模塊來(lái)處理各種圖表vue-echarts是對(duì)echarts圖表組件的封裝。

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

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

NPM安裝命令

npm install echarts vue-echarts

然后在對(duì)應(yīng)模塊頁(yè)面里面引入對(duì)應(yīng)的組件對(duì)象，如下代碼所示。

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

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

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

如果是全局注冊(cè)使用，那么可以在main.js里面進(jìn)行加載

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

我們來(lái)看看圖表展示的效果圖

柱狀圖效果

餅狀圖

曲線(xiàn)圖

其他類(lèi)型，極坐標(biāo)和散點(diǎn)圖形

或者曲線(xiàn)和柱狀圖組合的圖形

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

對(duì)于我們需要的各種常規(guī)的柱狀圖、餅狀圖、折線(xiàn)圖（曲線(xiàn)圖）等，我下來(lái)介紹幾個(gè)案例代碼，其他的一般我們根據(jù)官方案例提供的data數(shù)據(jù)模型，構(gòu)造對(duì)應(yīng)的數(shù)據(jù)即可生成，就不再一一贅述。

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

對(duì)于柱狀圖，效果如下

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

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

然后在data里面為它準(zhǔn)備好數(shù)據(jù)即可，如下代碼所示。

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

當(dāng)然我們也可以把這些構(gòu)造對(duì)應(yīng)數(shù)據(jù)的邏輯放在單獨(dú)的JS文件里面，然后導(dǎo)入即可。

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

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

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

一般對(duì)于圖表的數(shù)據(jù)，由于處理代碼可能不少，建議是獨(dú)立放在一個(gè)JS文件里面，然后我們通過(guò)import導(dǎo)入即可使用。

然后在data里面引入對(duì)應(yīng)的對(duì)象即可，如下所示。

<script>import ECharts from ’vue-echarts’ // 主圖表對(duì)象import ’echarts/lib/chart/line’ // 曲線(xiàn)圖表import ’echarts/lib/chart/bar’ // 柱狀圖import ’echarts/lib/chart/pie’ // 餅狀圖import ’echarts/lib/component/tooltip’ // 提示信息// 導(dǎo)入報(bào)表數(shù)據(jù)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: ’銷(xiāo)量’, type: ’bar’, data: [5, 20, 36, 10, 10, 20]}] } } },

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

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

在界面處理的時(shí)候，值得注意的時(shí)候，有時(shí)候Vue頁(yè)面處理正常，但是圖表就是沒(méi)有出來(lái)，可能是因?yàn)楦叨然蛘邔挾葹?的原因，需要對(duì)對(duì)應(yīng)的樣式進(jìn)行處理設(shè)置，以便能夠正常顯示出來(lái)。

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

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

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

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

以上就是Vue Element前端應(yīng)用開(kāi)發(fā)之echarts圖表的詳細(xì)內(nèi)容，更多關(guān)于Vue Element之echarts圖表的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！