echarts：中国地图-省市区二级联动

最新推荐文章于 2024-09-02 21:30:00 发布

云上@流

最新推荐文章于 2024-09-02 21:30:00 发布

阅读量1k

点赞数

分类专栏：前端 echarts

本文链接：https://blog.csdn.net/weixin_53571388/article/details/117333841

版权

本文展示了如何使用Echarts实现中国地图中省市区的二级联动效果，包括从省级区域选择到市级区域的细化，并提供了vue和json的代码演示。

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

效果图：

中国：
在这里插入图片描述
↓
浙江省：

↓
南浔区

代码演示：

vue

<template>
  <div class="line-container">
    <div>
      <div id="mapChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import chinaJson from '../assets/json/data.json' // json数据引入
import zejiang from '../assets/json/zejiang.json' // 浙江省
import nanxun from '../assets/json/nanxun.json'   // 南浔区

export default {
   
  name: 'mapChart',
  data() {
   
    return {
   
      option: {
   
        tooltip: {
   
          trigger: 'item',
        },
        label: {
   
          show:true,
        },
        series : [{
   
          type: 'map',
          map: 'china',
          zoom: 1.25,
          roam: true,
          itemStyle: {
   
            normal: {
   
             borderColor: 'rgb(147, 235, 248)',
              areaColor: {
   
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
   
                  offset: 0,
                  color: '#09132c' // 0% 处的颜色
                }, {
   
                  offset: 1,
                  color: '#274d68'  // 100% 处的颜色
                }],