一.html部分
<body>
<script src="js/echarts.min.js"></script>
<p id="TwoLineChart" style="width:100%; height:400px;"></p>
</body>
二.js部分
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 data_id=0;
var names = []; //类别数组（实际用来盛放X轴坐标值）
var series1 = [];
var series2 = [];
myChart.hideLoading(); //隐藏加载动画
3 画图动态部分
// 定时器设置
setInterval
(
function ()
{
// 画图更新
data_id=data_id+1;
if(data_id<8){
}
else{
//delete data_draw[0];
names.shift();// 移除最前面的
series1.shift();// 移除最前面的
series2.shift();// 移除最前面的
}
names.push(data_id); //挨个取出类别并填入类别数组
series1.push(data_id);
series2.push(data_id+2);
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
data: series1
},
{
data: series2
}]
});
},2000)
====================================
原网址 http请求 json解析
二.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
}
]
}
标签：echart,LANDNUM,show,true,AREA,画图,type,data From： https://www.cnblogs.com/gooutlook/p/18162046