关于Echarts构建地图的笔记，大屏适配方案

Echarts

构建中国/省份地图

按需引入echarts

import * as echarts from 'echarts'

初始化图表 init(节点)

let myChart=echarts.init(节点)

注册地图 registerMap()

echarts.registerMap()

• 参数一：

  String–注册的地图名称

• 参数二：

  geojson数据–地图的点位信息数据（需要展示哪个地区的地图就传对应的数据）

配置地图.geo

通过配置项中的geo属性进行配置

geo常用配置

geo:{//地理坐标组件，在其中可进行地图绘制
                type:'map',//绘制类型 String
                map:'chinaMap',//地图来源 String
                roam:true,//是否开启平移、缩放等功能 boolean
                // zoom:8,//地图缩放级别（数字越大，地图越局部）number
                // center:[104.2,30.5],//地图的中心点  coordinate
                label:{//设置地图的文字信息 
                    show:false,//是否展示boolean
                    color:'blue',//文字颜色string/16进制
                    fontSize:9//字体大小number
                },
                itemStyle:{
                    areaColor:'pink'//地图颜色string/16进制
                }
         }

将相关配置设置给图表setOption()

myChart.setOption(option)

// 初始化图表
        let myChart=echarts.init(document.getElementById('myecharts'))
        // 注册当前使用的地图名，registerMap()方法，参数1:String--注册的地图名称；参数二：geojson数据--地图的点位信息数据
        echarts.registerMap('chinaMap',mapData)
        // 相关配置项
        let option={
            geo:{//地理坐标组件，在其中可进行地图绘制
                type:'map',//绘制类型
                map:'chinaMap',//地图来源
                roam:true,//是否开启平移、缩放等功能
                // zoom:8,//地图缩放级别（数字越大，地图越局部）
                // center:[104.2,30.5],//地图的中心点
                label:{//设置地图的文字信息 
                    show:false,//是否展示
                    color:'blue',//文字颜色
                    fontSize:9//字体大小
                },
                itemStyle:{
                    areaColor:'pink'//地图颜色
                }
            }
        }
        // 配置图表
        myChart.setOption(option)

tooltip配置

// 配置提示框
        tooltip:{
            // 触发类型
            trigger:'item',//itrm图形触发，放到图形上触发；axis坐标轴触发
            // 坐标轴指示器
            axisPointer:{
                type:'cross'//line显示一个实线，shadow显示阴影效果，cross十字准星
            },
            // showContent:false,//是否显示悬浮层
            // 悬浮层的样式（css样式
            backgroundColor:"pink",
            // 自定义提示框信息:该函数的返回值就是提示框的内容
            formatter(params){
                for(let i=0;i<params.length;i++){
                    return "名字："+params[i].name//或者直接写html内容
                }
            }
        },

地图标记

思路：在当前的echarts地图图表上绘制一个散点图即可

let option = {
        // 地图相关配置
        geo: {//地理坐标组件，在其中可进行地图绘制
            type: 'map',//绘制类型
            map: 'chinaMap',//地图来源
            roam: true,//是否开启平移、缩放等功能
            // zoom:8,//地图缩放级别（数字越大，地图越局部）
            // center:[104.2,30.5],//地图的中心点
            label: {//设置地图的文字信息 
                show: false,//是否展示
                color: 'blue',//文字颜色
                fontSize: 9//字体大小
            },
            itemStyle: {
                areaColor: 'pink'//地图颜色
            }
        },
        // 散点图
        series: [
            {
                type: "scatter",//图表类型:散点图
                data: [
                    {
                        name: "北京市",//数据项的名字
                        value: [116.42, 39.92],//坐标
                    }
                ],
                coordinateSystem:'geo',//通过地图显示散点位置
                symbolSize:30//点的大小
            },
            {
                type: "effectScatter",//图表类型:涟漪效果的散点图
                data: [
                    {
                        name: "西安市",//数据项的名字
                        value: [108.95, 34.26],//坐标
                    }
                ],
                coordinateSystem:'geo',//通过地图显示位置
                symbolSize:30//点的大小
            }
        ]
    }

图表大小自适应

通过resize事件监听浏览器视口大小变化，在变化时执行图表的resize()方法即可

    // 配置图表
    myChart.setOption(option)
    
    // 监听页面大小，实现图表自适应
    window.addEventListener("resize",()=>{
        myChart.resize()
    })

请求数据模拟json-server

用于模拟服务端接口数据，根据json数据构建 ==>json-server就是个存储json数据的server

全局下载npm i -g json-server

新建文件夹与文件用来模拟数据

• eg:

  mock

  ​ |__data.json

      {
      "one":[
          {...},...,{...}
      ],
      "two":[
          {...},...,{...}
      ]
  }
  

• http://localhost:8888是整个data.json数据包

  • http://localhost:8888/one、http://localhost:8888/two是data.json中的子对象

启动json-server json-server --watch json文件名 --port 端口号

• 注意：

  • 启动的位置确保在新建的文件夹下

• 启动成功如图：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-749AQUxz-1685674552407)(C:\Users\yangyun\AppData\Roaming\Typora\typora-user-images\image-20230418121931349.png)]

通过axios请求模拟的数据

• 请求的url路径就是[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uhkn7e4o-1685674552409)(C:\Users\yangyun\AppData\Roaming\Typora\typora-user-images\image-20230418122259464.png)]

echarts的加载动画效果

在获取数据之前showLoading()，在请求结束之后结束等待动画hideLoading()

myChart.showLoading()
发送请求,请求成功之后
myChart.hideLoading()

动画效果

在option配置项中进行相关配置

• animation：Boolean —是否开启动画效果
• animationThreshold：Number —是否开启动画阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画
• animationDuration：Number —初始动画的时长（毫秒）
• animationEasing：String —‘linear’匀速，动画执行的速率
• animationDelay：Number —延时执行（毫秒）

echart事件

用on来监听

myChart.on('click', (e)=>{
    //点击任意图表时执行
})

myChart.on('click', 'series.line', (e)=>{
    //点击折线图图表时执行
})

myChart.on('click',{name:'数码', seriesIndex:1 }, (e)=>{
    //点击系列序号为1，名为数码的图表时执行
})

• 参数一：事件名称

• 参数二：监听的系列series，当不传时表示都监听

• 参数三：回调函数

echarts主题设置

内置主题

在init（）方法的第二个参数传入“light”/“dark”

自定义主题

1. 获取内置文件

   官网—>下载—>主题下载—>定制主题—>设置—>下载主题—>将json文件复制粘贴到本地或者下载也可

   将主题的js文件以对象形式暴露出去

2. 在页面引入主题文件的内容

   import { theme } from "主题js文件的路径"
   //初始化地图时传入
   myChart = echarts.init (节点, 主题theme )
   

响应式布局

下载lib-flexble

npm i --save lib-flexnle

配置插件

1. 在main.js中引入插件

import "lib-flexble/flexble.js''

2. 在node-moules下的flexible.js文件中调整分辨率

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xbYKPeuN-1685674552410)(C:\Users\yangyun\AppData\Roaming\Typora\typora-user-images\image-20230418144227704.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BqZNLOlu-1685674552410)(C:\Users\yangyun\AppData\Roaming\Typora\typora-user-images\image-20230418144527075.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQUm5b5I-1685674552411)(C:\Users\yangyun\AppData\Roaming\Typora\typora-user-images\image-20230418144429499.png)]

将代码做如上修改

3. vscode下载cssrem插件，将插件的对应值设置为80

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9EcP5kLD-1685674552412)(C:\Users\yangyun\AppData\Roaming\Typora\typora-user-images\image-20230418145032216.png)]

port "lib-flexble/flexble.js’’

2. 在node-moules下的flexible.js文件中调整分辨率

[外链图片转存中...(img-xbYKPeuN-1685674552410)]

[外链图片转存中...(img-BqZNLOlu-1685674552410)]

[外链图片转存中...(img-xQUm5b5I-1685674552411)]

将代码做如上修改

3. vscode下载cssrem插件，将插件的对应值设置为80

[外链图片转存中...(img-9EcP5kLD-1685674552412)]