Echarts 地图和柱状图结合，且柱状图多列内容

最新推荐文章于 2025-05-19 11:17:04 发布

原创最新推荐文章于 2025-05-19 11:17:04 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts

本文介绍了一个使用ECharts实现的地图与柱状图联动的数据可视化案例。该案例中，通过地图展示了全国范围内的数据分布，并通过柱状图详细展示了各省的数据情况。特别地，案例中实现了视觉映射、工具提示等功能，并对地图和柱状图进行了细致的布局调整。

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

var opop = {
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        min: 0,
                        max: response.data.data.maxCounts,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],
                        calculable: true,
                        colorLightness: [0.2, 100],
                        color: ['#c05050','#e5cf0d','#5ab1ef'],
                        dimension: 0
                    },
                    grid: {
                        right: 40,
                        top: 100,
                        bottom: 40,
                        width: '15%'
                    },
                    xAxis: [{
                        position: 'top',
                        type: 'value',
                        boundaryGap: false,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                    }],
                    yAxis: [{
                        type: 'category',
                        data: response.data.data.provinceForUsersCountDescarr,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    series: [{
                        z: 1,
                        name: '全部',
                        type: 'map',
                        map: 'china',
                        left: '10',
                        right: '15%',
                        top: 100,
                        bottom: "15%",
                        zoom: 0.75,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        //roam: true,
                        data: response.data.data.countForProvince
                    },{
                        name: '个人',
                        z: 2,
                        type: 'bar',
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true,
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                color: "rgb(254,153,78)"
                            }
                        },
                        data: response.data.data.usersCountForProvinceDescPro
                    },{
                        name: '单位',
                        z: 2,
                        type: 'bar',
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                color: "rgb(254,153,78)"
                            }
                        },
                        data: response.data.data.usersCountForProvinceDescIns
                    }]
                };

我是图