您的位置：首页 > 其它

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

2017-01-10 19:38 483 查看 
点击打开链接(修改后的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,//地图TitletextStyle: {color: '#016E8B' //对title的样式配置.}},tooltip: {confine: true, //确定tooltip提示框是否限制在父窗体中,默认false.show: true, //是否显示tooltip  true/falseformatter: {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>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航