ECharts Map Example

最新推荐文章于 2024-07-20 23:54:17 发布

zyb53

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量75

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/zhouyibin53/article/details/131723140

版权

给出一个最简单的ECharts Map例子，大家根据这份例子，结合echarts图表集的地图进行在线调试就可以达到自己想要的效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts Map Example</title>
    <!-- 引入 ECharts 的库文件 -->
    <script src="https://cdn.staticfile.org/echarts/5.4.0/echarts.min.js"></script>
    <script src="https://www.isqqw.com/dep/echarts/map/js/china.js"></script>
</head>
<body>
    <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 900px; height: 600px;">
    </div>
    <script type="text/javascript">
        // 3. 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
       var points = [
  // 点坐标
  { value: [110.81, 33.40], itemStyle: { color: '#c1bb1f' }, name: 'base'},
  { value: [110.55, 33.01], itemStyle: { color: '#3eef1d' }, name: 'rover'},
]

option = {
  backgroundColor: 'transparent', // 设置背景色透明
  // 地图阴影配置
  geo: {
    map: 'china',
    // 这里必须定义，不然后面series里面不生效
    silent: true, // 不响应鼠标时间
    show: true,
    roam: false, // 地图缩放和平移
    itemStyle: {
      borderColor: '#0FA3F0',
      borderWidth: 1,
      areaColor: '#00F1FF',
      shadowColor: 'rgba(1,34,73,0.48)',
    },
  },
  series: [
    // 地图配置
    {
      type: 'map',
      map: 'china',
      zoom: 1,
      roam: false, // 地图缩放和平移
      itemStyle: {
        borderColor: '#404a59', // 省分界线颜色  阴影效果的
        borderWidth: 0.5,
        areaColor: '#323c48',
        opacity: 1
      },
      // 去除选中状态
      select: {
        disabled: true
      },
      emphasis: { // 聚焦后颜色
        disabled: false, // 开启高亮
        label: {
          align: 'center',
          color: '#04CFF5'
        },
        itemStyle: {
          color: '#ffffff',
          areaColor: '#0a8bd8'// 阴影效果 鼠标移动上去的颜色
        }
      },
      z: 2
    },
    // 点
    {
      name: 'companyPoint',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      showEffectOn: 'render',
      // zlevel: 2, // zlevel用于 Canvas 分层 相同的绘制在同一个canvas上
      rippleEffect: {
        number: 5, // 波纹数量
        period: 4, // 动画周期 数值越大，波动越慢
        scale: 3.5, // 动画中波纹的最大缩放比例
        brushType: 'stroke' // 波纹的绘制方式 stroke fill
      },
      symbol: 'circle',
      symbolSize: 16,
      data: points,
      z: 4
    },
  ]
};


    // 5. 使用指定的配置项和数据显示图表
    myChart.setOption(option)
</script>
</body>
</html>

已经简化到最低配置了。