1、ECharts(中国地图篇)的使用

一、
网址:            http://echarts.baidu.com/download.html
点击:            完整
下载文件:        echarts.min.js

网址:            http://echarts.baidu.com/download-map.html
点击:            中国地图 - JS
下载文件:        china.js

二、代码示例

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
        <title>EChartstitle>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
        <script src="js/jquery-1.9.1.min.js">script>
        <script src="js/echarts.min.js">script>
        <script src="js/china.js">script>
        <style>#china-map {width:1000px; height: 1000px;margin: auto;}style>
    head>
    <body>        

        <div id="china-map">div>
        
        <script>
            var myChart = echarts.init(document.getElementById('china-map'));
            var option = {
                tooltip: {
//                    show: false //不显示提示标签
                    formatter: '{b}', //提示标签格式
                    backgroundColor:"#ff7f50",//提示标签背景颜色
                    textStyle:{color:"#fff"} //提示标签字体颜色
                },
                series: [{
                    type: 'map',
                    mapType: 'china',
                    label: {
                        normal: {
                            show: true,//显示省份标签
                            textStyle:{color:"#c71585"}//省份标签字体颜色
                        },    
                        emphasis: {//对应的鼠标悬浮效果
                            show: true,
                            textStyle:{color:"#800080"}
                        } 
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: .5,//区域边框宽度
                            borderColor: '#009fe8',//区域边框颜色
                            areaColor:"#ffefd5",//区域颜色
                        },
                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor:"#ffdead",
                        }
                    },
                    data:[
                        {name:'福建', selected:true}//福建为选中状态
                    ]
                }],
            };
            
            myChart.setOption(option);
            myChart.on('mouseover', function (params) {
                var dataIndex = params.dataIndex;
                console.log(params);
            });
        script>
        
    body>
html>

 

三、效果图

1、ECharts(中国地图篇)的使用_第1张图片


四、修改省份标签位置:
打开china.js文件,修改"properties":{"cp":[X坐标,Y坐标],...}

 

转载于:https://www.cnblogs.com/xianwen/p/6045454.html

你可能感兴趣的:(1、ECharts(中国地图篇)的使用)