用v-charts做热力图，用示例上的代码显示的地图移动很卡顿，这是为什么，配置都一样

[weiving]

Summary 简述

Expect 期望结果

Reproduce 重现示例

[xiguaxigua]

提供一下重现的示例吧。

[weiving]

    <ve-heatmap :data="heatMapData" :settings="heatMapSettings" height="500px"></ve-heatmap>

 this.heatMapSettings = {
        position: "china",
        type: "map",
        geo: {
          label: {
            normal: {
              show: true,
              color: "#fff"
            },
            emphasis: {
              show: true,
              color: "#fff"
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#54b0fb",
              borderWidth: 2,
              borderColor: "#C5ECFF",
              borderType: "solid"
            },
            emphasis: {
              show: false,
              label: {
                show: false
              },
              areaColor: "#54b0fb"
            }
          },
          roam: true, //平移、缩放,
          zoom: 1.2,
          scaleLimit: {
            min: 0.5
            // max: 1.5,
          }
        }
      };

heatMapData: {
          columns: ["lng", "lat", "人数"],
          rows: [
            {lng: 115.892151, lat: 28.676493, 人数: 1000},
            {lng: 117.000923, lat: 36.675807, 人数: 400},
            {lng: 113.665412, lat: 34.757975, 人数: 800},
            {lng: 114.298572, lat: 30.584355, 人数: 200},
            {lng: 112.982279, lat: 28.19409, 人数: 100},
            {lng: 113.280637, lat: 23.125178, 人数: 800},
            {lng: 110.33119, lat: 20.031971, 人数: 800},
            {lng: 104.065735, lat: 30.659462, 人数: 700},
            {lng: 108.948024, lat: 34.263161, 人数: 1000},
            {lng: 103.823557, lat: 36.058039, 人数: 500},
            {lng: 107.823557, lat: 36.058039, 人数: 900},
            {lng: 106.823557, lat: 36.058039, 人数: 500},
            {lng: 105.823557, lat: 36.058039, 人数: 1200},
            {lng: 104.823557, lat: 30.058039, 人数: 500},
            {lng: 107.823557, lat: 27.058039, 人数: 500},
            {lng: 106.823557, lat: 26.058039, 人数: 500},
            {lng: 105.823557, lat: 2.058039, 人数: 500},
            {lng: 118.6758700, lat: 26.87389000, 人数: 1300},
            {lng: 117.6077100, lat: 25.4540000, 人数: 1000},
            {lng: 120.6993900000, lat: 28.9949200000, 人数: 150},
            {lng: 119.4737000000, lat: 33.230370000, 人数: 1200},
            {lng: 116.4071700000, lat: 39.9046900, 人数: 1500},
            {lng: 114.05956000, lat: 22.542860, 人数: 1000},
            {lng: 104.06476000, lat: 22.54286000, 人数: 500},
            {lng: 117.283042, lat: 31.86119, 人数: 1153},
            {lng: 117.000923, lat: 36.675807, 人数: 1430},
            {lng: 102.712251, lat: 25.040609, 人数: 800},
            {lng: 126.642464, lat: 45.756967, 人数: 1300},
            {lng: 114.298572, lat: 30.584355, 人数: 1400},
            {lng: 106.504962, lat: 29.533155, 人数: 1300},
            {lng: 112.982279, lat: 28.19409, 人数: 900},
            {lng: 118.283042, lat: 31.16119, 人数: 753},
            {lng: 120.153576, lat: 30.287459, 人数: 1430},
            {lng: 102.712251, lat: 25.040609, 人数: 800},
            {lng: 87.617733, lat: 43.792818, 人数: 1000},
            {lng: 91.132212, lat: 29.660361, 人数: 800},
          ]
        },

[xiguaxigua]

我在本地尝试了一下没有发现问题，试试看在你的电脑上这个示例是否卡顿 https://jsfiddle.net/rhqatsvo/2/ ，或者提供一个可以复现问题的在线示例（jsfiddle）。

[weiving]

我试了下，不卡顿，但是我自己的vue的项目会卡，这会是什么情况

[weiving]

我是vue-cli建的项目

[weiving]

我这边测试过，如果是vue-cli的项目下引用的v-charts的热力图，移动会有卡顿现象，但是如果在另外的单页面html，不会卡顿

[xiguaxigua]

可能是与项目中的其他内容有关，可以将你的项目代码脱敏后发我的邮箱一份，或者在 codesandbox 中尝试重现一下，这样才能针对的解决这个问题。