echarts 生成中国陕西省份(或其他省份)的地图,大屏使用

效果图:

一、首先第一步需要下载echarts和获取到陕西身份的地图信息。

1.下载echarts链接(官网):

Apache ECharts

2.生成指定省份的地图数据信息,数据可以在阿里云获取。

DataV.GeoAtlas地理小工具系列

 如图,点击左圈需要的省份,这里我选择的是陕西省,然后点击右圈复制下载链接,得到一个json格式的数据,可以在json转换网站转成js格式。

Json在线解析格式化-Json在线校验Json格式化压缩-Jsons在线工具

扫描二维码关注公众号,回复: 14222629 查看本文章

转成js格式的数据后,将数据赋值给一个变量,并放在一个单独的js文件里。 

二、使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main{
            width:400px;
            height:400px;
            border:5px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="main"></div>
</body>
</html>
<script src="./echarts.js"></script>
<script src="./shanxi.js"></script>
<script type="text/javascript">
var mapChatDate=shanxi;//使用shanxi.js中的变量
echarts.registerMap('shanxi', mapChatDate);
var chart = echarts.init(document.getElementById('main'));
var dataMap = [{ name: '西安市' },{ name: '汉中市' }];
option={
    visualMap: {
        min: 170259,
        max: 401178,
        text: ['max', 'min'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
        }
    },
series: [{
    type: 'map',
    map: 'shanxi',
    itemStyle: {

        normal: { label: { show: true } },
        emphasis: { label: { show: true } }
    },
    label: {
        normal: {
            textStyle: {
                fontSize: 16,
                // fontWeight: 'bold',
                color: 'black'
            }
        }
    },
    
    data: [
        { name: '西安市', value: 610100 },
        { name: '汉中市', value: 610700 },

    ]
}]
}
chart.setOption(option);
//取消选中的高亮
// chart.dispatchAction({
//     type: 'highlight', // 高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
//     seriesIndex: 0,
//     name: '西安市'
// })
</script>

猜你喜欢

转载自blog.csdn.net/qq_42740797/article/details/124753354
今日推荐