vue+echarts实现热力图

迈不过友情╰ 2021-07-25 12:33 2206阅读 0赞

# 例1：  #

<template>
      <div id="myChart" style="width:1500px;height:700px"></div>
    </template>
    
    <script>
    import xinjiang from "echarts/map/js/province/xinjiang";//必须要导入
    export default {
      data() {
        return {};
      },
      components: {},
      created() {},
      mounted() {
        this.init();
      },
      computed: {},
      methods: {
        init() {
          var geoCoordMap = {
            乌鲁木齐: [87.68, 43.77],
            克拉玛依: [84.77, 45.59],
            石河子: [85.94, 44.27],
            吐鲁番: [89.19, 42.91],
            齐齐哈尔: [123.97, 47.33],
            托克逊: [88.63, 42.77],
            鄯善: [90.25, 42.82],
            哈密: [93.44, 42.78],
            伊吾: [94.65, 43.28],
            巴里坤: [93, 43.6],
            库尔勒: [86.06, 41.68],
            和静: [86.35, 42.31],
            和硕: [86.84, 42.23],
            博湖: [86.53, 41.95],
            尉梨: [86.24, 41.36],
            轮台: [84.25, 41.77],
            焉耆: [86.55, 42.05],
            和田: [79.94, 37.12],
            民丰: [82.63, 37.07],
            策勒: [80.78, 37.04],
            于田: [81.63, 36.86],
            洛浦: [80.17, 37.12],
            皮山: [78.29, 37.06],
            墨玉: [79.74, 37.31],
            阿克苏: [80.29, 41.15],
            温宿: [80.24, 41.29],
            拜城: [81.84, 41.82],
            库车: [82.97, 41.68],
            新和: [82.63, 41.55],
            沙雅: [82.9, 41.25],
            阿瓦提: [80.34, 40.64],
            柯平: [79.06, 40.55],
            乌什: [79.25, 41.22],
            咯什: [75.94, 39.52],
            巴楚: [78.59, 39.78],
            枷师: [76.78, 39.46],
            乐普湖: [76.67, 39.23],
            麦盖提: [77.62, 38.95],
            莎车: [77.25, 38.45],
            泽普: [77.26, 38.2],
            叶城: [77.42, 37.89],
            疏勒: [76.05, 39.41],
            英吉沙: [76.17, 38.91],
            疏附: [75.83, 39.42],
            塔什库尔干: [75.22, 75.22],
            阿图什: [76.12, 39.73],
            阿合奇: [78.42, 41.91],
            阿克陶: [75.94, 39.14],
            乌恰: [75.18, 39.7],
            昌吉: [87.31, 44.05],
            阜康: [87.94, 44.14],
            奇台: [89.52, 44.02],
            吉木萨尔: [89.14, 44],
            米泉: [87.68, 43.97],
            玛纳斯: [86.22, 44.28],
            呼图壁: [86.92, 44.18],
            木垒: [90.34, 43.8],
            博乐: [82.1, 44.93],
            精河: [82.92, 44.67],
            温泉: [81.08, 44.95],
            伊宁: [81.33, 43.91],
            尼勒克: [82.53, 43.82],
            新源: [83.27, 43.41],
            巩留: [82.23, 43.35],
            奎屯: [84.89, 44.45],
            特克斯: [81.81, 43.23],
            昭苏: [81.08, 43.15],
            霍城: [80.87, 44.07],
            察布察尔: [81.12, 43.82],
            塔城: [82.96, 46.74],
            额敏: [83.62, 46.52],
            乌苏: [84.62, 44.45],
            托里: [83.59, 45.92],
            裕民: [82.94, 46.21],
            沙湾: [85.56, 44.29],
            和布克赛尔: [85.13, 46.78],
            阿勒泰: [88.14, 47.86],
            青河: [90.37, 46.71],
            富蕴: [89.44, 47.05],
            福海: [87.51, 47.15],
            吉木乃: [85.84, 47.42],
            布尔津: [86.92, 47.7],
            哈巴河: [86.41, 48.05]
          };
    
          var convertData = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name];
              if (geoCoord) {
                res.push(geoCoord.concat(data[i].value));
              }
            }
            return res;
          };
    
          var loadData = convertData([
            { name: "乌鲁木齐", value: 32112 },
            { name: "克拉玛依", value: 44412 },
            { name: "石河子", value: 25123 },
            { name: "吐鲁番", value: 45612 },
            { name: "齐齐哈尔", value: 12512 },
            { name: "托克逊", value: 12512 },
            { name: "鄯善", value: 25121 },
            { name: "哈密", value: 54425 },
            { name: "伊吾", value: 54126 },
            { name: "巴里坤", value: 5226 },
            { name: "库尔勒", value: 56247 },
            { name: "和静", value: 67227 },
            { name: "和硕", value: 35427 },
            { name: "博湖", value: 78327 },
            { name: "尉梨", value: 87628 },
            { name: "轮台", value: 87629 },
            { name: "焉耆", value: 67830 },
            { name: "和田", value: 98730 },
            { name: "民丰", value: 112331 },
            { name: "策勒", value: 113331 },
            { name: "于田", value: 132331 },
            { name: "洛浦", value: 123231 },
            { name: "皮山", value: 154132 },
            { name: "墨玉", value: 56632 },
            { name: "阿克苏", value: 23232 },
            { name: "温宿", value: 12333 },
            { name: "拜城", value: 22333 },
            { name: "库车", value: 32333 },
            { name: "新和", value: 43434 },
            { name: "沙雅", value: 54534 },
            { name: "阿瓦提", value: 64535 },
            { name: "柯平", value: 65435 },
            { name: "乌什", value: 567236 },
            { name: "咯什", value: 567336 },
            { name: "巴楚", value: 67836 },
            { name: "枷师", value: 789436 },
            { name: "乐普湖", value: 898236 },
            { name: "麦盖提", value: 678437 },
            { name: "莎车", value: 56737 },
            { name: "泽普", value: 123337 },
            { name: "叶城", value: 12337 },
            { name: "英吉沙", value: 23437 },
            { name: "疏附", value: 34538 },
            { name: "阿图什", value: 34568 },
            { name: "阿合奇", value: 12138 },
            { name: "阿克陶", value: 32138 },
            { name: "玛纳斯", value: 54139 },
            { name: "哈巴河", value: 56139 },
            { name: "布尔津", value: 67139 },
            { name: "吉木乃", value: 78139 },
            { name: "福海", value: 65440 },
            { name: "富蕴", value: 32340 },
            { name: "青河", value: 44341 },
            { name: "阿勒泰", value: 54341 },
            { name: "和布克赛尔", value: 23442 },
            { name: "裕民", value: 12343 },
            { name: "沙湾", value: 22343 }
          ]);
    
          var option = {
            backgroundColor: "#404a59",
            xAxis: {
              show: false
            },
            yAxis: {
              show: false
            },
            visualMap: {
              type: "piecewise",
              min: 20000,
              max: 100000,
              calculable: true,
              realtime: false,
              splitNumber: 5,
              inRange: {
                color: ["#005a88", "#04a4f6", "#00943e", "#fdf40f", "#cf2d14"]
              },
              right: "10%",
              bottom: "5%",
              orient: "vertical1",
              inverse: true, //是否反转 visualMap 组件
              textStyle: {
                color: "#fff"
              }
            },
            geo: {
              // 这个是重点配置区
              map: "新疆", // 表示中国地图
              roam: true,
              itemStyle: {
                normal: {
                  areaColor: "#081832",
                  borderColor: "#425F91"
                },
                emphasis: {
                  areaColor: "#2a333d",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              },
              silent: true
            },
            series: [
              {
                name: "",
                type: "heatmap",
                data: loadData,
                coordinateSystem: "geo",
                progressive: 1000,
                animation: false
              }
            ]
          };
    
          var lineChart = this.$echarts.init(document.getElementById("myChart"));
          lineChart.setOption(option);
        }
      }
    };
    </script>
    
    <style scoped lang="scss">
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

# 例2： #

![20191211165341708.png][]

heatmap.vue

<template>
      <div id="myChart" style="width:1500px;height:700px"></div>
    </template>
     
    <script>
    import cityData from "@/assets/data/cityData.json";
    import testData from "@/assets/data/heat/testData.json";
    import sichuan from "echarts/map/js/province/sichuan";
    
    export default {
      data() {
        return {
          geoCoordMap: {},
          exportData: {}
        };
      },
      components: {},
      created() {
        this.geoCoordMap = cityData;
      },
      mounted() {
        this.init();
      },
      computed: {},
      methods: {
        convertData(data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = this.geoCoordMap[data[i].name];
            // console.log("geoCoord", geoCoord);
            if (geoCoord) {
              res.push(geoCoord.concat(data[i].value));
            }
          }
          // console.log("res", res);
          return res;
        },
        init() {
          var loadData = this.convertData(testData);
          var option = {
            backgroundColor: "#404a59",
            xAxis: {
              show: false
            },
            yAxis: {
              show: false
            },
            visualMap: {
              type: "piecewise",
              min: 0,
              max: 70,
              calculable: true,
              realtime: false,
              splitNumber: 10,
              inRange: {
                color: ["#005a88", "#04a4f6", "#00943e", "#fdf40f", "#cf2d14"]
              },
              right: "10%",
              bottom: "5%",
              orient: "vertical1",
              inverse: true, //是否反转 visualMap 组件
              textStyle: {
                color: "#fff"
              }
            },
            geo: {
              // 这个是重点配置区
              map: "四川", // 表示中国地图
              roam: true,
              itemStyle: {
                normal: {
                  areaColor: "#081832",
                  borderColor: "#425F91"
                },
                emphasis: {
                  areaColor: "#2a333d",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              },
              silent: true
            },
            series: [
              {
                name: "",
                type: "heatmap",
                data: loadData,
                coordinateSystem: "geo",
                progressive: 1000,
                animation: false
              }
            ]
          };
          var lineChart = this.$echarts.init(document.getElementById("myChart"));
          lineChart.setOption(option);
        }
      }
    };
    </script>
     
    <style scoped lang="scss">
    </style>

cityData.json

{
        "锦江区": [104.080989, 30.657689],
        "青羊区": [104.055731, 30.667648],
        "金牛区": [104.043487, 30.692058],
        "武侯区": [104.05167, 30.630862],
        "成华区": [104.103077, 30.660275],
        "龙泉驿区": [104.269181, 30.56065],
        "青白江区": [104.25494, 30.883438],
        "新都区": [104.16022, 30.824223],
        "温江区": [103.836776, 30.697996],
        "双流区": [103.922706, 30.573243],
        "金堂县": [104.415604, 30.858417],
        "郫都区": [103.887842, 30.808752],
        "大邑县": [103.522397, 30.586602],
        "蒲江县": [103.511541, 30.194359],
        "新津县": [103.812449, 30.414284],
        "简阳市": [104.550339, 30.390666],
        "都江堰市": [103.627898, 30.99114],
        "彭州市": [103.941173, 30.985161],
        "邛崃市": [103.46143, 30.413271],
        "崇州市": [103.671049, 30.631478]
    
    }

testData.json

[{
            "name": "锦江区",
            "value": 2.34
        },
        {
            "name": "青羊区",
            "value": 2.24
        },
        {
            "name": "金牛区",
            "value": 5.01
        },
        {
            "name": "武侯区",
            "value": 3.45
        },
        {
            "name": "成华区",
            "value": 5.94
        },
        {
            "name": "龙泉驿区",
            "value": 19.48
        },
        {
            "name": "青白江区",
            "value": 19.14
        },
        {
            "name": "新都区",
            "value": 32.79
        },
        {
            "name": "温江区",
            "value": 11.5
        },
        {
            "name": "金堂县",
            "value": 41.71
        },
        {
            "name": "双流区",
            "value": 48.21
        },
        {
            "name": "郫都区",
            "value": 22.96
        },
        {
            "name": "大邑县",
            "value": 25.52
        },
        {
            "name": "蒲江县",
            "value": 13.01
        },
        {
            "name": "新津县",
            "value": 15.01
        },
        {
            "name": "都江堰市",
            "value": 26.81
        },
        {
            "name": "彭州市",
            "value": 40.97
        },
        {
            "name": "邛崃市",
            "value": 32.29
        },
        {
            "name": "崇州市",
            "value": 35.69
        },
        {
            "name": "简阳市",
            "value": 65.13
        }
    ]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/645d5fb455ca4435844b18a52cd51d9e.png
[20191211165341708.png]: /images/20210725/962d92997d5b4e9582cc2995f62ea499.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/a24b1bac2aff40c3a5379e3dfb55095a.png