ECharts多个折线图动态获取json数据
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json

·
ECharts 多个折线图动态获取json数据
效果图如下:
一.html部分
<p id="TwoLineChart" style="width:100%; height:400px;"></p>
二.js部分
<script type="text/JavaScript">
function loadTwoLine() {
var myChart = echarts.init(document.getElementById('TwoLineChart'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['进件', '办结']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: {
type: 'category',
boundaryGap: false, //取消左侧的间距
data: []
},
yAxis: {
type: 'value',
splitLine: { show: false },//去除网格线
name: ''
},
series: [{
name: '进件',
type: 'line',
symbol: 'emptydiamond', //设置折线图中表示每个坐标点的符号 emptycircle:空心圆;emptyrect:空心矩形;circle:实心圆;emptydiamond:菱形
data: []
},
{
name: '办结',
type: 'line',
symbol: 'emptydiamond', //设置折线图中表示每个坐标点的符号 emptycircle:空心圆;emptyrect:空心矩形;circle:实心圆;emptydiamond:菱形
data: []
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组(实际用来盛放X轴坐标值)
var series1 = [];
var series2 = [];
$.ajax({
type: 'get',
url: 'json/echarts/line/lineTwo.txt',//请求数据的地址
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
$.each(result.jinJian, function (index, item) {
names.push(item.AREA); //挨个取出类别并填入类别数组
series1.push(item.LANDNUM);
});
$.each(result.banJie, function (index, item) {
series2.push(item.LANDNUM);
});
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
data: series1
},
{
data: series2
}]
});
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
};
loadTwoLine();
</script>
三.json格式如下:
{"jinJian":[{"AREA":"选址阶段","LANDNUM":190},{"AREA":"用地阶段","LANDNUM":200},{"AREA":"设计方案","LANDNUM":310},{"AREA":"工程规划","LANDNUM":290},{"AREA":"施工许可","LANDNUM":260},{"AREA":"销售许可","LANDNUM":300},{"AREA":"规划验收","LANDNUM":320},{"AREA":"综合验收","LANDNUM":290},{"AREA":"档案验收","LANDNUM":280}],"banJie":[{"AREA":"选址阶段","LANDNUM":100},{"AREA":"用地阶段","LANDNUM":120},{"AREA":"设计方案","LANDNUM":140},{"AREA":"工程规划","LANDNUM":160},{"AREA":"施工许可","LANDNUM":180},{"AREA":"销售许可","LANDNUM":200},{"AREA":"规划验收","LANDNUM":220},{"AREA":"综合验收","LANDNUM":240},{"AREA":"档案验收","LANDNUM":250}]}




适用于现代 C++ 的 JSON。
最近提交(Master分支:4 个月前 )
f06604fc
* :page_facing_up: bump the copyright years
Signed-off-by: Niels Lohmann <mail@nlohmann.me>
* :page_facing_up: bump the copyright years
Signed-off-by: Niels Lohmann <mail@nlohmann.me>
* :page_facing_up: bump the copyright years
Signed-off-by: Niels Lohmann <niels.lohmann@gmail.com>
---------
Signed-off-by: Niels Lohmann <mail@nlohmann.me>
Signed-off-by: Niels Lohmann <niels.lohmann@gmail.com> 26 天前
d23291ba
* add a ci step for Json_Diagnostic_Positions
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* Update ci.cmake to address review comments
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* address review comment
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix typo in the comment
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix typos in ci.cmake
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* invoke the new ci step from ubuntu.yml
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* issue4561 - use diagnostic positions for exceptions
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix ci_test_documentation check
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* address review comments
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix ci check failures for unit-diagnostic-postions.cpp
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* improvements based on review comments
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix const correctness string
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* further refinements based on reviews
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* add one more test case for full coverage
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* ci check fix - add const
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* add unit tests for json_diagnostic_postions only
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix ci_test_diagnostics
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix ci_test_build_documentation check
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
---------
Signed-off-by: Harinath Nampally <harinath922@gmail.com> 26 天前
更多推荐
所有评论(0)