找不到問題出在哪里，
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="https://bbs.csdn.net/js/mui.min.js"></script>
<link href="https://bbs.csdn.net/css/mui.min.css" rel="stylesheet" />
<script src="https://bbs.csdn.net/js/jquery-3.3.1.min.js"></script>
<script src="https://bbs.csdn.net/js/echarts.min.js"></script>
<script src="https://bbs.csdn.net/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="https://bbs.csdn.net/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>
uj5u.com熱心網友回復：
在myChart.setOption(option);
這里設斷點
看看里面的值是不是正確的
uj5u.com熱心網友回復：
這個好像沒辦法除錯，設定啟動專案了，還是提示不能命中，我甚至加了script:
$(function () {
refreshData();
});
請問要如何才能命中代碼行除錯啊？
uj5u.com熱心網友回復：
你要在瀏覽器里設斷點
比如chrome
uj5u.com熱心網友回復：
我做了斷點，但是有錯誤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="https://bbs.csdn.net/js/mui.min.js"></script>
<link href="https://bbs.csdn.net/css/mui.min.css" rel="stylesheet" />
<script src="https://bbs.csdn.net/js/jquery-3.3.1.min.js"></script>
<script src="https://bbs.csdn.net/js/echarts.min.js"></script>
<script src="https://bbs.csdn.net/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="https://bbs.csdn.net/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 >
請指點一下
uj5u.com熱心網友回復：
目前解決了以上問題，但是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);
}
uj5u.com熱心網友回復：
myChart.setOption(option, true);即可，這樣不會合并之前的資料轉載請註明出處，本文鏈接：https://www.uj5u.com/net/96188.html
標籤：C#
上一篇：C#面向物件-多型