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

最新推荐文章于 2024-06-11 21:36:57 发布

agax0312

最新推荐文章于 2024-06-11 21:36:57 发布

阅读量2.1w

点赞数

分类专栏： echarts 文章标签： echarts3.0 map tooltip areaColor

本文链接：https://blog.csdn.net/agax0312/article/details/54317019

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

点击打开链接(修改后的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>

agax0312

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts初次使用,自定义china-map省份默认颜色

点击打开链接(修改后的echarts.js)html>meta charset= "utf-8">head>
复制链接

扫一扫