使用echarts插件在vue中创建一个地图

最新推荐文章于 2024-08-18 08:53:59 发布

明天一定能早睡

最新推荐文章于 2024-08-18 08:53:59 发布

阅读量639

点赞数 2

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/m0_70977931/article/details/126148946

版权

本文介绍了如何使用ECharts库在Vue项目中绘制地图，包括下载插件、配置、引入GeoJSON数据、设置HTML样式以及在组件中初始化和配置ECharts地图。通过实例展示了地图的背景颜色、阴影效果、缩放比例等关键参数的设置，最后呈现了地图效果，并指出颜色和样式可按需调整。

摘要由CSDN通过智能技术生成

1、下载插件

npm install -D echarts@4（我是用的4.9.0版本）

2、配置

在main.js中导入echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3、在需要使用地图的组件中引入Geo.json

GeoJSON是一种用于编码各种地理数据结构的数据。(地图的数据)

Geo.json

4、html 中的div设置宽高

#main {

width: 100%;

height: 500px;

}

5、这里使用mounted（）


<script>
export default {
  mounted() {
    let myChart = this.$echarts.init(document.querySelector("#main"));
    this.$echarts.registerMap("china", geoJson); //注册可用的地图，必须包括geo组件或者map图表类型的时候才可以使用
    console.log(geoJson);
    let option = {
      backgroundColor: "rgb(121, 145, 209)",
      geo: {
        map: "china",
        aspectScale: 0.75, // scale地图长宽比
        zoom: 1.1,
        itemStyle: {
          normal: {
            areaColor: {
              type: "radial",//镜像渐变
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: "#09132c", // 0%处的颜色
                },
                {
                  offset: 1,
                  color: "#274d68", // 100%处的颜色
                },
              ],
              globalCoord: true,
            },
            shadowColor: "rgb(58, 115, 192)",
            shadowOffsetX: 10,
            shadowOffsetY: 11,
          },
        },
        regions: [
          {
            name: "南海诸岛",
            itemStyle: {
              opacity: 0,
            },
          },
        ],
      },
      series: [
        {
          // 配置地图相关参数,绘制地图,这个对象是关于地图图表的相关设置
          type: "map",
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#1DE9B6",
              },
            },
            emphasis: {    //高亮 
              textStyle: {
                color: "rgb(183, 185, 14)",
              },
            },
          },
          zoom: 1.1,
          map: "china",
          itemStyle: {
            normal: {
              backgroundColor: "rgb(147, 235, 248)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(31, 54, 150)", // 0%处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgb(89, 128, 142)", // 100%处的颜色
                  },
                ],
                globalCoord: true,
              },
            },
            emphasis: {   //高亮 
              areaColor: "rgb(46, 229, 206)",
              borderWidth: 0.1,
            },
          },
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

效果如下：