MuranHan 2022-06-26 21:17 采纳率: 100%
浏览 125
已结题

Echarts 饼图/图例/柱状图 与 地图联合

问题遇到的现象和发生背景

做一个echarts, 包括了中国地图和一张饼图。实现饼图点击的同时，地图响应省份高亮。

问题相关代码，请勿粘贴截图
运行结果及报错内容

一直未有思路

我的解答思路和尝试过的方法

一直未有思路

我想要达到的结果

点击饼图的某个变量，地图所对应的省份（们）高亮

<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="button.css">
  <meta charset="utf-8" />
  <title>ECharts</title>

  <body>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main_map" style="height:600px"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript">
      // 路径配置
      require.config({
        paths: {
          echarts: 'http://echarts.baidu.com/build/dist'
        }
      })

      // 使用
      require([
        'echarts',
        'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
        'echarts/chart/map', // 使用柱状图就加载bar模块，按需加载
        'echarts/chart/pie',

      ], function(ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart_map = ec.init(document.getElementById('main_map'));

      var tree_data = ['木槿','碧桃','杨树','国槐','侧柏','山杏','枫树','垂柳',
             '海棠','枣树','蝟实','紫叶李','栾树','元宝槭','黄栌','玉兰树',
             '香樟树','乌桕树','荷花木兰','刚竹','桂花','紫薇','紫荆','枇杷',
             '榆树','女贞','夹竹桃','木芙蓉','黄葛树','龙牙花','榕树','木棉',
             '棕榈树','凤凰木','鸡蛋花树'];

        var itemStyle = {
          normal: {
            label: {
              show: true,
              formatter: '{b}',
          //left: 100px ,
              textStyle: { fontSize: 12, fontWeight: 'bold' }
            }
          },
          emphasis: { label: { show: true } }
        };

        var option_map = {
        //color:['#800080','#ED7C30','#80FF80'],
          title: {
            text: '中国地图',
            subtext: '四班一组',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
        //formatter: "{a} <br/>{b}: {c}",
        position:function(p){ //其中p为当前鼠标的位置
        return [p[0] - 50, p[1] - 48];
        },
        extraCssText:'width:160px;height:40px;background:red;',
         enterable:true,
          },
          legend: {
            orient: 'vertical',
            x: 'left',
         type: 'scroll',
            data: tree_data,
   selected: {
      木槿: true,
      碧桃: true,
      杨树: true,
    }
          },
          dataRange: {
            min: 0,
            max: 80,
            x: 'right',
            y: 'bottom',
        
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            x: 'right',
            y: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: true },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },

          roamController: {
            show: true,
            x: 'right',
            mapTypeControl: {
              china: true
            }
          },
          series: [
         {
            name: '树木分布',
            type: 'pie',    // 设置图表类型为饼图
            radius: '35%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
        center: ['85%', '50%'],
            data:[          // 数据数组，name 为数据项名称，value 为数据项值
                {value:235, name:'木槿'},
                {value:274, name:'碧桃'},
                {value:310, name:'国槐'},
                {value:335, name:'侧柏'},
                {value:400, name:'栾树'}
                ],

        itemStyle: {
                normal: {
                  color: function (colors) {
                    var colorList = [
                      '#fc8251',
                      '#5470c6',
                      '#91cd77',
                      '#ef6567',
                      '#f9c956',
                    ];
                    return colorList[colors.dataIndex];}
                  }
                 }

            },
            {
              name: '树木种类: ',    
              type: 'map',
              mapType: 'china',
              roam: true,
              layoutCenter: ['60%', '50%'],
              layoutSize: 450,
            //center: ['12%', '40%'],
              //                            itemStyle:{
              //                                normal:{label:{show:true}},
              //                                emphasis:{label:{show:true}}
              //                            },
              itemStyle: itemStyle,
              data: [
                { name: '北京', value: 15 },
                { name: '天津', value: 35 },
                { name: '上海', value: 23 },
                { name: '重庆', value: 25 },
                { name: '河北', value: 13 },
                { name: '河南', value: 14 },
                { name: '云南', value: 17 },
                { name: '辽宁', value: 18 },
                { name: '黑龙江', value: 21 },
                { name: '湖南', value: 54 },
                { name: '安徽', value: 14 },
                { name: '山东', value: 47 },
                { name: '新疆', value: 22 },
                { name: '江苏', value: 54 },
                { name: '浙江', value: 57 },
                { name: '江西', value: 43 },
                { name: '湖北', value: 32 },
                { name: '广西', value: 23 },
                { name: '甘肃', value: 15 },
                { name: '山西', value: 25 },
                { name: '内蒙古', value: 44 },
                { name: '陕西', value: 23 },
                { name: '吉林', value: 52 },
                { name: '福建', value: 46 },
                { name: '贵州', value: 33 },
                { name: '广东', value: 5 },
                { name: '青海', value: 44 },
                { name: '西藏', value: 35 },
                { name: '四川', value: 3 },
                { name: '宁夏', value: 28 },
                { name: '海南', value: 15 },
                { name: '台湾', value: 51 },
                { name: '香港', value: 34 },
                { name: '澳门', value: 38 }
              ]
            },
        {
          name: '木槿',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京', value: 1  },
]
},
{
          name: '碧桃',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京', value: 1  },
]
},
{
          name: '杨树',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京', value: 1  },
]
},
{
          name: '国槐',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京', value: 1  },
]
},
{
          name: '侧柏',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京', value: 1  },
]
},
{
          name: '山杏',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: false } }
              },
              data: [
                { name: '北京', value: 1  },
]
},
{
          name: '枫树',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京', value: 1  },
]
},
{
          name: '垂柳',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京', value: 1  },
]
},
{
          name: '海棠',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京', value: 1  },
]
},
{
          name: '枣树',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京' , value: 1 },
]
},
{
          name: '蝟实',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京', value: 1  },
]
},
{
          name: '紫叶李',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京' , value: 1 },
            { name: '安徽', value: 1 },
]
},
{
          name: '栾树',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京', value: 1  },
            { name: '安徽', value: 1 },

]
},
{
          name: '元宝槭',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京', value: 1  },
]
},
{
          name: '黄栌',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '北京', value: 1  },
]
},
{
          name: '玉兰树',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '安徽', value: 1 },
]
},
{
          name: '香樟树',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '安徽', value: 1 },
]
},
{
          name: '乌桕树',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '安徽', value: 1 },
]
},
{
          name: '荷花木兰',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '安徽', value: 1 },
]
},
{
          name: '刚竹',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '安徽', value: 1 },
]
},
{
          name: '桂花',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '安徽', value: 1  },
]
},
{
          name: '紫薇',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '安徽', value: 1  },
]
},
{
          name: '紫荆',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '安徽', value: 1  },
]
},
{
          name: '枇杷',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '安徽', value: 1  },
]
},
{
          name: '榆树',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '安徽', value: 1  },
]
},
{
          name: '女贞',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '安徽', value: 1  },
]
},
{
          name: '夹竹桃',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '安徽', value: 1 },
]
},
{
          name: '木芙蓉',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '四川', value: 1  },
]
},
{
          name: '黄葛树',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '四川', value: 1  },
]
},
{
          name: '龙牙花',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '四川', value: 1  },
]
},
{
          name: '榕树',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '广东', value: 1  },
]
},
{
          name: '木棉',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '广东', value: 1  },
]
},
{
          name: '鸡蛋花树',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '广东', value: 1  },
]
},
{
          name: '棕榈树',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '广东' , value: 1 },
]
},
{
          name: '凤凰木',
          type: 'map',
          mapType: 'china',
          itemStyle: {
                normal: { label: { show: true } },
                emphasis: { label: { show: true } }
              },
              data: [
                { name: '广东', value: 1  },
]
},

          ]
        }

        // 为echarts对象加载数据
        myChart_map.setOption(option_map)
      })
    </script>


  </body>
</head>
  • 写回答

4条回答 默认 最新

  • 溪风沐雪 2022-06-26 21:50
    关注

    你这饼图和地图数据是啥关系啊，没太看懂，你的数据逻辑没看懂，我自己做了一些数据给个例子，我的数据结构是饼图是每种树木的总量，然后每个地区会有若干种树木，鼠标放到对应饼图的树木类型上时，有该树木类型的区域会变成红色，你如果有其他联动策略，可以基于这个来修改：

    <!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="js/echarts.js"></script>
    <script src="js/china.js"></script>
    <style>
        #main_map {
            float: left;
        }

        #pie_map {
            float: left;
        }
    </style>

<body>
    <div id="main_map" style="width:600px;height:600px"></div>
    <div id="pie_map" style="width:600px;height:600px"></div>
    <script>
        // 初始化echarts实例
        var myMap = echarts.init(document.getElementById("main_map"));
        var myPie = echarts.init(document.getElementById("pie_map"));
        var tree_data = ['木槿', '碧桃', '杨树', '国槐', '侧柏', '山杏', '枫树', '垂柳',
            '海棠', '枣树', '蝟实', '紫叶李', '栾树', '元宝槭', '黄栌', '玉兰树',
            '香樟树', '乌桕树', '荷花木兰', '刚竹', '桂花', '紫薇', '紫荆', '枇杷',
            '榆树', '女贞', '夹竹桃', '木芙蓉', '黄葛树', '龙牙花', '榕树', '木棉',
            '棕榈树', '凤凰木', '鸡蛋花树'];
        var total = [566, 515, 519, 544, 523, 503, 587, 530, 595, 530, 594,
            507, 524, 543, 537, 503, 521, 598, 560, 560, 517, 598,
            516, 558, 570, 577, 541, 525, 533, 553, 538, 511, 556, 549, 535];

        var areas = ['北京', '天津', '上海', '重庆', '河北', '河南', '云南', '辽宁', '黑龙江',
            '湖南', '安徽', '山东', '新疆', '江苏', '浙江', '江西', '湖北', '广西',
            '甘肃', '山西', '内蒙古', '陕西', '吉林', '福建', '贵州', '广东', '青海',
            '西藏', '四川', '宁夏', '海南', '台湾', '香港', '澳门', '南海诸岛'];
        var pie_data = [];
        for (let i = 0; i < tree_data.length; i += 3) {
            pie_data.push({ name: tree_data[i], value: total[i] });
        }
        var map_data = [];
        for (let i = 0; i < areas.length; i++) {
            let detals = {};
            let t = 0;
            for (let j = 0; j < 5; j++) {
                let num = Math.floor(Math.random() * 100 + 1);
                let name = tree_data[Math.floor(Math.random() * tree_data.length + 1)]
                detals[name] = num;
                t += num;
            }
            map_data.push({ name: areas[i], value: t, detals: detals})
        }
        console.log(map_data);
        var option_map = {
            title: {
                text: '中国树木分布图',
                subtext: '四班一组',
                x: 'right'
            },
            tooltip: {
                trigger: 'item',
                position: function (p) {
                    return [p[0] - 50, p[1] - 48];
                },
                extraCssText: 'width:160px;height:40px;background:white;',
                enterable: true,
            },
            visualMap: {
                min: 0,
                max: 1000,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: true },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            roamController: {
                show: true,
                x: 'right',
                mapTypeControl: {
                    china: true
                }
            },
            series: [
                {
                    name: '树木种类: ',
                    type: 'map',
                    map: 'china',
                    label: {
                        show: true
                    },
                    select:{
                        itemStyle:{
                            areaColor:'#f00'
                        }
                    },
                    layoutCenter: ['50%', '50%'],
                    layoutSize: 650,
                    selectedMode: 'multiple',
                    data: map_data
                }
            ]
        }

        var option_pie = {
            tooltip: {
                trigger: 'item',
                position: function (p) {
                    return [p[0] - 50, p[1] - 108];
                },
                extraCssText: 'width:160px;height:40px;background:white;',
                enterable: true,
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                y: 'bottom'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: true },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: '树木分布',
                    type: 'pie',
                    radius: '35%',
                    data: pie_data
                }
            ]
        }
        myMap.setOption(option_map);
        myPie.setOption(option_pie);
        myPie.on('mouseover', function (params) {
            var dataIndex = []
            for(let i=0;i<map_data.length;i++){
                if(map_data[i].detals.hasOwnProperty(params.data.name)){
                    dataIndex.push(i);
                }
            }
            myMap.dispatchAction({
                type: 'select',
                seriesIndex: 0,
                dataIndex: dataIndex
            });
        });
        myPie.on('mouseout', function (params) {
            myMap.dispatchAction({
                type: 'unselect',
                seriesIndex: 0,
                dataIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35]
            });
        });
    </script>

</body>
</head>

    img

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 7月6日
  • 已采纳回答 6月28日
  • 请回答用户的提问 6月27日
  • 修改了问题 6月26日
  • 展开全部

悬赏问题

  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改