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.