This is the fourth day of my participation in Gwen Challenge.

Introduction to 👽

Today’s words do not say, directly open liver 🤪.

👽 Preparation stage

👻 This phase accomplishes the following:

🐣 Prepare the HTML page

🐣CDN introduces VUE and Echarts

🐣 introduce geoJson, data


<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">
      <! Don't forget echarts container given width and height -->
      <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/[email protected]/dist/echarts.min.js"></script>
    <! -- Introducing geoJson, this step in a real project might be requested from the background -->
    <script src="./jingniu.js"></script>
    <! Import data, this step may be requested from the background in the actual project.
    <script src="./data.js"></script>

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

Copy the code

👻 load the Echarts instance and draw the diagram

...<script>
  var app = new Vue({
    el: '#region-chart'.mounted() {
      // Generate a chart
      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%',}};// Mount the instance
        this.chartInstance = echarts.init(document.getElementById('region-chart'));
        // Register the map
        echarts.registerMap('jingniu', mapJSON, {});
        / / load option
        this.chartInstance.setOption(option); ,}}});</script>...Copy the code

Now refresh the page, you can see the base image!

👻 Configure the heat map

To realize heatmap, you need to configure two options: series-heatmap and visualMap.

...<script>
  var app = new Vue({
    el: '#region-chart'.mounted() {
      this.initECharts();
    },
    methods: {
      initECharts() {
        constOption = {...// Add a heat map configuration
          series: [{name: 'thermal map'.type: 'heatmap'.coordinateSystem: 'geo'.pointSize: 5.blurSize: 20.minOpacity: 0.maxOpacity: 0.9.data: data,
            },
          ],
          // Add visualMap configuration
          visualMap: [{type: 'continuous'.show: false.min: 0.max: 10.inRange: {
                color: ['blue'.'red'],},},],}; ,}}});</script>...Copy the code

The effect is shown as follows:

👻 style optimization

The realization of the function is introduced here, the adjustment of the style is to teach everyone to explore it, after all, it is better to teach people to fish than to teach people to fish 😦.

Tips: Please refer to the echarts website