vue使用echarts画中国地图

最新推荐文章于 2024-03-28 14:25:11 发布

久伴❦

最新推荐文章于 2024-03-28 14:25:11 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

文章标签： echarts

本文链接：https://blog.youkuaiyun.com/MQH000000000/article/details/120516995

本文介绍了如何使用ECharts库在中国地图上实现散点图和热力图的配置，展示了如何展示北京、上海等地的启动次数数据，并详细讲解了地图、数据范围、tooltip等组件的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="echarts">
    <div :style="{ height: '470px', width: '100%' }" ref="myEchart"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import '../../utils/china';
export default {
  name: "echarts",
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chinaConfigure();
  },
  methods: {
    chinaConfigure() {
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      window.onresize = myChart.resize;
      myChart.setOption({
        // 进行相关配置
        backgroundColor: "#02AFDB",
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          color: ["orangered", "yellow", "lightskyblue"],
        },
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: "rgba(0,0,0,0.4)",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo", // 对应上方配置
          },
          {
            name: "启动次数", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "北京",
                value: 599,
              },
              {
                name: "上海",
                value: 142,
              },
              {
                name: "河南",
                value: 166,
              },
              {
                name: "深圳",
                value: 92,
              },
              {
                name: "湖北",
                value: 810,
              },
              {
                name: "四川",
                value: 453,
              },
            ],
          },
        ],
      });
    },
  },
};
</script>