echarts3.0 引用json地图

echarts3.0有两个引入地图的方式,
http://echarts.baidu.com/download-map.html
我用js的方法引入成功了,但是用json的方法就是看不到地图(火狐也看不到),空白一片

以下是我的目录结构
F:\MyEcharts3.0
-china.js
-china.json
-echarts.js
-echarts.min.js
-jquery.min.js
-macarons2.js
-MyTest.html

china.json是echarts官网下载的

以下是我的html代码
<!DOCTYPE html>




<!--自适应device-width设备宽度-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="./echarts.js"></script>
<script src="./jquery.min.js"></script>
<title>ECharts</title>

<style> 

</style> 

$.get('./china.json', function (chinaJson) { echarts.registerMap('china', chinaJson); var chart = echarts.init(document.getElmentById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); }); //myChart.setOption(option);

本人是新手,因为工作需要才开始接触echarts,html,希望大神耐心指导,谢谢
顺便弱弱的问一下echarts3.0怎么像之前一样,加载主题文件?

8个回答

<!DOCTYPE html>
<head>
        <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--自适应device-width设备宽度-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="./echarts.js"></script>
    <script src="./jquery.min.js"></script>
        <title>ECharts</title>

    <style> 

    </style> 
</head>

<body>

<div  id="main" style="height:800px;width:100%;border:1px solid black;"></div>


<script>
$.get('./china.json', function (chinaJson) {
        echarts.registerMap('china', chinaJson);
        var chart = echarts.init(document.getElmentById('main'));
        chart.setOption({
                series: [{
                        type: 'map',
                        map: 'china'
                }]
        });
});
//myChart.setOption(option);

</script>

</body>
qq_31875569
qq_31875569 这个问题我也遇到了,后来发现是json数据的浏览器跨域问题,火狐应该可以,其他的话好像是需要修改浏览器属性的,但是修改浏览器属性的话,那就没有意义了,建议去echarts官方去看看有没有好的解决办法!
大约 4 年之前 回复
qq_31875569
qq_31875569 这个问题我也遇到了,后来发现是json数据的浏览器跨域问题,火狐应该可以,其他的话好像是需要修改浏览器属性的,但是修改浏览器属性的话,那就没有意义了,建议去echarts官方去看看有没有好的解决办法!
大约 4 年之前 回复
wur0428
wur0428 之前那个代码贴的有问题,重新贴一下
4 年多之前 回复

请问你解决了吗 我现在也遇到同样的问题 但是不会

u013627769
xq147852 我也有同样的问题,现在解决了么
接近 4 年之前 回复

https://www.zhihu.com/question/39877703 我不知道你具体遇到的是什么问题,但表面上跟我遇到的问题是一样的,看到知乎上这篇回答,
解决了我的问题,居然省份的地图是要中文汉字。。。坑了我一天半,艹

taozi550185271
嘿吖嘿嘿~ 太棒了,刚好今天碰到一模一样的问题,折腾了大半天,拼音换成汉字立马ok,谢谢分享
接近 3 年之前 回复

var chart = echarts.init(document.getElmentById('main'));

element写错了,少写了一个字母e

我也有同样的问题,现在解决了么

我也遇到 此问题 请问问题 解决了吗

在浏览器的属性--目标里添加权限,比如
"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security
之后还不能解决问题的话,可以参照:解决引入本地json数据的问题
提出的方法,用python启动本地服务器访问页面,这样就允许跨域访问。

关于Python启动本地服务器,win7的可以参考Windows7下Python搭载本地服务器

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Echarts使用json打点地图,如何实现地图下钻和散点图展示?

1.Echarts使用json打点地图,可以实现一级散点图,但是地图下钻到二级,如何清除一级散点图? 2.在二级地图里展示对应的散点图?

echarts 显示数据出现问题,json取出数据后无法显示

如图,想显示的数据如图: ![图片说明](https://img-ask.csdn.net/upload/201808/07/1533622394_667478.png) 这数据是直接写死的,代码如下: ``` <body> <div id="line" style="width:600px; height: 400px;float:right"></div> </body> <script type="text/javascript"> $(function() { loaderBar(); }); function loaderBar() { var myChart = echarts.init(document.getElementById('line')); var dataAll = [ 389, 259, 262, 324, 232, 176, 196, 214, 133, 370 ]; var yAxisData = [ '原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10' ]; var option = { backgroundColor : '#0f375f', title : [ { text : "投诉原因TOP10", x : '10%', y : '1%', textStyle : { color : "#fff", fontSize : "14" } }, ], grid : [ { x : '20%', y : '7%', width : '45%', height : '90%' }, ], tooltip : { formatter : '{b} ({c})' }, xAxis : [ { gridIndex : 0, axisTick : { show : false }, axisLabel : { show : false }, splitLine : { show : false }, axisLine : { show : false } }, ], yAxis : [ { gridIndex : 0, interval : 0, data : yAxisData.reverse(), axisTick : { show : false }, axisLabel : { show : true }, splitLine : { show : false }, axisLine : { show : false, lineStyle : { color : "white" } }, } ], series : [ { name : '投诉原因TOP10', type : 'bar', xAxisIndex : 0, yAxisIndex : 0, barWidth : '45%', itemStyle : { normal : { color : 'blue' } }, label : { normal : { show : true, position : "right", textStyle : { color : "white" } } }, data : dataAll.sort(), }, ] }; myChart.setOption(option); </script> ``` 但是我把它动态用ajax调用的时候,就无法显示数据了,代码如下: ``` <body> <div id="line" style="width:600px; height: 400px;float:right"></div> </body> <script type="text/javascript"> $(function() { loaderBar(); }); function loaderBar() { var myChart = echarts.init(document.getElementById('line')); var dataAll = [/* 389, 259, 262, 324, 232, 176, 196, 214, 133, 370 */]; var yAxisData = [/* '原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10' */]; var option = { backgroundColor : '#0f375f', title : [ { text : "投诉原因TOP10", x : '10%', y : '1%', textStyle : { color : "#fff", fontSize : "14" } }, ], grid : [ { x : '20%', y : '7%', width : '45%', height : '90%' }, ], tooltip : { formatter : '{b} ({c})' }, xAxis : [ { gridIndex : 0, axisTick : { show : false }, axisLabel : { show : false }, splitLine : { show : false }, axisLine : { show : false } }, ], yAxis : [ { gridIndex : 0, interval : 0, /* data : yAxisData.reverse(), */ axisTick : { show : false }, axisLabel : { show : true }, splitLine : { show : false }, axisLine : { show : false, lineStyle : { color : "white" } }, } ], series : [ { name : '投诉原因TOP10', type : 'bar', xAxisIndex : 0, yAxisIndex : 0, barWidth : '45%', itemStyle : { normal : { color : 'blue' } }, label : { normal : { show : true, position : "right", textStyle : { color : "white" } } }, /* data : dataAll.sort(), */ }, ] }; /* myChart.setOption(option); */ var dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370]; var yAxisData = ['原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10']; $.ajax({ type : 'get', url : 'json/indexdata.json',//请求数据的地址 dataType : "json", //返回数据形式为json success : function(result) { //请求成功时执行该函数内容,result即为服务器返回的json对象 $.each(result.rankList, function(index, item) { yAxisData.push(item.name); //挨个取出类别并填入类别数组 dataAll.push(item.count); //挨个取出销量并填入销量数组 }); myChart.hideLoading(); /* alert(yAxisData); alert(dataAll); return ; */ option.yAxis.data=yAxisData; option.series.data=dataAll; myChart.setOption(option); } }); } </script> ``` 数据是能够拿到,但是现在图表无法显示出来。 ![图片说明](https://img-ask.csdn.net/upload/201808/07/1533622807_178708.png) 哪位大佬帮忙看看,感谢呀,江湖救急!

Echarts通过json从数据库中提去数据,XY轴不显示...

![图片说明](https://img-ask.csdn.net/upload/201704/10/1491815631_276391.png) 通过json: ![图片说明](https://img-ask.csdn.net/upload/201704/10/1491815726_426511.png) 以下为js代码 ``` var myChart = echarts.init(document.getElementById('main')) option = { color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : [tagId], axisTick: { alignWithLabel: true } } ], yAxis : [ { type : 'value' } ], series : [ { name:'直接访问', type:'bar', barWidth: '60%', data:[temperature] } ] }; var tagId=[];//标签id var temperature=[];//温度信息 $.ajax({ type:"post", async:true, //异步请求:同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行 url:"${ctx}/temperatures/tblTemperatureLast/allTem.do", data:{}, dataType:"json", success:function(result){ //请求成功时执行该函数内容,result即为服务器返回的json对象 if(result!=null&&result.length>0){ for(var i=0;i<result.length;i++){ tagId.push(result[i].tagId); temperature.push(result[i].temperature); } myChart.setOption({ xAxis:{ data:tagId }, series:[{ name:'温度', type:'bar', data:temperature }] }) } } }); myChart.setOption(option); ```

as3.0 json的问题,读取json

package { import com.adobe.serialization.json.JSON; import flash.display.Sprite; import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; public class getJSON extends Sprite { public function getJSON() { var urlLoader:URLLoader = new URLLoader(); urlLoader.load(new URLRequest("json_example.txt")); urlLoader.addEventListener(Event.COMPLETE, decodeJSONHandler); } private function decodeJSONHandler(event:Event):void { var jsonArray:Array = com.adobe.serialization.json.JSON.decode(URLLoader(event.target).data); } } }![图片说明](https://img-ask.csdn.net/upload/201506/11/1434015867_221568.jpg) 其中的json_example.txt内容是: [ { "href":'http://detail.tmall.com/item.htm?spm=a1z10.5-b.w4011-3014592695.95.W4nwSY&id=18065707931&rn=7d6c58742cca3a35419929331ddf6476&abbucket=2', "imgurl":'http://img.alicdn.com/bao/uploaded/i2/TB1XkkgFVXXXXcZaXXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg', "price":'398.00', "name":'水星家纺 纯棉四件套全棉床上用品简约床单被套特价 蓝语迷情', "id":1, } ] com.adobe.serialization.json.JSON和as,swf在同一目录下,求高手帮忙指导一下我代码出了什么问题。

js判断json中值放入Echarts中的问题

我想要得到tagPos=4的json数据该怎么做? ``` var temperature = []; var addTime = []; var remarks = []; var tagPos=[]; $.ajax({ type : "post", async : true, //异步请求:同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行 url : "${ctx}/temperature/tblTem/allTem", data : {}, dataType : "json", success : function(result) { //请求成功时执行该函数内容,result即为服务器返回的json对象 // alert('实时温度系统'); for (var i = 0; i < result.length; i++) { temperature.push(result[i].temperature); addTime.push(result[i].addTime); remarks.push(result[i].remarks); tagPos.push(result[i].tagPos); } myChart.setOption({ xAxis : [ { data : addTime }, { type : "category", data : remarks } ], series : [ { name : '当前温度', type : 'bar', data : temperature, //画直线 markLine : { data : [ { name : '起始', xAxis : 0, yAxis : 55 }, { name : '结束', value : 40, xAxis : 0, yAxis : 40 } ], } } ] }) } }); ```

如何用echarts图表获取后台json数据变成动态数据,

网站首页是用echarts图表布局的数据,但是是静态的,需要送后台获取json数据生成动态数据,新手不知道怎么搞?

【echarts示例】jQuery引入json文件后,网页显示不了数据?

``` <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> scatter3D</title> <script src="echarts.js"></script> <script src="http://echarts.baidu.com/dist/echarts-gl.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <div id="main" style="width:600px;height:500px;"></div> <script > var myChart = echarts.init(document.getElementById('main')); $.get('expectancy-table.json', function (data) { myChart.setOption({ grid3D: {}, xAxis3D: {}, yAxis3D: {}, zAxis3D: {}, dataset: { source: data }, series: [ { type: 'scatter3D', symbolSize: 2.5 } ] }) }); myChart.setOption(Option); </script> </body> </html> ``` 小白刚学习echarts,在用$.get方法引入json文件后,运行时网页无法显示数据(空白的),想请教大家这是什么原因?(在VS2012上编写的) 以下是网页的错误提示: ![图片说明](https://img-ask.csdn.net/upload/201812/12/1544591763_956397.jpg)

java后台生成string传到前台使用

前台是echarts。在java后台传到前台之后怎么处理就可以使用了。。 eval没反应。。 后台格式怎么写。

求charts的东莞和中山直辖区的JSON数据吗,谢谢

如题,找很久没找到,自己又没积分,求好心人 目前在做地图,就只差这两个城市的数据了, ε=(´ο`*)))唉

谁会echarts实现地图省市县的钻取分别单独显示

echarts地图现已实现省市县的钻取,可市到县的显示是在同一界面,怎样把市的去掉只显示县的

json字符串如何转echart格式

> 请问我要怎么将一个json的字符串转成echart画图的这种格式: ![图片说明](https://img-ask.csdn.net/upload/201905/08/1557329233_951885.png) ``` var builderJson = { "charts": { "人名1": 21376, "人名2": 2329, "人名3": 9027, ...... } }; ``` 我目前写的这个 不行啊 ``` $.ajax({ url: "http://****/api-index/?format=json", dataType: "json", success: function (data) { const row1 = []; for (k in data) { var name1 = data[k].student_name; var number1 = data[k].head_pose_up; var str1 = name1+': '+number1; console.log("str1: ", str1); row1.push(str1); } console.log("row1: ", row1); } }).fail(function (jqXHR, textStatus) { console.log("Ajax Error: ", textStatus); }); // }) ```

【Echarts】怎么转换成Echarts地图数据需要的格式

从后台得到json格式的字符串,需要把其中的数据显示到前台的地图上,发现Echarts中的data 需要的是下面这种格式的数据,这是什么格式,怎么转换,高分求解! ``` [ { name : "广州", value : 38 }, { name : "昆明", value : 39 }, { name : "沈阳分院", value : 50 }, { name : "长春分院", value : 51 }, { name : "成都", value : 58 }, { name : "西安", value : 61 }, { name : "重庆", value : 390 }, { name : "南京分院", value : 460 }, { name : "北京分院", value : 500 }, { name : "合肥", value : 229 } ] ```

关于json与echarts的问题

第一段代码如下 ``` var data = ${fns:toJson(tblTemperature.tblTemperatureHistoryList)}; ``` 返回数组形式的是 ``` var data = [{"id":"0000000000000000000000000000000000000000000000000000000000000014","isNewRecord":false,"remarks":"电源柜标签10","tagId":"E281CA0020000000000002DA","addTime":"2017-04-26 09:46:16","temperature":"30.0","tblTemperature":{"id":"1c3782ea07514577b04c1a87c3d824f0","isNewRecord":false}},{"id":"0000000000000000000000000000000000000000000000000000000000000019","isNewRecord":false,"remarks":"电源柜标签10","tagId":"E281CA0020000000000002DA","addTime":"2017-04-26 12:52:11","temperature":"40.0","tblTemperature":{"id":"1c3782ea07514577b04c1a87c3d824f0","isNewRecord":false}},{"id":"0000000000000000000000000000000000000000000000000000000000000020","isNewRecord":false,"remarks":"电源柜标签10","tagId":"E281CA0020000000000002DA","addTime":"2017-04-26 13:20:28","temperature":"20.0","tblTemperature":{"id":"1c3782ea07514577b04c1a87c3d824f0","isNewRecord":false}},{"id":"0000000000000000000000000000000000000000000000000000000000000027","isNewRecord":false,"remarks":"电源柜标签10","tagId":"E281CA0020000000000002DA","addTime":"2017-04-27 14:17:09","temperature":"50.0","tblTemperature":{"id":"1c3782ea07514577b04c1a87c3d824f0","isNewRecord":false}},{"id":"0000000000000000000000000000000000000000000000000000000000000040","isNewRecord":false,"remarks":"电源柜标签10","tagId":"E281CA0020000000000002DA","addTime":"2017-05-02 15:59:34","temperature":"70.0","tblTemperature":{"id":"1c3782ea07514577b04c1a87c3d824f0","isNewRecord":false}}]; ``` 我该如何把addTime和temperature放进Echarts的data中? ``` var temperature=[];//温度 var addTime=[];//获取时间 $.ajax({ type : "post", async : true,//异步请求 dataType : "json", url:"${ctx}/temperaturehistory/tblTemperature/axisTem?id=${tblTemperature.id}", data:{}, success : function(result) { temperature.push(result.temperature); addTime.push(result.addTime); myChart.setOption({ xAxis : [ { data : addTime } ], series : [ { data : temperature } ] }) } }); myChart.setOption(option); ``` 整个jsp也面 ``` <script type="text/javascript"> function addRow(list, idx, tpl, row){ $(list).append(Mustache.render(tpl, { idx: idx, delBtn: true, row: row })) } </script> </head> <body> <div id="main" style="width: 1500px; height: 600px;"></div> <div class="control-group"> <label class="control-label">子:</label> <div class="controls"> <table id="contentTable" class="table table-striped table-bordered table-condensed"> <thead> <tr> <th class="hide"></th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <shiro:hasPermission name="temperaturehistory:tblTemperature:edit"> <th width="10">&nbsp;</th> </shiro:hasPermission> </tr> </thead> <tbody id="tblTemperatureHistoryList"> </tbody> </table> <script type="text/template" id="tblTemperatureHistoryTpl">//<!-- <tr id="tblTemperatureHistoryList{{idx}}"> <td class="hide"> <input id="tblTemperatureHistoryList{{idx}}_id" name="tblTemperatureHistoryList[{{idx}}].id" type="hidden" value="{{row.id}}"/> <input id="tblTemperatureHistoryList{{idx}}_delFlag" name="tblTemperatureHistoryList[{{idx}}].delFlag" type="hidden" value="0"/> </td> <td> <input id="tblTemperatureHistoryList{{idx}}_tagId" name="tblTemperatureHistoryList[{{idx}}].tagId" type="text" value="{{row.tagId}}" maxlength="64" class="input-small "/> </td> <td> <input id="addTime" name="tblTemperatureHistoryList[{{idx}}].addTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate " value="{{row.addTime}}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/> </td> <td> <input id="temperature" name="tblTemperatureHistoryList[{{idx}}].temperature" type="text" value="{{row.temperature}}" class="input-small "/> </td> <td> <textarea id="tblTemperatureHistoryList{{idx}}_remarks" name="tblTemperatureHistoryList[{{idx}}].remarks" rows="4" maxlength="255" class="input-small ">{{row.remarks}}</textarea> </td> <shiro:hasPermission name="temperaturehistory:tblTemperature:edit"><td class="text-center" width="10"> {{#delBtn}}<span class="close" onclick="delRow(this, '#tblTemperatureHistoryList{{idx}}')" title="删除">&times;</span>{{/delBtn}} </td></shiro:hasPermission> </tr>//--> </script> <script type="text/javascript" src="/jeesite/static/js/echarts/echarts.js"></script> <script type="text/javascript" src="/jeesite/static/jquery/jquery-1.8.3.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')) option= { color: ['#ff3d3d', '#00a0e9', '#f603ff','#00b419','#5f52a0'], tooltip: { trigger: 'axis' }, legend: { x: 'left', padding: [10, 20,0,20], data:['温度'], }, grid: { left: '0', right: '3%', bottom: '3%', top:'13%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, splitLine:{//网格线 show: true, lineStyle:{ color:['#b1b1b1'], type:'dashed' } }, data: [] }, yAxis: { splitLine:{//网格线 show: true, lineStyle:{ color:['#b1b1b1'], type:'dashed' } } }, series: [ { name:'温度', type:'line', data:[], label: { normal: { show: true, position: 'top'//值显示 } } } ] }; var datai = ${fns:toJson(tblTemperature.tblTemperatureHistoryList)}; var temperature=[];//温度 var addTime=[];//获取时间 $.ajax({ type : "post", async : true,//异步请求 dataType : "json", data:{}, success : function(result) { for(var i =0;i<datai.length;i++){ for(var j=0;j<data[i].length;j++){ temperature.push(datai[i][j].temperatuer); addTime.push(datai[i][j].addTime); } } myChart.setOption({ xAxis :{ data:addTime }, series : { data:temperature } }) } }); myChart.setOption(option); //打印数据,用于测试数据是否得到 console.warn(temperature, addTime); </script> <script type="text/javascript"> var tblTemperatureHistoryRowIdx = 0, tblTemperatureHistoryTpl = $("#tblTemperatureHistoryTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,""); $(document).ready(function() { alert(1) var data = ${fns:toJson(tblTemperature.tblTemperatureHistoryList)}; for (var i=0; i<data.length; i++){ addRow('#tblTemperatureHistoryList', tblTemperatureHistoryRowIdx, tblTemperatureHistoryTpl, data[i]); tblTemperatureHistoryRowIdx = tblTemperatureHistoryRowIdx + 1; } }); </script> </div> </div> </body> ```

echarts 显示浙江省的详细地图(包括各地级市以及县、区),同时显示上海

此地图仅包括:浙江省内的各地级市、县、区;上海市 并实现以宁波市为中心点的进出口的集装箱走向路线示意

在ECharts官网上生成的地图怎么改变区域块的颜色!!

官方就生成了一个js文件啊,具体有人知道在哪里改么????????

echarts geoJson 地图

以下是我的html代码,option和GeoJson部分完全是抄官网http://echarts.baidu.com/doc/example/map6.html里面的代码,但是我不知道require GeoJson部分应该放在那里(怎么用),请大神指点下,谢谢 我现在这样hk的地图加载不出来 ``` <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--自适应device-width设备宽度--> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件(一般不用引入) <link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">--> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="./bootstrap/js/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="./echarts/doc/asset/js/bootstrap.min.js"></script> <title>ECharts</title> <style> </style> </head> <body> <div id="main" style="margin-top:10px;height:400px;width:100vw;"></div> <!-- 2、引入模块化单文件echarts.js --> <script src="./echarts/build/dist/echarts.js"></script> <!-- 3、模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js)--> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: './echarts/build/dist' } }); //-- 4、标签内动态加载echarts和所需图表,回调函数中可以初始化图表并驱动图表的生成--> // 使用 require( [ 'echarts', 'echarts/theme/helianthus', 'echarts/chart/map' ], function (ec,theme) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main'),theme); require('echarts/util/mapData/params').params.HK = { getGeoJson: function (callback) { $.getJSON('./echarts/doc/example/geoJson/HK_geo.json',callback); } }; var option = { title : { text : '香港18区人口密度 (2011)', subtext: '人口密度数据来自Wikipedia', sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12' }, tooltip : { trigger: 'item', formatter: '{b}<br/>{c} (p / km2)' }, toolbox: { show : true, orient : 'vertical', x: 'right', y: 'center', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, dataRange: { min: 800, max: 50000, text:['High','Low'], realtime: false, calculable : true, color: ['orangered','yellow','lightskyblue'] }, series : [ { name: '香港18区人口密度', type: 'map', mapType: 'HK', // 自定义扩展图表类型 itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: '中西区', value: 20057.34}, {name: '湾仔', value: 15477.48}, {name: '东区', value: 31686.1}, {name: '南区', value: 6992.6}, {name: '油尖旺', value: 44045.49}, {name: '深水埗', value: 40689.64}, {name: '九龙城', value: 37659.78}, {name: '黄大仙', value: 45180.97}, {name: '观塘', value: 55204.26}, {name: '葵青', value: 21900.9}, {name: '荃湾', value: 4918.26}, {name: '屯门', value: 5881.84}, {name: '元朗', value: 4178.01}, {name: '北区', value: 2227.92}, {name: '大埔', value: 2180.98}, {name: '沙田', value: 9172.94}, {name: '西贡', value: 3368}, {name: '离岛', value: 806.98} ], // 自定义名称映射 nameMap: { 'Central and Western':'中西区', 'Eastern':'东区', 'Islands':'离岛', 'Kowloon City':'九龙城', 'Kwai Tsing':'葵青', 'Kwun Tong':'观塘', 'North':'北区', 'Sai Kung':'西贡', 'Sha Tin':'沙田', 'Sham Shui Po':'深水埗', 'Southern':'南区', 'Tai Po':'大埔', 'Tsuen Wan':'荃湾', 'Tuen Mun':'屯门', 'Wan Chai':'湾仔', 'Wong Tai Sin':'黄大仙', 'Yau Tsim Mong':'油尖旺', 'Yuen Long':'元朗' }, // 文本位置修正 textFixed : { 'Yau Tsim Mong' : [-10, 0] }, // 文本直接经纬度定位 geoCoord : { 'Islands' : [113.95, 22.26] } } ] }; // 为echarts对象加载数据 myChart.setOption(option); window.onresize = myChart.resize; //jquery ba-resize监听他的container //$("#dcDataUseStatisticContainer").resize(function(){$(myChart).resize();}) } ); </script> </body> ```

echarts在IE11中个的兼容问题

使用echarts搭配AJAX显示柱状图表时,在IE11上页面第一次打开时回去请求 后台刷新数据,但是只请求一次就不会再请求,手动刷新页面都无效,除非关闭页面重新 打开 ,这种情况在谷歌,火狐测试下没有问题!!! 请问是兼容问题还是缓存?? 急!!!!! ``` $(function () { var myChart = echarts.init(document.getElementById('main')); myChart.showLoading({ text: "KM数据正在努力加载..." }); // 初始 option option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: ['考试通过', '学习时长/小时.分'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: [ ] } ], yAxis: [ { type: 'value' } ], toolbox: { show: true, feature: { //magicType: { type: ['line', 'bar'] }, dataView: { readOnly: false }, saveAsImage: {}, } }, series: [ ] }; myChart.setOption(option); var names = []; //盛放X轴坐标值 var nums = []; //盛放Y坐标值 var ntime=[0.15,1.32] $.get("Ashx/TestDemo.ashx?action=list", {}, function (data) { var msg = $.parseJSON(data); for (var i = 0; i < msg.length; i++) { names.push(msg[i].Sys_DeptName); nums.push(msg[i].count); } myChart.hideLoading(); myChart.setOption({ xAxis: [{ data: names }], series: [ { name: '考试通过', type: 'bar', data: nums }, { name: '学习时长/小时.分', type: 'bar', data: ntime }, ] }); }); }); ```

Echarts地图,想要使地图局部变大,该怎么做?

![武汉市地图](https://img-ask.csdn.net/upload/201708/09/1502268854_8335.png) 如上图,如果我想要将武汉地图的江岸区,武昌区...等中间几个面积较小区的面试变大,其余面积较大的地区面积变小,应该怎么做?是否需要改变json数据

echarts绘制关系图,是通过Ajax获取后台数据,结果关系图死活显示不出来,救救孩子吧!

前端代码如下 第一个Ajax获取的数据为 Map<String,Integer>类型 第二个Ajax获取的数据为 Map<Map<String,String>,Double> 死活画不出来关系图,救救孩子吧! ``` var getNodes = function(){ var result = []; var temp = {}; $.ajax({ url: "toFPtree2", type: "post", dataType: "json", contentType : "json", success : function(data){ for(var k in data){ temp = { name:k, value:data[k]}; result.push(temp); } } }); return result; }; var getLinks = function(){ var result = []; var temp = {}; $.ajax({ url: "toFPtree", dataType: "json", type: "post", success : function(data){ for (var k in data){ temp = {source : k.k, target : k[k], value : data[k]}; result.push(temp); } } }); return result; }; //生成节点所需的数据对象 var data1 = getNodes().map(function (node) { return { //x: node.x, //y: node.y, name: node.name, value : node.value, symbolSize: node.value//支持度越大,节点越大 }; }); //生成连线所需的数据对象 var link1 = getLinks().map(function (node) { return { source: node.source, target: node.target, value: node.value+'(可信度)', label: { normal: { show: false, formatter: function (x) { return node.value; } } }, lineStyle: { normal: { width : 20*(node.value - 0.4),//可信度越高,连线越粗 color : 'source' } } }; }); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); option = { title: { text: '关联分析结果' }, legend: { }, tooltip: { }, series : [ { type: 'graph', layout:'force',//'circular','force' focusNodeAdjacency:true,//当鼠标移动到节点上,突出显示节点以及节点的边和邻接节点 draggable: true,//指示节点是否可以拖动 roam: true, data: getNodes(), links: [], label: { normal: { show: true } }, edgeSymbol: ['none', 'arrow'], edgeSymbolSize: 12, edgeLabel: { normal: { textStyle: { fontSize: 8 } } }, force: { repulsion: 50, gravity:0.1, edgeLength: [100,400] }, itemStyle:{ normal: { borderColor: '#fff', borderWidth: 1, shadowBlur: 10, layoutAnimation: true } }, lineStyle: { normal: { curveness: 0.3 } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ```

大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了

大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

程序员写出这样的代码,能不挨骂吗?

当你换槽填坑时,面对一个新的环境。能够快速熟练,上手实现业务需求是关键。但是,哪些因素会影响你快速上手呢?是原有代码写的不够好?还是注释写的不够好?昨夜...

我说我不会算法,阿里把我挂了。

不说了,字节跳动也反手把我挂了。

带了6个月的徒弟当了面试官,而身为高级工程师的我天天修Bug......

即将毕业的应届毕业生一枚,现在只拿到了两家offer,但最近听到一些消息,其中一个offer,我这个组据说客户很少,很有可能整组被裁掉。 想问大家: 如果我刚入职这个组就被裁了怎么办呢? 大家都是什么时候知道自己要被裁了的? 面试软技能指导: BQ/Project/Resume 试听内容: 除了刷题,还有哪些技能是拿到offer不可或缺的要素 如何提升面试软实力:简历, 行为面试,沟通能...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

C语言的灵魂之指针

指针在C语言中非常的重要,也比较的难。你对指针的掌握程度也决定了你对C语言的掌握程度。在学习C语言的时候因当搞清楚取值运算符和取地址运算符各自的含义。我们这里就通过取值运算符和取地址运算符展开讲指针。

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

10个提升效率的编程好习惯

文章目录00、前言01、双屏02、手机静音03、只学一个 00、前言 最近有读者反映学习编程困难,想放弃,询问是不是真的有不适合编程的人?我结合最近自己的学习经历和思考以及最近在数据结构与算法的折磨下得出的一些心得。 唐代大臣魏徵的【谏太宗十思疏】中写道,“善始者实繁,克终者盖寡”。大概的意思是:如果有好多人同时做一件事情,善于开始去做的人是非常多的,但是能够把这件事做好的人就寥寥无几了。 这句千...

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

《Java经典编程365例》000:学妹的优秀成绩单

内容导航: 1、题目 2、代码实现 2.1、Student类 2.2、测试类Client 2.3、输出结果 前言 这是一个真实的故事,就发生在CSDN…其它学弟学妹开始抄吧! 1、题目 新建一个学生(Student),成员变量(属性)有: 姓名 性别 年龄(int) 成绩(double) 成员方法有两个: print()方法 功能为:输出名字 + 性别 + 年龄。

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

Python爬虫,高清美图我全都要(彼岸桌面壁纸)

爬取彼岸桌面网站较为简单,用到了requests、lxml、Beautiful Soup4

无代码时代来临,程序员如何保住饭碗?

编程语言层出不穷,从最初的机器语言到如今2500种以上的高级语言,程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新,一边面临由于许多代码已存在,程序员编写新应用程序时存在重复“搬砖”的现象。 无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法,它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中,可视化建模来组装和配置应用程序。这样一来,开发者直...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

6年开发经验女程序员,面试京东Java岗要求薪资28K

写在开头: 上周面试了一位女程序员,上午10::30来我们部门面试,2B哥接待了她.来看看她的简历: 个人简历 个人技能: ● 熟悉spring mvc 、spring、mybatis 等框架 ● 熟悉 redis 、rocketmq、dubbo、zookeeper、netty 、nginx、tomcat、mysql。 ● 阅读过juc 中的线程池、锁的源...

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

Java岗开发3年,公司临时抽查算法,离职后这几题我记一辈子

前几天我们公司做了一件蠢事,非常非常愚蠢的事情。我原以为从学校出来之后,除了找工作有测试外,不会有任何与考试有关的事儿。 但是,天有不测风云,公司技术总监、人事总监两位大佬突然降临到我们事业线,叫上我老大,给我们组织了一场别开生面的“考试”。 那是一个风和日丽的下午,我翘着二郎腿,左手端着一杯卡布奇诺,右手抓着我的罗技鼠标,滚动着轮轴,穿梭在头条热点之间。 “淡黄的长裙~蓬松的头发...

都前后端分离了,咱就别做页面跳转了!统统 JSON 交互

文章目录1. 无状态登录1.1 什么是有状态1.2 什么是无状态1.3 如何实现无状态1.4 各自优缺点2. 登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录 这是本系列的第四篇,有小伙伴找不到之前文章,松哥给大家列一个索引出来: 挖一个大坑,Spring Security 开搞! 松哥手把手带你入门 Spring Security,别再问密...

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

程序员是做全栈工程师好?还是专注一个领域好?

昨天,有位大一的同学私信我,说他要做全栈工程师。 我一听,这不害了孩子么,必须制止啊。 谁知,讲到最后,更确定了他做全栈程序员的梦想。 但凡做全栈工程师的,要么很惨,要么很牛! 但凡很牛的,绝不是一开始就是做全栈的! 全栈工程师听起来好听,但绝没有你想象的那么简单。 今天听我来给你唠,记得帮我点赞哦。 一、全栈工程师的职责 如果你学习编程的目的只是玩玩,那随意,想怎么学怎么学。...

立即提问
相关内容推荐