Node+Vue框架下Echart使用小記

 

 基於Node+Vue的項目,其中有一個數據可視化的功能模塊須要使用Echarts來作。

關於Echarts的前世此生請戳:https://echarts.baidu.com/echarts2/doc/about.html

咱們來總結一下Echarts的優點:

①更新快

②bug少

③樣式多

④功能全

⑤文檔全

⑥支持node等多種開發環境

可是Echarts在Vue中的使用並非很爽,多是由於Echarts須要綁定dom元素,而偏偏主打數據驅動的Vue框架幾乎摒棄了一切對dom元素的操縱。不過我也不是很肯定,畢竟入行時間很短並且對這兩樣東西都知之甚少。

項目要實現的效果大體爲下面兩幅圖:

其中點擊某個雷達圖會彈出包含對應對象的詳細信息的柱狀圖:

圖一中雷達圖的個數由post請求返回的數組的長度決定,在第一開始,我原本打算使用v-for來進行動態渲染,可是考慮到雷達圖的分佈狀況(並非單純地按行分佈),並且Echarts的dom綁定已經和Vue框架的數據驅動有了矛盾,繼續使用v-for來動態渲染可能會致使災難。本着別太給本身找事兒的想法,老老實實地在子組件裏排了18個span,18個已經足夠了。

首先作好準備工做,引入須要的包:

npm install echart

import echarts from "echarts"

 

第一步 構建子組件BlockChart

BlockChart由18個span組成,排列爲三行,html代碼以下:

<div class="charts">
      <div class="charts-1">
        <span id="chart0" class="chart-span">
        </span>
        <span id="chart1" class="chart-span">
        </span>
        <span id="chart2" class="chart-span">
        </span>
        <span id="chart3" class="chart-span">
        </span>
        <span id="chart4" class="chart-span">
        </span>
        <span id="chart5" class="chart-span">
        </span>
      </div>
      <div class="charts-1">
        <span id="chart6" class="chart-span">
        </span>
        <span id="chart7" class="chart-span">
        </span>
        <span id="chart8" class="chart-span">
        </span>
        <span id="chart9" class="chart-span">
        </span>
        <span id="chart10" class="chart-span">
        </span>
        <span id="chart11" class="chart-span">
        </span>
      </div>
      <div class="charts-1">
        <span id="chart12" class="chart-span">
        </span>
        <span id="chart13" class="chart-span">
        </span>
        <span id="chart14" class="chart-span">
        </span>
        <span id="chart15" class="chart-span">
        </span>
        <span id="chart16" class="chart-span">
        </span>
        <span id="chart17" class="chart-span">
        </span>
      </div>
    </div>

View Code

 

由於一個Echarts圖表必定要綁定一個dom元素,這裏爲了方便獲取,給每一個span都賦予了ID號

構造Echarts圖表的代碼以下所示:

makeRadarChart(index){ // if(this.fetching) // return var that=this if(index>=this.radar_data.length) return var standard=this.radar_data[index].standard_radar var current=this.radar_data[index].current_radar var title=this.radar_data[index].name var id='chart'+index var dom = document.getElementById(id); var myChart = echarts.init(dom); var app = {}; var option = null; option = { title: { text: title }, tooltip: {}, radar: { // shape: 'circle', name: { textStyle: { fontSize: 13, color: '#fff', borderRadius: 3, padding: [1, 3] } }, indicator: [ { name: '教育', max: 4}, { name: '社區\n衛生', max: 4}, { name: '文化\n體育', max: 4}, { name: '社區\n服務', max: 4}, { name: '社區\n管理', max: 4}, { name: '商業\n服務', max: 4} ] }, series: [{ name: '標準vs現狀', type: 'radar', // areaStyle: {normal: {}}, data : [ { value : standard, name : '標準', areaStyle: { normal: { color: 'rgba(255, 50, 50, 0.5)' } }, lineStyle: { normal: { color: 'rgba(255, 50, 50, 0.8)' } } }, { value : current, name : '現狀', areaStyle: { normal: { color: 'rgba(100, 100, 255, 0.5)' } }, lineStyle: { normal: { color: 'rgba(100, 100, 255, 0.8)' } } } ] }] } if (option && typeof option === "object") { myChart.setOption(option, true); myChart.on('click', function (params) { that.findBarData(index) }) } },

View Code

其中目標圖表須要的容器的ID由index和'chart'字符串拼接而成,這樣也能夠實現動態綁定元素的效果。

最下面的函數findBarData用來實現彈出對應的新的柱狀圖,這部份內容下期再講。

因爲精力有限,並且文章主要用於我的記錄,本文並未對項目中的不少細節作詳細的解釋,若是須要詳細解讀請在下方評論區留言!

若有錯誤之處請批評指正!