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

来源：互联网发布：Java 动态条件计算编辑：程序博客网时间：2024/05/21 23:00

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

0 0