ECharts簡(jiǎn)介與安裝

ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫(kù)，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視

化圖表，功能非常強(qiáng)大，目前ECharts已經(jīng)發(fā)布到ECharts 5版本。我們的項(xiàng)目也選擇Echarts來(lái)作為我們的

數(shù)據(jù)展示與分析工具。

ECharts官網(wǎng)：

https://ceshiren.apache.org/zh/index/html

ECHARTS安裝

npm安裝

npm install echarts --save

官網(wǎng)下載

http://echart.apache.org/zh/download.html

github獲取

https://github.com/apache/echarts/releases

CDN方式獲取

https://www.jsdelivr.com/package/npm/echarts ? ?

我們推薦使用npm方法直接在項(xiàng)目里安裝Echarts，方便直接使用。

Echarts使用

Echarts安裝完成之后，我們將Echarts引入我們的項(xiàng)目中，注意，因?yàn)槲覀儾皇敲總€(gè)頁(yè)面都需要用到畫(huà)

圖，都有圖表展示，所以我們沒(méi)有必要將Echarts封裝到main.js中，在需要展示圖表的頁(yè)面引入Echarts即

可。 Echarts展示需要等待頁(yè)面dom元素加載完畢，并且需要有一個(gè)dom元素進(jìn)行圖表的展示，所以

mounted階段是我們引入Echarts的最佳時(shí)間點(diǎn)。以測(cè)試平臺(tái)的報(bào)告為例，具體操作如下：

mounted() { var echarts = require('echarts'); // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例，如果main.js中已經(jīng)封裝了echarts,則不需要 此步驟 var myChart = echarts.init(document.getElementById('main')); // 繪制圖表 myChart.setOption({ title: { text: 'ECharts 入門(mén)示例' }, tooltip: {}, xAxis: { data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] }, yAxis: {}, series: [{ name: '銷(xiāo)量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); },

我們?cè)趕cript模塊的methods中繪制了圖表之后，還需要在頁(yè)面上進(jìn)行展示，因此，我們還需要在template 中新建一個(gè)div用以展示我們的圖表，圖表的大小我們可以自行設(shè)置，代碼如下：

<template> <div> <template> <v-tabs :value="3" background-color="primary"> <v-tab @click="$router.push({name:'Case'})">用例管理</v-tab> <v-tab @click="$router.push({name:'Task'})">任務(wù)管理</v-tab> <v-tab @click="$router.push({name:'Jenkins'})">Jenkins管理</v- tab> <v-tab @click="$router.push({name:'Report'})">報(bào)告管理</v-tab> </v-tabs> </template> <div id="main" style="width:500px;height:500px"></div> // 新建div，用以展示圖表 </div> </template>

通過(guò)以上步驟，圖表的繪制和展示就完成了，在終端輸入命令'npm run serve'，在瀏覽器中訪問(wèn)'http://

localhost:8080/#/report'，即可看到繪制的圖表展示在report頁(yè)面。