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

创建时间：2017-01-10 投稿人：浏览次数：6675

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

<!--
2017-01-09
有什么问题可以一起讨论,微信:Jerry_agax  大写J
-->

<!--
修改某些省份默认颜色,我的做法是修改echarts.js文件,详见echarts-L33715.

修改后的echarts.js
 -->

<html>
<meta charset= "utf-8">
<head>
    <!-- some css styles defined here. -->
    <style >
        .map{
            width: 100%;
            height: 100%;
        }
    </style>
    <!-- import the source file of echarts here. -->
    <script type = "text/javascript" src = "./echarts.js"></script>
    <script type = "text/javascript" src = "./china.js"></script>

</head>
<body width = "100%" height = "100%">
    <!-- you should first set width and height of the div, especially the height. -->
    <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>

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。

上一篇：没有了
下一篇： echarts3.0版本radar图tooltip实现显示单轴数据

热门文章: echarts3.0版本radar图tooltip实...

最新文章: echarts初次使用,自定义china-m...