vue项目中echarts流向图迁徙图实现

Posted 2023-04-08

参考技术A 1.在额echarts官网找到合适的option配置文件，在vue项目中新建文件夹，然后通过import引进来，

2.如果通过npm安装的echarts可以直接从moudule中引入地图json文件如下图

3，引入相关文件后就开始创建地图实例

效果如下：

进阶：如果想更改配置项可以通过模块的方式导出来进行修改

配置文件，通过一个函数返回option配置想，其他变量通过传参的方式修改，如有更好得方法或不懂得地方欢迎留言。

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.