Vue-Echarts的使用：在vue項目中使用echarts

時間 2020-03-04

標籤 vue echarts 使用項目简体版

原文原文鏈接

前言

剛工做半年，第一次接到繪製餅圖、柱形圖的需求，對未知的事物多少都會有恐懼。因而請教大神，大神直接甩了vue-echarts的文檔和echarts的文檔給我，說一看就會，然而……一上來仍是有點懵，有必要記錄一下。html

思路

爲何要用vue-echarts?直接用echarts很差嗎？
根據echarts的官方文檔，畫一個圖標要先新建一個容器，而後再JS中經過getElementById獲取這個容器，這是最原始的JS和html交互，不符合常用vue開發的同窗的使用習慣。因而vue-echarts把echarts獲取元素的代碼封裝了一下，變成一個組件，平均每一個圖可讓咱們少寫十行左右代碼。vue-echarts最主要的就是完成這個使命，剩下的圖表配置項咱們要自行學會看echarts的文檔。前端

實現步驟

一、瞭解原生Echarts

首先，咱們先看一下原生Echarts是如何建立容器的 --> 5 分鐘上手 ECharts
vue

二、引入vue-echarts, echarts

npm install echarts vue-echartsgit

三、在.vue文件中調用vue-echarts

<template>
    <v-chart :options="polar"/>
</template>

<style>
/**
 * 默認尺寸爲 600px×400px，若是想讓圖表響應尺寸變化，能夠像下面這樣
 * 把尺寸設爲百分比值（同時請記得爲容器設置尺寸）。
 */
.echarts {
  width: 100%;
  height: 100%;
}
</style>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'       //繪製不一樣的圖表要引入不一樣的chart和component
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    return {
      polar: {
        // 指定圖表的配置項和數據
      }
    }
  }
}
</script>

四、學習Echarts的基礎概念

接下來，咱們須要對Echarts的基礎概念有一個大概的印象 --> ECharts 基礎概念概覽github

五、模仿實例

根據Echarts官方給的實例，找到本身想作的相似的圖表，熟悉基礎概念 --> 官方實例apache

以下圖所示，側邊欄能夠選擇大類，這裏有最經常使用的餅圖、柱狀圖等，點擊效果圖能夠進入代碼頁。npm

六、自定義配置

若是按上面的步驟一步步來，到這一步，咱們內心都有個大體的譜了。接下來，咱們須要根據Echarts的配置項來自定義實現，UI設計稿 --> 配置項echarts

看到這麼多配置項，是否是又暈了？這個tooltip是顯示在哪的，這個grid又是幹嗎用的？這時，咱們再回來看一下基礎概念的圖：學習

我又能夠了。字體

七、一點一點美化

剛開始接觸Echarts，確定會有不少奇奇怪怪的問題，怎麼這個圖這麼不聽話，溢出界面了？怎麼這些數據堆在一塊兒？好難看哦。這時沒有捷徑，咱們只能慢慢摸索慢慢調試，耐心一點，很快就能夠獲得好看的圖啦~

下面列舉一個我遇到的比較難實現的設計稿：

這裏有兩個難點：

這裏的data選項。每個value對應兩種不一樣的解釋，既是威脅人數>1000人,也是特大型。
同一條數據上下兩行的背景色和字體顏色互換了。

一開始拿到這個圖，個人心裏OS：好看是好看，可是這個真的能夠實現嗎？第一次發版時我只是把數據醜醜地放在那，反正也不影響主要功能。後來有一天我沒有需求，看着Echarts的官方實例，忽然有了靈感。

這裏主要用到兩個配置：

pieOption: {
        grid: {
          left: 'center',
          top: 40,
          containLabel: true
        },
        color: ['#8676F8', '#99CDFD', '#3FE8BD', '#FA9DA6'],
        series: [
          {
            type: 'pie',
            radius: '48%',
            // radius: [20, 70],
            data: [
              { name: '威脅人數>1000人'},
              { name: '威脅人數<10人'},
              { name: '威脅人數>10人'},
              { name: '威脅人數>100人'},
            ],
            label: {
              lineHeight: 15,
              formatter: function(params) {
                var type
                var style
                switch(params.name) {
                  case '威脅人數>1000人': 
                    type='特大型';
                    style='xl';
                    break;
                  case '威脅人數>100人':
                    type = '大型';
                    style='l';
                    break;
                  case '威脅人數>10人':
                    type = '中型';
                    style='m';
                    break;
                  case '威脅人數<10人':
                    type = '小型';
                    style='s'
                    break;
                }
                return params.name + '\n' + '{' + style + '|' + type + ': ' + params.value + '處}'
              },
              rich: {
                xl: {
                  color: '#FFFFFF',
                  backgroundColor: '#8676F8',
                  padding: [2, 4],
                  borderRadius: 2
                },
                l: {
                  color: '#FFFFFF',
                  backgroundColor: '#FA9DA6',
                  padding: [2, 4],
                  borderRadius: 2
                },
                m: {
                  color: '#FFFFFF',
                  backgroundColor: '#3FE8BD',
                  padding: [2, 4],
                  borderRadius: 2
                },
                s: {
                  color: '#FFFFFF',
                  backgroundColor: '#99CDFD',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            }
          }
        ]
      },

噹噹噹~最終實現樣式