【前端实践系列之四】vue项目中使用Echarts绘制热力地图-一一网

这是我参与更文挑战的第4天，活动详情查看：更文挑战 !

?概论

今日话不多说，直接开肝?。

?准备阶段

?该阶段会完成如下事项：

?准备HTML页面

?CDN引入vue、echarts

?引入geoJson、数据


<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>heatMap</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style>
      .main {
        width: 100vw;
        height: 100vh;
      }
      #region-chart {
        margin: 20px auto;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <!-- 别忘了echarts容器给定宽高 -->
      <div id="region-chart" style="width: 100%; height: 100%"></div>
    </div>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入echarts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
    <!-- 引入geoJson，实际项目里这一步可能是从后台请求的  -->
    <script src="./jingniu.js"></script>
    <!-- 引入data，实际项目里这一步可能是从后台请求的 -->
    <script src="./data.js"></script>

    <script>
      const app = new Vue({
        el: '#region-chart',
        mounted() {
        },
        methods: {},
      });
    </script>
  </body>
</html>

复制代码

?加载Echarts实例，绘制图表

···
<script>
  var app = new Vue({
    el: '#region-chart',
    mounted() {
      //生成图表
      this.initECharts();
    },
    methods: {
      initECharts() {
        const option = {
          geo: {
            map: 'jingniu',

            itemStyle: {
              areaColor: '#acacacb9',
              borderColor: '#2c2a2a',
              borderWidth: 2,
              borderType: 'dashed',
            },
            emphasis: {
              label: {
                show: false,
              },
            },
            layoutCenter: ['50%', '45%'],
            layoutSize: '70%',
          },
        };
        //挂载实例
        this.chartInstance = echarts.init(document.getElementById('region-chart'));
        //注册地图
        echarts.registerMap('jingniu', mapJSON, {});
        //加载option
        this.chartInstance.setOption(option);
      },
    },
  });
</script>
···
复制代码

此时刷新页面，已经可以看到底图了！

?配置热力图

实现热力图需要配置series-heatmap以及visualMap两个选项，缺一不可。

···
<script>
  var app = new Vue({
    el: '#region-chart',
    mounted() {
      this.initECharts();
    },
    methods: {
      initECharts() {
        const option = {
          ···
          //增加热力图配置
          series: [
            {
              name: '热力图',
              type: 'heatmap',
              coordinateSystem: 'geo',
              pointSize: 5,
              blurSize: 20,
              minOpacity: 0,
              maxOpacity: 0.9,
              data: data,
            },
          ],
          //增加visualMap配置
          visualMap: [
            {
              type: 'continuous',
              show: false,
              min: 0,
              max: 10,
              inRange: {
                color: ['blue', 'red'],
              },
            },
          ],
        };
      },
    },
  });
</script>
···
复制代码