echarts初次使用,自定义china-map省份默认颜色

点击打开链接(修改后的echarts.js)





<html>
<meta charset= "utf-8">
<head>
    
    <style >
        .map{
            width: 100%;
            height: 100%;
        }
    style>
    
    <script type = "text/javascript" src = "./echarts.js">script>
    <script type = "text/javascript" src = "./china.js">script>

head>
<body width = "100%" height = "100%">
    
    <div id = "map" class = "map">

    div>
body>

<script>;
    window.onload = function(){
    var str = "Echarts3.0-"
        + "官网下载echarts,js文件:echarts.js ,"
        + "更多注释在html文件.";

    var  china_map = echarts.init(document.getElementById('map'));

    var option_china_map = {
        title: {
            text: str,//地图Title
            textStyle: {
                color: '#016E8B' //对title的样式配置.
            }
        },
        tooltip: {
            confine: true, //确定tooltip提示框是否限制在父窗体中,默认false.
            show: true, //是否显示tooltip  true/false
            formatter: {
                function(params,ticket,callback){
                    /*
                     在这里你做很多事,比如请求一次后台,
                     eg: getData();
                     */
                    var res = "";
                    //接下来将res赋值为自己想要的东西,比如在前面的getData()函数中得到的一些数据.
                    //当然你也可以参考echarts文档中的格式化模板,找到符合自己需求的配置方式.
                    return res;
                }
            },
            padding: [5,5,5,5],//对tooltip提示框中内容上下左右距离做设置.
            extraCssText: "font-size: '12px';" //在这里对tooltip内容添加样式.
        },
        itemStyle: {
            normal: {
                label: {
                    show: true
                },
                areaColor: '#dec313',
            },
            emphasis: {
                label: {
                    show: true
                },
                areaColor: '#111111'
            }
        },
        series: [{
            type: 'map',
            mapType: 'china',
            label: {
                normal: {//通常情况下normal和emphasis是对应的,分别表示  “普通状态” 和 “选中状态” 下的样式.
                    show: true//是否显示省会名字.
                },
                emphasis: {
                    show: true
                }
            },
            data: [{name: '浙江', selected: true}],//是否初始化某省份为选中状态.
            /*一般来说我们的数据都是后台取得的,即:
             data:(function(){
             $.ajax({
             url: './test.do?param =' + map_param, //此处的map_param是你传的参数.
             async: true,
             type: 'get',
             dataType: 'json',
             success: function(data){
             //这里可以对返回来的数据做一些过滤之类的操作,当然,看需求.
             }
             return data.list;//这里就是将要赋值给data的数据,将在地图中展现出来.
             })
             }),*/
        }],
    };

    china_map.setOption(option_china_map);
    }

script>

html>

你可能感兴趣的:(echarts)