ECHARTS页面空白,找不到原因

ksfantasy 2019-05-22 02:43:00
找不到问题出在哪里,
ECHARTS的页面代码:

GETE有json数据传回,
[{"btcid":"1","cash":100},{"btcid":"2","cash"200},{"btcid":"3","cash":400}]



@{
ViewBag.Title = "eline";
}

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>首页</title>
<script src="../js/mui.min.js"></script>
<link href="../css/mui.min.css" rel="stylesheet" />
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/vue.min.js"></script>
<style>
html,
body {
background-color: #efeff4;
}

.title {
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
padding-bottom: 51px;
}
</style>
</head>

<body>
<div class="mui-content">
<div class="title" id="main" style="width: 100%;height: 600px;">

</div>
</div>

<script src="../js/util.js"></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例



var myChart = null;



let data1 = [];



var option = {
title: { //图表标题
text: 'E图表'
},
tooltip: {
trigger: 'axis', //坐标轴触发提示框,多用于柱状、折线图中
/*
dataZoom: [
{
type: 'slider', //支持鼠标滚轮缩放
start: 0, //默认数据初始缩放范围为10%到90%
end: 100
},
{
type: 'inside', //支持单独的滑动条缩放
start: 0, //默认数据初始缩放范围为10%到90%
end: 100
}
],
legend: { //图表上方的类别显示
show: true,
data: ['btcid', 'cash']
},
color: [
'#FF3333', //温度曲线颜色
'#53FF53', //湿度曲线颜色

],
toolbox: { //工具栏显示
show: true,
feature: {
saveAsImage: {} //显示“另存为图片”工具
}
},
xAxis: { //X轴
type: 'categoty',
data: [] //先设置数据值为空,后面用Ajax获取动态数据填入
},
yAxis: [ //Y轴(这里我设置了两个Y轴,左右各一个)
{
//第一个(左边)Y轴,yAxisIndex为0
type: 'value',
/* max: 120,
min: -40, */
axisLabel: {
formatter: '{value}' //控制输出格式
}
}
],
series: [ //系列(内容)列表
{
name: 'cash',
type: 'line', //折线图表示(生成温度曲线)
symbol: 'emptyrect', //设置折线图中表示每个坐标点的符号;emptycircle:空心圆;emptyrect:空心矩形;circle:实心圆;emptydiamond:菱形
data: data1 //数据值通过Ajax动态获取
},

]
};




function refreshData() {


setInterval(() => {

$.getJSON({
url: "http://localhost/Home/GetE/"
success: (rep) => {
console.log(rep);
if (rep != null) {

for (var i = 0; i < len; i++) {
let dataItem = rep[i];

var obj1 = {

name: dataItem.btcid
value: [
dataItem.btcid
dataItem.cash
]
};
data1.push(obj1);


if (data1.length > 50) {
data1.shift();
}
}
myChart.setOption(option);

}
}
, error: (e) => {
console.log(JSON.stringify(e));
}
});
}, 1000);
}

</script>


</body>

</html>


...全文
3416 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
萌主_iii 2019-11-19
  • 打赏
  • 举报
回复
myChart.setOption(option, true);即可,这样不会合并之前的数据
ksfantasy 2019-05-27
  • 打赏
  • 举报
回复
目前解决了以上问题,但是data1的数据一直在add,也就是说数据库只有3个数据,但是图表每次接着画数据。 有没有办法让ECHART只画当前得到的数据,而不是无限接着画? 比如说,数据库只有3个数组,我想让ECHART无论VUE怎么刷新,都只画3个点, 而不是无数个重复的 3个点。 debug看了,data1下会不断添加数据库的3个数据,变成一堆数据 function refreshData() { setInterval(() => { $.getJSON({ url: "http://localhost/Home/GetE", success: (rep) => { console.log(rep); if (rep != null) { const len = rep.length; for (var i = 0; i < len; i++) { let dataItem = rep[i]; //Object.keys(data1).forEach(k => delete data1[k]) var obj1 = { name: dataItem.btcid, value: dataItem.cash }; data1.push(obj1); if (data1.length > 50) { data1.shift(); } } } myChart.setOption(option); } , error: (e) => { console.log(JSON.stringify(e)); } }); }, 10000); }
ksfantasy 2019-05-27
  • 打赏
  • 举报
回复
我做了断点,但是有错误eline:formatted:0:173 Uncaught TypeError: Cannot read property 'setOption' of null 最新代码贴一下: @{ ViewBag.Title = "eline"; } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>首页</title> <script src="../js/mui.min.js"></script> <link href="../css/mui.min.css" rel="stylesheet" /> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/echarts.min.js"></script> <script src="../js/vue.min.js"></script> <style> html, body { background-color: #efeff4; } .title { margin: 20px 15px 10px; color: #6d6d72; font-size: 15px; padding-bottom: 51px; } </style> </head> <body> <div class="mui-content"> <div class="title" id="main" style="width: 100%;height: 600px;"> </div> </div> <script src="../js/util.js"></script> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = null; let data1 = []; var option = { title: { //图表标题 text: 'E图表' }, tooltip: { trigger: 'axis', //坐标轴触发提示框,多用于柱状、折线图中 }, dataZoom: [ { type: 'slider', //支持鼠标滚轮缩放 start: 0, //默认数据初始缩放范围为10%到90% end: 100 }, { type: 'inside', //支持单独的滑动条缩放 start: 0, //默认数据初始缩放范围为10%到90% end: 100 } ], legend: { //图表上方的类别显示 show: true, data: ['btcid', 'cash'] }, color: [ '#FF3333', //温度曲线颜色 '#53FF53', //湿度曲线颜色 ], toolbox: { //工具栏显示 show: true, feature: { saveAsImage: {} //显示“另存为图片”工具 } }, xAxis: { //X轴 type: 'categoty', data: [] //先设置数据值为空,后面用Ajax获取动态数据填入 }, yAxis: [ //Y轴(这里我设置了两个Y轴,左右各一个) { //第一个(左边)Y轴,yAxisIndex为0 type: 'value', /* max: 120, min: -40, */ axisLabel: { formatter: '{value}' //控制输出格式 } } ], series: [ //系列(内容)列表 { name: 'cash', type: 'line', //折线图表示(生成温度曲线) symbol: 'emptyrect', //设置折线图中表示每个坐标点的符号;emptycircle:空心圆;emptyrect:空心矩形;circle:实心圆;emptydiamond:菱形 data: data1 //数据值通过Ajax动态获取 }, ] }; $(function () { refreshData(); }); function refreshData() { setInterval(() => { $.getJSON({ url: "http://localhost/Home/GetE", success: (rep) => { console.log(rep); if (rep != null) { const len = rep.length; for (var i = 0; i < len; i++) { let dataItem = rep[i]; var obj1 = { name: dataItem.btci, value: dataItem.cash }; data1.push(obj1); if (data1.length > 50) { data1.shift(); } } } myChart.setOption(option); } , error: (e) => { console.log(JSON.stringify(e)); } }); }, 1000); } </script> </body > </html > 请指点一下
stherix 2019-05-22
  • 打赏
  • 举报
回复
引用 2 楼 ksfantasy 的回复:
[quote=引用 1 楼 stherix 的回复:] 在 myChart.setOption(option); 这里设断点 看看里面的值是不是正确的
这个好像没办法调试,设置启动项目了,还是提示不能命中,我甚至加了script: $(function () { refreshData(); }); 请问要如何才能命中代码行调试啊?[/quote] 你要在浏览器里设断点 比如chrome
ksfantasy 2019-05-22
  • 打赏
  • 举报
回复
引用 1 楼 stherix 的回复:
在 myChart.setOption(option); 这里设断点 看看里面的值是不是正确的
这个好像没办法调试,设置启动项目了,还是提示不能命中,我甚至加了script: $(function () { refreshData(); }); 请问要如何才能命中代码行调试啊?
stherix 2019-05-22
  • 打赏
  • 举报
回复
在 myChart.setOption(option); 这里设断点 看看里面的值是不是正确的

111,096

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • AIGC Browser
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

让您成为最强悍的C#开发者

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