ECharts可视化大屏学习笔记【6】（地图）

最后一点点扩展啦 如题所见 本章节讲的是地图啦
最后效果先看看嗷：
（其实后面那个圆是可以动的！笔记【1】写了具体实现）

一、Echarts社区介绍

社区就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方。

• 在这里可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。

二、Echarts-map使用（扩展）

参考社区的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)

实现步骤：

• 第一需要下载china.js提供中国地图的js文件
• 第二个因为里面代码比较多，我们新建一个新的js文件 myMap.js 引入
• 使用社区提供的配置即可。

需要修改：

• 去掉标题组件
• 去掉背景颜色
• 修改地图省份背景 #142957 areaColor 里面做修改
• 地图放大通过 zoom 设置为1.2即可

    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: '#142957',
          borderColor: '#0692a4'
        },
        emphasis: {
          areaColor: '#0b1c2d'
        }
      }
    },

总结：这例子是扩展案例，大家以后可以多看看社区里面的案例。

三、最后约束缩放

/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}

四、全部效果

（梅开二度，再放一次）