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); 这里设断点 看看里面的值是不是正确的
echarts.min
echarts
基于Echarts图表在div动态切换时不显示的解决方式
主要介绍了基于Echarts图表在div动态切换时不显示的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
微信小程序Echarts图表组件使用方法详解
主要介绍了微信小程序Echarts图表组件使用方法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，
Vue解决echart在element的tab切换时显示不正确问题
最近在项目中遇到了这种情况，需要在tab控件上渲染多个echart图标，然后切换查看时，发现图表的宽度不正确 原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化。 网上的解决方案大多都是监听tab的切换事件，然后再根据切换的页面重新渲染echart组件，比较麻烦。 如下是个人的解决方法： 原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab 举例如下： <el-tab-pane na
CSS设计之页面滚动条出现时防止页面跳动的方法
一、水平居中布局与滚动条跳动的千年难题 当前web届，绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏~ 例如，大淘宝的首页： 然而，这种布局有一个存在一个影响用户体验的隐患。应该都知道，现代浏览器滚动条默认是overflow:auto类型的，也就是如果尺寸不足一屏，没有滚动条；超出，出现滚动条。于是，问题来了：     信息流页面，如新浪微博，是从上往下push渲染的。开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现，占据可用宽度，margin: 0 auto主体元素自然会做偏移——跳动产生。    JS交互，本
C#

111,096

社区成员

642,554

社区内容

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

加载中

查看更多榜单
社区公告

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

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

+ 用AI写文章