vue中使用 echarts3.0 或 echarts2.0 (模擬遷徙圖，折線圖)

一、echarts3.0(官網: http://echarts.baidu.com/)
   首先通過npm安裝echarts依賴，安裝的為3.0版本
     npm install echarts -s
   也可以使用淘寶鏡像
     npm install -g cnpm --registry=https://registry.npm.taobao.org
     cnpm install echarts -s
   引入的方式有兩種：
     1、main.js中全局引入
       import echarts from 'echarts'
       Vue.prototype.$echarts = echarts
       然后在組件中通過 this.$echarts.init(document.getElementById('your_div')) 來初始化
     2、只應用基本包，加快加載速度
       在需要使用echarts的組建中引入：
       let echarts = require('echarts/lib/echarts')
       然后通過  echarts.init(document.getElementById('your_div')) 來初始化
   使用的話就比較簡單，直接將官方實例封裝一個為方法，在mounted中調用即可。

二、 echarts2.0(官網: http://echarts.baidu.com/echarts2/)
  1、引入
     到官網下載echarts2.0的包echarts-all.js，放到static下面，然后在index.html中引用：
       <script type="text/javascript" src="./static/echarts-all.js"></script>
  2、使用
     直接封裝一個方法，在mounted中調用，通過 echarts.init(document.getElementById('your_div')) 來初始化

三、可能適合你的做法
 1、便於數據變更的處理方法是：
    首先在 data 中定義全局變量 
     data(){ 
        return{ 
           myChart: null, 
           option: [] 
        }
      }
     然后在 mounted 中將獲取到的dom節點賦值給myChart
       this.myChart = echarts.init(document.getElementById('myChart'))
       在 methoes 中封裝一個方法 drawLine()
       methods: {      
         drawLine (option) {      
            this.myChart.setOption({      
              //此處調用需要的圖表參數及方法      
            })      
         }      
       }
      在 watch 中監聽接口數據以及將數據格式化后傳給圖表參數，並初始化圖表
          watch: {
           yourData: {        
               deep: true,       
               handler (v, ov) {        
                 if (v.length > 0) {        
                     //格式化數據並傳給圖表參數option       
                 }         
                 this.myChart.clear();// 重繪之前清理畫布          
                 this.drawLine(this.option)        
               }        
            }
          
          }
    2、假如你使用了折線圖，需要實現一個鼠標點擊圖表調用接口，並且將數據自定義渲染的功能，可以使用如下做法：
         tooltip: {    
             trigger: 'axis',            
             triggerOn: 'click',//鼠標點擊時觸發    
             axisPointer: { // 坐標軸指示器，坐標軸觸發有效     
             type: 'shadow'// 默認為直線，可選為：'line' | 'shadow'        
         },            
         formatter: function (params, ticket, callback) {      
             var content = '';
             for (var i = 0; i < params.length; i++) {         
                 if (params[i].name) {                 
                    content += "<div class='tootipBox'><div class='tootipDate'>" + params[i].name + "</div>";           
                    break;               
                 }             
              }
              for (var i = 0, key = {}; i < params.length; i++) {            
                 key = params[i];               
                 if (typeof key.value === 'undefined' || key.value === '-'){       
                    key.value = '暫無';               
                 }                
                 content += "<div class='tootipContent' style='border-bottom: solid 1px #fff;'><i style='background-color: "         
                 + key.color + " '></i> "              
                 + key.seriesName                 
                 + " : " + key.value + "</div>";         
             }
             that.$store.dispatch('youInterfaceMethod', param).then((data, index) => {       
                 if (data && data.code == 1) {    
                   that.appDataArr = data.data         
                   if (data.data.length > 0) {          
                     for (var i = 0; i < data.data.length; i++) {       
                       content += '<div class="tooltip">' + that.item[i].str '</div>';           
                     }           
                    } else {    
                        content += '<div class="tooltip">' + 'Loading...' + '</div>';         
                    }                
                    content += '</div>';      
                    callback(ticket, content)           
                  }             
             })
              return "Loading";
            }   
        }

    3、假如你使用了模擬遷徙圖(本例子是echarts2.0版本的方法)，想把接口返回的但是在 geoCoordMap 里找不到的城市，在地圖上顯示成未知，可以使用如下做法：
          首先，在 geoCoordMap 里插入一條數據，名稱為 "未知"，坐標自定義；
          然后，data 中定義變量：
             data(){ 
               return{ 
                  total: 0,
                  SHData: [], 
                  SHSCircleData: [],   
                  myChart: null,     
                  valueArr: [],      
                  maxNum: 0,        
                  unknowArea: {},     
                  unknowCount: 0 
               }
             }
          然后在 watch 中格式化數據：
             watch: {
                 yourData: {      
                    deep: true,      
                    handler (v, ov) { 
                        this.total = 0  
                        this.SHData = [] 
                        this.SHSCircleData = []  
                        this.unknowArea = {}     
                        this.unknowCount = 0
                        if (v.length > 0) {    
                           v.forEach((item) => {   
                              this.total = this.total + item.count     
                              if (item.count === 0) return          
                              if (item.city == '未知' || !this.geoCoordMap.hasOwnProperty(item.city)) {
                                  // 若item.city '未知' 或者在對象 'geoCoordMap' 中不存在                
                                  this.unknowCount += item.count                
                                  this.unknowArea = {name: '外太空', value: this.unknowCount}
                                  return;              
                               }              
                               this.SHData = this.SHData.concat([[{name: '上海'}, {name: item.city, value: item.count}]])
                               this.SHSCircleData = this.SHSCircleData.concat([{name: item.city, value: item.count}])            
                         })           
                         this.SHData = this.SHData.concat([[{name: '上海'}, this.unknowArea]])
                         this.SHSCircleData = this.SHSCircleData.concat([this.unknowArea])
                    }         
                   this.myChart.clear();// 重繪之前清理畫布
                   this.myChart.setOption(this.option(this.SHData, this.SHSCircleData))        
                }        
              }
          } 
 
      methods封裝方法：
       
         option(SHData, SHSCircleData){  
           return {     
               //調用方法及參數    
               //特別提出一個，關於顏色的，取返回數據的總數除以數組長度然后再取整，會讓顏色一直都像放煙花   
               dataRange: {           
                  show: true,           
                  min: 0,            
                  max: parseInt(this.total/this.SHData.length),    
                  calculable: true,            
                  color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],   
                  textStyle: {              
                      color: '#fff'            
                  }          
               }
             }      
           }
      mounted調用：
      mounted () { 
         this.getOnlineUser()//數據接口調用   
         setInterval(() => {//隔30s輪詢一次接口  
            this.getOnlineUser()       
         }, 30000)      
         this.myChart = echarts.init(document.getElementById('myChart'))    
      }

THE END.