怎么把json动态传入echarts

freemeboa 2018-05-31 09:42:42
这是我的页面的代码
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title></title>
<link rel="stylesheet" href="css/weui.css" />
<link rel="stylesheet" href="css/weui2.css" />
<link rel="stylesheet" href="css/icon.css" />
<link rel="stylesheet" href="css/main.css" />

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="js/zepto.min.js"></script>
<script src="js/picker.js"></script>
<script src="js/picker-city.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script>
$(document).ready(function() {
$(".tab li").click(function() {
$(".tab li").eq($(this).index()).addClass("on").siblings().removeClass('on');
$(".tab_content").hide().eq($(this).index()).show();
});
});
$(document).ready(function() {
$(".chart-tab1 li").click(function() {
$(".chart-tab1 li").eq($(this).index()).addClass("on").siblings().removeClass('on');
$(".chart-content1").hide().eq($(this).index()).show();
});
});
$(document).ready(function() {
$(".chart-tab2 li").click(function() {
$(".chart-tab2 li").eq($(this).index()).addClass("on").siblings().removeClass('on');
$(".chart-content2").hide().eq($(this).index()).show();
});
});
$(document).ready(function() {
$(".chart-tab3 li").click(function() {
$(".chart-tab3 li").eq($(this).index()).addClass("on").siblings().removeClass('on');
$(".chart-content3").hide().eq($(this).index()).show();
});
});
$(document).ready(function() {
$(".chart-tab4 li").click(function() {
$(".chart-tab4 li").eq($(this).index()).addClass("on").siblings().removeClass('on');
$(".chart-content4").hide().eq($(this).index()).show();
});
});
$(function() {
$("#text1").picker({
title: "选择车型",
cols: [{
textAlign: 'center',
values: ['红旗H5', '红旗H7', '奥迪Q5']
}]
});
});
$(function() {
$("#text2").picker({
title: "选择车型",
cols: [{
textAlign: 'center',
values: ['红旗H5', '红旗H7', '奥迪Q5']
}]
});
});
</script>
</head>

<body>
<ul class="tab">
<li class="on"><em>现生产数据</em></li>
<li><em>售后数据</em></li>
<li><em>问题跟踪数据</em></li>
</ul>
<div class="tab_content on">
<div class="weui_search_bar">
<input type="search" class="search-input" id='search' placeholder='单位' style="box-sizing:content-box" /><button class="weui_btn weui_btn_mini weui_btn_primary"><i class="icon icon-4"></i></button>
</div>
<div class="weui_cell my-weui_cell">
<div class="weui_cell_hd"><label for="" class="weui_label">车型:</label></div>
<div class="weui_cell_bd weui_cell_primary">
<input class="weui_input my-input" type="text" placeholder="请选择车型" value="" id='text1' />
<i class="icon-yjt"></i>
</div>
</div>
<div class="chart_bg">
<ul class="chart-tab1">
<li class="on"><em>日</em></li>
<li><em>周</em></li>
<li><em>月</em></li>
</ul>
<div class="chart-content1 on">
<div id="chart" class="chart2"></div>
</div>
<div class="chart-content1">
<div id="chart2" class="chart2"></div>
</div>
<div class="chart-content1">
<div id="chart3" class="chart2"></div>
</div>
</div>
<script type="text/javascript">
// var worldMapContainer = document.getElementById('chart');
//
// var resizeWorldMapContainer = function() {
// worldMapContainer.style.width = window.innerWidth + 'px';
// worldMapContainer.style.height = window.innerHeight - '113' + 'px';
// };
// //设置容器高宽
// resizeWorldMapContainer();
var arrt = [];
//var arrd = new Array();

var worldMapContainer = document.getElementById('chart');

var resizeWorldMapContainer = function() {
worldMapContainer.style.width = window.innerWidth + 'px';
};
//设置容器高宽
resizeWorldMapContainer();
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 指定图表的配置项和数据
option = {
title: {
text: '整车产品评审',
x: 'left',
y: '20px'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['目标3.0级', '实际值'],
x: 'center',
y: '60px'
},
grid: {
top: '100px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['12月11日', '12月12日', '12月13日', '12月14日', '12月15日']
},
yAxis: {
type: 'value'
},
series: [{
name: '目标3.0级',
type: 'line',
data: [2.5, 2.5, 2.5, 2.5, 2.5]
},
{
name: '实际值',
type: 'line',
data: [3.7, 3.5, 3.4, 3.8, 3.3]
}
]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<script type="text/javascript">
var worldMapContainer = document.getElementById('chart2');

var resizeWorldMapContainer = function() {
worldMapContainer.style.width = window.innerWidth + 'px';
};
//设置容器高宽
resizeWorldMapContainer();
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('chart2'));

// 指定图表的配置项和数据

option = {
title: {
text: '整车产品评审',
x: 'left',
y: '20px'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: ['未完成', '完成', '完成率'],
x: 'center',
y: '60px'
},
grid: {
top: '100px',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['第47周', '第48周', '第49周', '第50周', '第51周'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
min: 0,
max: 100,
interval: 10
},
{
type: 'value',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} %'
}
}
],
series: [{
name: '未完成',
type: 'bar',
data: [19, 23, 21, 24, 27]
},
{
name: '完成',
type: 'bar',
data: [44, 48, 52, 58, 63]
},
{
name: '完成率',
type: 'line',
yAxisIndex: 1,
data: [69.76, 67.61, 68.62, 70.73, 70]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var worldMapContainer = document.getElementById('chart3');

var resizeWorldMapContainer = function() {
worldMapContainer.style.width = window.innerWidth + 'px';
};
//设置容器高宽
resizeWorldMapContainer();
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('chart3'));

// 指定图表的配置项和数据

option = {
title: {
text: '整车产品评审',
x: 'left',
y: '20px'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: ['未完成', '完成', '完成率'],
x: 'center',
y: '60px'
},
grid: {
top: '100px',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['第47周', '第48周', '第49周', '第50周', '第51周'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
min: 0,
max: 100,
interval: 10
},
{
type: 'value',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} %'
}
}
],
series: [{
name: '未完成',
type: 'bar',
data: [19, 23, 21, 24, 27]
},
{
name: '完成',
type: 'bar',
data: [44, 48, 52, 58, 63]
},
{
name: '完成率',
type: 'line',
yAxisIndex: 1,
data: [69.76, 67.61, 68.62, 70.73, 70]
}
]
};
myChart.setOption(option);
</script>
</body>

</html>

这是我后台传过来的json串
{"result":{"errorField":"","rowIndex":-1,"resultObj":{"data"["@QMSpecialSerializer#List#ISDO#@",["actualvalue","day"],["0.14","2018-04-16 00:00:00"],["0.14","2018-04-16 00:00:00"],["0.14","2018-04-16 00:00:00"]],"targetvalue":"0.22"}},"exMessage":"","resultState":0,"upTime":32338411,"downTime":32338421,"serviceDistribute":"Y"}
...全文
1359 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
Hello World, 2018-05-31
  • 打赏
  • 举报
回复
后台传值过来后修改option,设置数据(根据需要可能要转换一下),然后myChart.setOption(option);就可以了

87,954

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧