• 在vue中使用echarts实现飞机航线 水滴图 词云图

    vue中引入echarts

    npm install echarts

    在main.js中引用并挂载到vue上便于使用

    1. import * as echarts from 'echarts'
    2. Vue.prototype.$echarts =echarts

    飞机航线

     

     

    html

    1. <template>
    2.   <div class="com-container">
    3.     <div
    4.       class="com-chart"
    5.       ref="chart"
    6.     >div>
    7.   div>
    8. template>

    css

    1. .com-page {
    2.   width: 100%;
    3.   height: 100%;
    4.   overflow: hidden;
    5. }
    6.  
    7. .com-container {
    8.   width: 100%;
    9.   height: 100%;
    10.   overflow: hidden;
    11. }
    12.  
    13. .com-chart {
    14.   width: 100%;
    15.   height: 100%;
    16.   overflow: hidden;
    17. }
    18.  
    19. canvas {
    20.   border-radius: 20px;
    21. }
    22.  
    23. .com-container {
    24.   position: relative;
    25. }

    准备数据

     

    引入中国地图JS文件，会自动注册地图；

    1. // 中国地图JS文件
    2. require('echarts/map/js/china')

    也可以通过axios方式引入json文件，需要手动注册echarts.registerMap('china', chinaJson.data)。

    1.       const ret = await axios.get('http://localhost:8999/static/map/china.json')
    2.       this.echarts.registerMap('china', ret.data)

      地图数据  可以使用各个城市的数据 我这里没去找

    1.      
    2.       chinaGeoCoordMap: {
    3.         黑龙江: [127.9688, 45.368],
    4.         内蒙古: [110.3467, 41.4899],
    5.         吉林: [125.8154, 44.2584],
    6.         北京市: [116.4551, 40.2539],
    7.         辽宁: [123.1238, 42.1216],
    8.         河北: [114.4995, 38.1006],
    9.         天津: [117.4219, 39.4189],
    10.         山西: [112.3352, 37.9413],
    11.         陕西: [109.1162, 34.2004],
    12.         甘肃: [103.5901, 36.3043],
    13.         宁夏: [106.3586, 38.1775],
    14.         青海: [101.4038, 36.8207],
    15.         新疆: [87.9236, 43.5883],
    16.         西藏: [91.11, 29.97],
    17.         四川: [103.9526, 30.7617],
    18.         重庆: [108.384366, 30.439702],
    19.         山东: [117.1582, 36.8701],
    20.         河南: [113.4668, 34.6234],
    21.         江苏: [118.8062, 31.9208],
    22.         安徽: [117.29, 32.0581],
    23.         湖北: [114.3896, 30.6628],
    24.         浙江: [119.5313, 29.8773],
    25.         福建: [119.4543, 25.9222],
    26.         江西: [116.0046, 28.6633],
    27.         湖南: [113.0823, 28.2568],
    28.         贵州: [106.6992, 26.7682],
    29.         云南: [102.9199, 25.4663],
    30.         广东: [113.12244, 23.009505],
    31.         广西: [108.479, 23.1152],
    32.         海南: [110.3893, 19.8516],
    33.         上海: [121.4648, 31.2891]
    34.       },

       飞线数据 配置航线起点和终点数据

    1.  
    2.       HxDatas: [
    3.  
    4.         {
    5.           start: '甘肃',
    6.           end: '宁夏'
    7.         },
    8.         {
    9.           start: '青海',
    10.           end: '新疆'
    11.         },
    12.  
    13.         {
    14.           start: '西藏',
    15.           end: '四川'
    16.  
    17.         },
    18.  
    19.         {
    20.           start: '山东',
    21.           end: '河南'
    22.  
    23.         },
    24.  
    25.         {
    26.           start: '江苏',
    27.           end: '安徽'
    28.  
    29.         },
    30.  
    31.         {
    32.           start: '湖北',
    33.           end: '福建'
    34.  
    35.         },
    36.  
    37.         {
    38.           start: '江西',
    39.           end: '黑龙江'
    40.         },
    41.         {
    42.           start: '内蒙古',
    43.           end: '吉林'
    44.         },
    45.         {
    46.           start: '辽宁',
    47.           end: '河北'
    48.         },
    49.         {
    50.           start: '天津',
    51.           end: '山西'
    52.         },
    53.         {
    54.           start: '陕西',
    55.           end: '海南'
    56.         },
    57.         {
    58.           start: '上海',
    59.           end: '湖南'
    60.         },
    61.         {
    62.           start: '贵州',
    63.           end: '广西'
    64.  
    65.         }
    66.  
    67.       ]

    处理飞行数据获得起点和终点坐标起点和终点

    我这里统一设置了以北京为起点

    1.  methods: {
    2.    convertData (data) {
    3.       const res = []
    4.       const fromCoord = this.chinaGeoCoordMap[data.start]// 起点坐标
    5.       const toCoord = this.chinaGeoCoordMap[data.end]// 终点坐标
    6.       if (fromCoord && toCoord) {
    7.         res.push([
    8.       
    9.           // fromCoord,
    10.           [116.4551, 40.2539], // 北京坐标
    11.           fromCoord
    12.  
    13.           // 航班数量
    14.           // value:
    15.  
    16.         ])
    17.       }
    18.       // console.log(res)
    19.       return res
    20.     }
    21. }

    配置地图

    1. this.chartInstance = this.$echarts.init(this.$refs.charts)
    2. const initOption = {
    3.         geo: {
    4.           type: 'map',
    5.           map: 'china',
    6.           top: '5%',
    7.           bottom: '5%',
    8.           itemStyle: {
    9.             areaColor: 'rgba(3, 22, 32, 1)',
    10.             borderColor: '#b2def2'
    11.           }
    12.         }
    13. }
    14.   this.chartInstance.setOption(initOption)

    配置折线line和散点

    1. planePath: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
    2.  
    3.  this.HxDatas.forEach((item, i) => {
    4.         // console.log(this.convertData(item))
    5.         seriesArr.push(
    6.           {
    7.             type: 'lines',
    8.             zlevel: 2,
    9.             coordinateSystem: 'geo',
    10.             symbol: ['none', 'arrow'], // 线两端的标记类型，可以是一个数组分别指定两端
    11.             blendMode: 'lighter',
    12.             dimensions: ['value'],
    13.             polyline: true,
    14.             effect: { // 线特效的配置  飞机样式
    15.               show: true,
    16.               period: 8, // 特效动画的时间
    17.               trailLength: 0.1, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
    18.               // width: 1, // 尾迹线条宽度
    19.               opacity: 0.7, // 尾迹线条透明度
    20.               color: '#fff',
    21.               curveness: 0.1,
    22.               symbolSize: 13, // 特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
    23.               symbol: this.planePath
    24.  
    25.             },
    26.             // 线条样式
    27.             lineStyle: {
    28.               normal: {
    29.                 show: true,
    30.                 curveness: 0.4, // 尾迹线条曲直度
    31.                 color: '#007acc' // 飞线颜色
    32.               }
    33.             },
    34.             data: this.convertData(item)
    35.           },
    36.  
    37.             // 配置起点和终点散点样式
    38.             {
    39.             type: 'effectScatter',
    40.             data: this.convertData(item)[0],
    41.             zlevel: 2,
    42.             coordinateSystem: 'geo',
    43.             rippleEffect: {
    44.               // 涟漪特效
    45.               // period: 4, // 动画时间，值越小速度越快
    46.               brushType: 'stroke', // 波纹绘制方式 stroke, fill
    47.               scale: 10 // 波纹圆环最大限制，值越大波纹越大
    48.               // color: '#fcdd6e'
    49.             },
    50.  
    51.             itemStyle: { // 控制散点的样式
    52.               show: true,
    53.               color: function () {
    54.                 return 'rgb(' + [
    55.                   Math.round(Math.random() * 255),
    56.                   Math.round(Math.random() * 255),
    57.                   Math.round(Math.random() * 255),
    58.                   0.5].join(',') + ')'
    59.               }
    60.             },
    61.             symbol: 'circle',
    62.             symbolSize: function (val) {
    63.               return 5 // 圆环大小
    64.             }
    65.  
    66.           }
    67.  
    68.         )
    69.       })
    70.  
    71.       const dataoption = {
    72.         series: seriesArr
    73.       }
    74.  
    75.       this.chartInstance.setOption(dataoption)

    使用

    给父盒子开启相对定位

    包含组件的子盒子绝对定位

    便于控制组件在页面中呈现的位置

    父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的

    1. <template>
    2. <div class="com-page">
    3.       <div class="left">
    4.         <Map>Map>
    5.       div>
    6. div>
    7.  
    8. template>
    9.  
    10. <style>
    11.  
    12. .com-container {
    13.   position: relative;
    14.   ...
    15. }
    16. .left{
    17.     position:absolute
    18.     ...
    19. }
    20.  
    21. style>

    水滴图

     

    需要额外引入

    npm i echarts-liquidfill

    在需要的组件

    我这里用了  import * as echarts from 'echarts'  没效果 改了import * as echarts from 'echarts/core'才有数据

    1. import * as echarts from 'echarts/core'
    2. import 'echarts-liquidfill'

    配置

    1.       this.chartInstance = this.echarts.init(this.$refs.liquidchart, this.theme)
    2.       const initOption = {
    3.         series: [
    4.           {
    5.             type: 'liquidFill',
    6.             center: ['10%', '30%'],
    7.             data: [0.43], // 水球的数据
    8.             radius: '35%', // 水球的实际大小，如果不写会比容器小很多
    9.             backgroundStyle: {
    10.               color: '#031620'// 没有水球的背景颜色
    11.             },
    12.             name: '1号仓库',
    13.             label: {
    14.               normal: {
    15.                 formatter () {
    16.                   return '8000件'// 中间数据
    17.                 },
    18.                 color: '#FFFFFF ',
    19.                 insideColor: '#fff',
    20.                 textStyle: {
    21.                   fontSize: 10,
    22.                   fontWeight: 'bold',
    23.                   fontFamily: 'SourceHanSansCN-Regular'
    24.                 }
    25.               }
    26.             },
    27.             color: [
    28.               {
    29.                 type: 'linear',
    30.                 x: 0,
    31.                 y: 1,
    32.                 x2: 0,
    33.                 y2: 0,
    34.                 colorStops: [
    35.                   {
    36.                     offset: 1,
    37.                     color: ['#326872'] // 0% 处的颜色
    38.                   },
    39.                   {
    40.                     offset: 0,
    41.                     color: ['#3BE7EC'] // 100% 处的颜色
    42.                   }
    43.                 ],
    44.                 global: false // 缺省为 false
    45.               }
    46.             ],
    47.             outline: {
    48.               show: true,
    49.               radius: '80%',
    50.               borderDistance: 5,
    51.               itemStyle: {
    52.                 borderColor: '#4381DC',
    53.                 borderWidth: 2
    54.               }
    55.             }
    56.           },
    57.  
    58.         ]
    59.  
    60.       }
    61.       this.chartInstance.setOption(initOption)

    词云图

    也需要另外引入 

    import 'echarts-wordcloud'

    配置

    1.     initchart () {
    2.       this.myChart = this.echarts.init(this.$refs.wordcloud)
    3.       this.myChart.setOption({
    4.         series: [
    5.           {
    6.             type: 'wordCloud',
    7.             // 用来调整词之间的距离
    8.             gridSize: 1,
    9.             // 用来调整字的大小范围
    10.             // Text size range which the value in data will be mapped to.
    11.             // Default to have minimum 12px and maximum 60px size.
    12.             sizeRange: [14, 60],
    13.             // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
    14.             // 用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
    15.             rotationRange: [-45, 0, 45, 90],
    16.             // rotationRange: [ 0,90],
    17.             // rotationRange: [0, 0],
    18.             // 随机生成字体颜色
    19.             // maskImage: maskImage,
    20.  
    21.             textStyle: {
    22.               color: function () {
    23.                 return 'rgb(' + [
    24.                   Math.round(Math.random() * 255),
    25.                   Math.round(Math.random() * 255),
    26.                   Math.round(Math.random() * 255)
    27.                 ].join(',') + ')'
    28.               },
    29.               fontFamily: 'sans-serif',
    30.               fontWeight: 'normal'
    31.  
    32.               // emphasis: {
    33.               //   shadowBlur: 10,
    34.               //   shadowColor: '#333'
    35.               // }
    36.             },
    37.  
    38.             // 位置相关设置
    39.             // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
    40.             // Default to be put in the center and has 75% x 80% size.
    41.             left: 'center',
    42.             top: 'center',
    43.             right: null,
    44.             bottom: null,
    45.  
    46.             // 数据
    47.             data: this.wordList
    48.           }
    49.         ]
    50.       })
    51.     }

    data

    1.       wordList: [
    2.         {
    3.           name: '短袖',
    4.           value: 15000
    5.         },
    6.         {
    7.           name: '连衣裙',
    8.           value: 10081
    9.         },
    10.         {
    11.           name: '纯天然',
    12.           value: 9386
    13.         },
    14.         {
    15.           name: '植物',
    16.           value: 7500
    17.         },
    18.         {
    19.           name: '轻薄',
    20.           value: 7500
    21.         },
    22.         {
    23.           name: '洗发水',
    24.           value: 6500
    25.         },
    26.         {
    27.           name: '防晒霜',
    28.           value: 6500
    29.         },
    30.         {
    31.           name: '抗老',
    32.           value: 6000
    33.         },
    34.         {
    35.           name: '国风',
    36.           value: 4500
    37.         },
    38.         {
    39.           name: '轻复古',
    40.           value: 3800
    41.         },
    42.         {
    43.           name: '鞋柜',
    44.           value: 3000
    45.         },
    46.         {
    47.           name: '秋季',
    48.           value: 2500
    49.         },
    50.         {
    51.           name: '衬衫',
    52.           value: 2300
    53.         },
    54.         {
    55.           name: '镂空',
    56.           value: 2000
    57.         },
    58.         {
    59.           name: '月饼',
    60.           value: 1900
    61.         },
    62.         {
    63.           name: '空调',
    64.           value: 1800
    65.         },
    66.         {
    67.           name: '零食',
    68.           value: 1700
    69.         },
    70.         {
    71.           name: '咖啡',
    72.           value: 1600
    73.         },
    74.         {
    75.           name: '盛夏套装',
    76.           value: 1500
    77.         },
    78.         {
    79.           name: '情侣睡衣',
    80.           value: 1200
    81.         }
    82.       ]

    由于篇幅原因我这里没有对屏幕自适应进行介绍

  • 相关阅读:
    leetcode:860.柠檬水找零
    使用命令部署Java项目的基本步骤
    程序装载：“640K内存”真的不够用么？
    JS数组遍历方式 小小总结一下
    29.添加录入注入信息界面
    数字化营销如何推动企业营收增长？数字化营销要点有哪些？
    Java方法相关知识点
    c++ 中string、char*、char a[]
    抽象工厂模式
    C Primer Plus(6) 中文版 第1章 初识C语言 1.6 语言标准
  • 原文地址：https://blog.csdn.net/qq_60587956/article/details/126332533