Echarts map 显示省份

zyb53

已于 2023-08-01 09:41:08 修改

阅读量278

点赞数 1

文章标签： echarts 前端 javascript

于 2023-07-14 17:41:01 首次发布

本文链接：https://blog.csdn.net/zhouyibin53/article/details/131728720

版权

官方的地图下载地址参见：https://github.com/apache/echarts/tree/master/test/data/map/json

下载整个源码，然后提取map地图包和echarts.min.js到 html位置，编辑html代码为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts Map Example</title>
    <!-- 引入 ECharts 的库文件 -->
    <script src="echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 900px; height: 600px;">
    </div>
    <script type="text/javascript">
        // 3. 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
       
       /**
此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果

默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。

http://echarts.baidu.com/option.html#series-map.geoIndex

并且加了pin气泡图标以示数值大小
*/

var uploadedDataURL = "./map/json/province/guangxi.json";
myChart.showLoading();
$.getJSON(uploadedDataURL, function(geoJson) {
    echarts.registerMap('jiangxi', geoJson);
    myChart.hideLoading();

 var points = [
  // 点坐标
  { value: [108.930835,22.810834], itemStyle: { color: '#c1bb1f' }, name: 'base'},
  { value: [108.033838,22.238638], itemStyle: { color: '#3eef1d' }, name: 'rover'},
]

    option = {
        geo: {
            show: true,
            map: 'jiangxi',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7',
                }
            }
        },
        series : [
         {
            type: 'map',
            map: 'jiangxi',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7'
                }
            },
            animation: true,
            data: []
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: points,
            symbolSize: 10,
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#05C3F9',
                    shadowBlur: 10,
                    shadowColor: '#05C3F9'
                }
            },
            zlevel: 1
        },
         
    ]
    };
    myChart.setOption(option);
});

window.onresize = function(){
    myChart.resize();
    //myChartA.resize();
    //myChartB.resize();
}

</script>
</body>
</html>

然后用浏览器打开html，接着你会看到一个错误。

Access to XMLHttpRequest at ‘file:///~~~~~’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

错误的解决方式为：【跨域】谷歌chrome浏览器本地文件跨域配置不生效 - 知乎

的方法二。

最后重新尝试谷歌浏览器打开，你就会看到效果了。

第二种方法，把网页用IIS运行！