echarts

echarts的一个很容易遇到的坑 

不清空的话 会导致echarts 认为 容器没有变化

重新回到页面以后需要执行这个 否则不会重新渲染

    dsiab_com = document.getElementById('sankeyContainer') 

dsiab_com!.removeAttribute("_echarts_instance_");

echarts地图的一些使用（中国地图）

//vue3+ts


<template>
  <div id="aa123"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted } from "vue";
function randomData() {
  return Math.round(Math.random() * 500);
}
var scatterData: any = [];
const defaultProp: any = {
  四川省: [118.2, 39.13333],
  广东省: [115.48333, 38.03333],
  辽宁省: [122.15333, 31.2],
  宁夏省: [103.73333, 36.53333],
  安徽省: [115.5, 22.2],
  西藏省: [113.5, 21.8],
};
// const defaultProp: any = {
//   北京市: [118.2, 39.13333],
//   河北省: [115.48333, 38.03333],
//   上海市: [122.15333, 31.2],
//   甘肃省: [103.73333, 36.53333],
//   香港特别行政区: [115.5, 22.2],
//   澳门特别行政区: [113.5, 21.8],
// };
const setLocalProp = (data: any) => {
  return data.map((item: any, index: any) => {
    const { properties } = item;
    const { name } = properties;
    // if (defaultProp[name]) {
    //   properties.cp = defaultProp[name];
    // }
    return item;
  });
};
const data = [
  { name: "北京市", value: 100 },
  { name: "天津市", value: randomData() },
  { name: "上海市", value: randomData() },
  { name: "重庆市", value: randomData() },
  { name: "河北省", value: randomData() },
  { name: "河南省", value: randomData() },
  { name: "云南省", value: randomData() },
  { name: "辽宁省", value: randomData() },
  { name: "黑龙江", value: randomData() },
  { name: "湖南省", value: randomData() },
  { name: "安徽省", value: randomData() },
  { name: "山东省", value: randomData() },
  { name: "新疆省", value: randomData() },
  { name: "江苏省", value: randomData() },
  { name: "浙江省", value: randomData() },
  { name: "江西省", value: randomData() },
  { name: "湖北省", value: randomData() },
  { name: "广西省", value: randomData() },
  { name: "甘肃省", value: randomData() },
  { name: "山西省", value: randomData() },
  { name: "内蒙古", value: randomData() },
  { name: "陕西省", value: randomData() },
  { name: "吉林省", value: randomData() },
  { name: "福建省", value: randomData() },
  { name: "贵州省", value: randomData() },
  { name: "广东省", value: randomData() },
  { name: "青海省", value: randomData() },
  { name: "西藏省", value: randomData() },
  { name: "四川省", value: randomData() },
  { name: "宁夏省", value: randomData() },
  { name: "海南省", value: randomData() },
  { name: "台湾省", value: randomData() },
  { name: "香港市", value: randomData() },
  { name: "澳门市", value: randomData() },
];
var top5 = data
  .sort(function (a, b) {
    return b.value - a.value;
  })
  .slice(0, 5);
scatterData = [];
for (var i = 0; i < top5.length; i++) {
  if (i == 1) {
    scatterData.push({
      name: top5[i].name,
      value: [118.2, 39.13333, 300],
    });
  } else {
    scatterData.push({
      name: top5[i].name,
      value: [113.54909, 22.198951, 300],
    });
  }
}
const linesData: any = [
  {
    fromName: "澳门市",
    toName: "北京市",
    //两个地点的坐标
    coords: [
      [113.54909, 22.198951],
      [118.2, 39.13333],
    ],
    value: 1000,
    lineStyle: { color: "yellow" },
  },
];
//初始化echarts实例
onMounted(() => {
  var dsiab_com = document.getElementById("aa123");
  dsiab_com!.removeAttribute("_echarts_instance_");
  AMapLoader.load({
    //首次调用 load
    key: "73e9f6e21ecf8bbac0f517afb49e875a", //首次load key为必填
    version: "2.0",
    AMapUI: {
      version: "1.1",
    },
  }).then((a) => {
    // @ts-ignore
    AMapUI.loadUI(["geo/DistrictExplorer"], function (DistrictExplorer: any) {
      var districtExplorer = new DistrictExplorer();
      districtExplorer.loadAreaNode(
        100000,
        function (error: any, areaNode: any) {
          if (error) {
            console.error(error);
            return;
          }
          let mapJson = { type: "", features: "" };
          let features = areaNode.getSubFeatures();
          mapJson.type = "FeatureCollection";
          mapJson.features = setLocalProp(features);
          // @ts-ignore
          echarts.registerMap("china", mapJson);
          var myChart = echarts.init(document.getElementById("aa123")!);
          myChart.setOption({
            title: {
              text: "Population Density of Hong Kong （2011）",
            },
            tooltip: {
              trigger: "item",
              formatter: "{b}<br/>{c} (p / km2)",
            },
            // toolbox: {
            //   show: true,
            //   orient: "vertical",
            //   left: "right",
            //   top: "center",
            //   feature: {
            //     dataView: { readOnly: false },
            //     restore: {},
            //     saveAsImage: {},
            //   },
            // },
            visualMap: {
              min: 800,
              max: 50000,
              text: ["High", "Low"],
              realtime: false,
              calculable: true,
              inRange: {
                color: ["lightskyblue", "yellow", "orangered"],
              },
            },
            geo: {
              show: true,
              map: "china",
              label: {
                normal: {
                  show: true,
                },
                emphasis: {
                  show: true,
                },
              },
              roam: false,
            },
            series: [
              //地图名称颜色数值的数据  map 已经有地图了 但是可以控制每个城市的颜色和数值和显示名字
              {
                name: "香港18区人口密度",
                type: "map",
                map: "china",
                label: {
                  show: true,
                },
                // 这个value值 会有一个颜色的范围  也可以自定义一下
                data: data,
              },
              //散点的数据
              // 数据要注意 数组中的前两个是坐标 是不可以瞎写的必须看看地图的坐标在写   第三个是散点的值 可以控制显示大小的
              {
                name: "Top 5",
                type: "effectScatter",
                coordinateSystem: "geo",
                data: scatterData,
                symbolSize: function (val: any) {
                  return val[2] / 10;
                },
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke",
                },
                hoverAnimation: true,
                label: {
                  normal: {
                    formatter: "{b}",
                    position: "left",
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "yellow",
                    shadowBlur: 10,
                    shadowColor: "yellow",
                  },
                },
                zlevel: 999,
              },
              //散点间的连线的数据
              //lineStyle 的color 会有别的影响 百度也可以搜出来 如果想控制的话 我是在data中加上
              {
                type: "lines",
                zlevel: 1,
                effect: {
                  show: true,
                  period: 5, //箭头指向速度，值越小速度越快
                  trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                  color: "blue", //图标颜色
                  // symbol: path,		//图标样式
                  symbolSize: 10, //图标大小
                },
                lineStyle: {
                  width: 10,
                  // @ts-ignore
                  color: "rgba(255,255,255,1)",
                  opacity: 1,
                  curveness: 0.3,
                  // normal: {
                  //   // color: "#FEAE6F",
                  //   color: "#ffffff",
                  //   width: 5,
                  //   curveness: 0.3,
                  // },
                },
                data: linesData,
              },
            ],
          });
        }
      );
    });
  });
});

//使用制定的配置项和数据显示图表
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#aa123 {
  height: 800px;
  width: 1300px;
}
nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>