快捷導(dǎo)航

Vue Element前端應(yīng)用開(kāi)發(fā)之echarts圖表

更新時(shí)間：2021年05月13日 09:06:34 作者：伍華聰

在我們做應(yīng)用系統(tǒng)的時(shí)候，往往都會(huì)涉及圖表的展示，綜合的圖表展示能夠給客戶(hù)帶來(lái)視覺(jué)的享受和數(shù)據(jù)直觀體驗(yàn)，同時(shí)也是增強(qiáng)客戶(hù)認(rèn)同感的舉措之一

概述

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

1、圖表組件的安裝使用

首先使用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' // 曲線圖表
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)看看圖表展示的效果圖

柱狀圖效果

餅狀圖

曲線圖

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

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

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

2、各種圖表的展示處理

對(duì)于我們需要的各種常規(guī)的柱狀圖、餅狀圖、折線圖（曲線圖）等，我下來(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' // 曲線圖表
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/> : {c} (vvxyksv9kd%)'
  },
  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)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: