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 年多之前 回复

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

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

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

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

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

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

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

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

在浏览器的属性--目标里添加权限,比如
"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从数据库中提去数据,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在同一目录下,求高手帮忙指导一下我代码出了什么问题。

【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)

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) 哪位大佬帮忙看看,感谢呀,江湖救急!

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 } ], } } ] }) } }); ```

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

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

【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> ```

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

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

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官网上生成的地图怎么改变区域块的颜色!!

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

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如何点击div改变图的大小?

我想做到点击后放大,再点击缩小,请问该怎么做? 附上jsp ``` <%@ page contentType="text/html;charset=UTF-8"%> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head> <title>温度管理</title> </head> <div id="d" style="width: 150px; height: 68px;" ></div> <body> <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('d')) option = { title : { text : '实时温度', textStyle : { fontSize : 20, color : [ '#3398DB' ], } }, //颜色渐变 visualMap : { min : 0, max : 80, left : 'left', top : 'bottom', text : [ '高', '低' ], // 文本,默认为数值文本 calculable : true, inRange : { color : [ '#00FF00', '#32CD32', '#2E8B57', '#FF0000', '#B22222', '#8B0000' ] } }, color : [ '#3398DB' ], tooltip : { trigger : 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, feature : { mark : { show : true }, dataView : { show : true, readOnly : false }, restore : { show : true }, savaAsImage : { shwo : true } } }, grid : { left : '3%', right : '4%', bottom : '3%', containLabel : true }, grid : { y2 : 140 }, xAxis : [ { type : 'category', data : [], axisTick : { alignWithLabel : true }, axisLabel : { interval : 0, rotate : -30, } }, { type : 'category', data : [], axisTick : { alignWithLabel : true }, axisLabel : { interval : 0, rotate : -30, } } ], legend : { data : [ '当前温度' ] }, yAxis : [ { type : 'value' } ], series : [ { name : "", type : 'bar', barWidth : '60%', //顶部显示温度'top' label : { normal : { show : true, position : 'top' } }, data : [] } ] }; var tagId = []; var temperature = [];//温度信息 var addTime = [];//读取时间 var remarks = [];//备注信息 $.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); tagId.push(result[i].tagId); } myChart.setOption({ xAxis : [ { data : addTime }, { type : "category", data : remarks } ], series : [ { type : 'bar', data : temperature, //画直线 markLine : { data : [ { name : '起始', xAxis : 0, yAxis : 55 }, { name : '结束', value : 40, xAxis : 0, yAxis : 40 } ], } } ] }) } }); myChart.setOption(option); //打印数据 console.warn(remarks, addTime, temperature); </script> <script language="JavaScript"> function myrefresh() { window.location.reload(); } setTimeout('myrefresh()', 60000); //指定1分钟刷新一次 </script> </body> </html> ```

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

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

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

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

关于Echarts饼图大量数据传输

![图片说明](https://img-ask.csdn.net/upload/201901/04/1546595415_820752.png) ![图片说明](https://img-ask.csdn.net/upload/201901/04/1546595421_155206.png) 声明一下环境: 我们用的工具是 QlikSense ,这是在调用echarts的时候的问题。 如图:由于数据量大,我在接收数据时,我把数据存在一个数组 存储代码如下 data 的两个个元素分别是两个字段数据。 这里把两个元素的数据分别存储在两个数组中。 var data_w = new Array(); var data_v1 = new Array(); for(var i=0;i<data.length;i++){ data_w[i] = data[i][0]; data_v1[i] = data[i][1]; }; 我这里想在echarts的 data 这里这么做: data[{value:data_w,name:data_v1}] 可是最后结果却不能出来,我查看了他转换后的数据 大概样式就是 : data_w_中的全部数据 : data_v1 _中的全部数据 我试过遍历出数据作为一个数组,结果不行,可能代码问题。 我想问一下各路大神是怎么在饼图中传输数据的。 换句话说,这种情况只允许 JSON 格式吗? 用其他引用变量的方式不可以吗??

Echart 的热力图怎么用!求好心人教教

如题,看了echart的热力图代码,根本不会用啊。谁能指条明路

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...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

点沙成金:英特尔芯片制造全过程揭密

“亚马逊丛林里的蝴蝶扇动几下翅膀就可能引起两周后美国德州的一次飓风……” 这句人人皆知的话最初用来描述非线性系统中微小参数的变化所引起的系统极大变化。 而在更长的时间尺度内,我们所生活的这个世界就是这样一个异常复杂的非线性系统…… 水泥、穹顶、透视——关于时间与技艺的蝴蝶效应 公元前3000年,古埃及人将尼罗河中挖出的泥浆与纳特龙盐湖中的矿物盐混合,再掺入煅烧石灰石制成的石灰,由此得来了人...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

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

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

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

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

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

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

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

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

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

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

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

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

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

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

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

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

为什么你不想学习?只想玩?人是如何一步一步废掉的

不知道是不是只有我这样子,还是你们也有过类似的经历。 上学的时候总有很多光辉历史,学年名列前茅,或者单科目大佬,但是虽然慢慢地长大了,你开始懈怠了,开始废掉了。。。 什么?你说不知道具体的情况是怎么样的? 我来告诉你: 你常常潜意识里或者心理觉得,自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间,还有无限的可能,自己还能逆风翻盘,只不是自己还没开始罢了,自己以后肯定会变得特别厉害...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

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

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

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

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

面试:第十六章:Java中级开发(16k)

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

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

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

你打算用Java 8一辈子都不打算升级到Java 14,真香

我们程序员应该抱着尝鲜、猎奇的心态,否则就容易固步自封,技术停滞不前。

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

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

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

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

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

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

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

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

《经典算法案例》01-08:如何使用质数设计扫雷(Minesweeper)游戏

我们都玩过Windows操作系统中的经典游戏扫雷(Minesweeper),如果把质数当作一颗雷,那么,表格中红色的数字哪些是雷(质数)?您能找出多少个呢?文中用列表的方式罗列了10000以内的自然数、质数(素数),6的倍数等,方便大家观察质数的分布规律及特性,以便对算法求解有指导意义。另外,判断质数是初学算法,理解算法重要性的一个非常好的案例。

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

一文带你入门Java Stream流,太强了

两个星期以前,就有读者强烈要求我写一篇 Java Stream 流的文章,我说市面上不是已经有很多了吗,结果你猜他怎么说:“就想看你写的啊!”你看你看,多么苍白的喜欢啊。那就“勉为其难”写一篇吧,嘻嘻。 单从“Stream”这个单词上来看,它似乎和 java.io 包下的 InputStream 和 OutputStream 有些关系。实际上呢,没毛关系。Java 8 新增的 Stream 是为...

立即提问
相关内容推荐