1.示例截圖

1.1vue前端框架做基礎

1.2餅圖的Demo

2.怎麼引入

2.1用npm新增相關依賴檔案

在當前前端檔案為路徑的命令列中輸入：

npm install echarts --save

等待安裝完畢

2.2在main.js檔案中引入

//這一行：
import echarts from 'echarts'
//和這一行：
Vue.prototype.$echarts = echarts

3.寫路由引導到demo單獨的.vue頁面

（可以隨意放在頁面任意位置，為了清晰我單獨開一個展示頁）

在router的index.js檔案的routes:[]中新增一個路由：

{
   path:'/echarts/pie',
   name:'testcharts_pie',
   component:echartspie
},

# Path：是url中要接受的路徑，即接受後到這個router找

# Name：就是名字，亂取

# Component：導航就導到這個元件，比如叫王鋼蛋

同樣在該檔案中Import一個叫王剛蛋的元件，導航到這個元件的地址：

import echartspie from '@/components/echarts/echartspie.vue'

完了在導航頁中新增一個連結：

<router-link to="echarts/pie"><h1>echarts_demo_bar</h1></router-link>
 

這個”to=”的內容就由去和path比對找到路由，再由router導航找到王剛蛋這個元件

4.echarts頁面框架

開闢一個<div>塊，作為echarts的地基:

<template>
  <div>
    資料視覺化學習——餅圖
    <div style="width: 40%;height: 500px;border:1px solid rgb(180,180,180)" id="echartss"></div>
  </div>
</template>

在script中寫資料視覺化主體

<script>

//先要匯入依賴的例項
import echarts from 'echarts'

//掛載前初始化echarts例項
mounted: function () {
  // 基於準備好的dom，初始化echarts例項
  let myChart = echarts.init(document.getElementById('echartss'))
  // 繪製圖表，this.echarts1_option是資料
  myChart.setOption(this.echarts1_option)
},

//在echarts_option中寫東西就行了，官方文件直接下這裡就可以自己玩了
data(){
  return{
    echarts1_option:{
//主體程式碼塊
}}}

</script>

5.餅圖demo詳解

這是一個完整的demo，可以用作基礎模板。具體解釋寫在註釋中了，不懂可以查閱官方文件，中國人寫的，很好懂

其中，series的資料結構，visualMap的對映渲染，理解起來有點麻煩，註釋沒有看懂的可以搜關鍵字。

echarts1_option:{
//需要的話下面內容copy到主體程式碼塊即可
  backgroundColor: '#45515a',
  //標題
  title: {
    text: '流量來源',
    subtext:'餅圖示例',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#ccc',
      fontStyle:'italic'//標題字型
    }
  },
  //彈窗，響應滑鼠指向，顯示具體細節
  tooltip : {
    trigger: 'item',//以具體專案觸發彈窗
    /*
    內容格式器，一共有abcd四個代號，例如在餅圖中，{a}指系列，即流量來源，{b}指資料專案，如搜尋引擎，{c}指數值，如
    value，{d}百分比。{x}本身代表了相應字元，可以和其他字元拼湊，在彈窗中顯示
    */
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  //圖例，選擇要顯示的專案
  legend:{
    orient:'vertical',
    left:'left',
    textStyle:{
      color:'#c8c8d0'
    },
    data:['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎']  //注意要和資料的name相對應
  },
  //工具箱
  toolbox:{
    show:true,//顯示工具箱
    feature:{
      dataView:{show:true}, //以文字形式顯示資料
      restore:{show:true},   //還原
      //dataZoom:{show:true}, //區域縮放
      saveAsImage:{show:true},  //儲存圖片
      //magicType:{type:['line','bar']}//動態資料切換，資料顯示可以在該規定內容中切換顯示方式，
    }
  },
  //視覺對映元件，將資料對映到視覺元素上
  visualMap: {
    show: false,
    min: 10,
    max: 650,
     dimension: 0, //選取資料的維度，如人資料：[身高，體重]，則1代表將體重進行對映，預設值為陣列的最後一位
    // seriesIndex: 4, //選取資料集合中的哪個陣列，如{一班}，{二班}，預設選取data中的所有資料集
    inRange: {
      //選定了要對映的物件，用inRange詳細寫要渲染的具體細節，[x，y]中x指最小值對應的量（亮度，飽和度等），y指最大值對應的量，其餘的按各自value線性渲染
      color:['red'],
      colorLightness: [0,1],
      colorSaturation:[0,1]
    }
  },
//資料
  series : [
    {
      name:'訪問來源',
      type:'pie',
      radius : '55%',
      center: ['50%', '50%'],
      data:[
        {value:335, name:'直接訪問'},
        {value:310, name:'郵件營銷'},
        {value:274, name:'聯盟廣告'},
        {value:235, name:'視訊廣告'},
        {value:400, name:'搜尋引擎'}
      ].sort(function (a, b) { return a.value - b.value; }),
      roseType: 'radius',//角度和半徑展現百分比，'area'只用半徑展現
      label: { //餅圖圖形的文字標籤
        normal: {  //下同，normal指在普通情況下樣式，而非高亮時樣式
          textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        }
      },
      labelLine: {  //引導線樣式
        normal: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          },
          smooth: 0.5, //0-1，越大越平滑彎曲
          length: 10,  //從塊到文字的第一段長
          length2: 20  //拐彎到文字的段長
        }
      },
      itemStyle: { //圖例樣式
        normal: {
          color: '#97413c',
          shadowBlur: 50,//陰影模糊程度
          shadowColor: 'rgba(0, 0, 0, 0.5)'//陰影顏色，一般黑
        }
      },

      animationType: 'scale', //初始動畫效果，scale是縮放，expansion是展開
      animationEasing: 'elasticOut', //初始動畫緩動效果
      animationDelay: function (idx) {  //資料更新動畫時長，idx限定了每個資料塊從無到有的速度
        return Math.random() * 200;
      }
    }
  ]
}

比較常用的模組有折線，直方，餅圖，地圖，散點，路徑，熱力等，爭取多寫一點模板以後可以照葫蘆畫瓢，還有動態匯入資料和資料處理，形參完整專案。