バグを再現して修正できるようにするには、以下の仕様に従って問題を説明してください。
シリーズのデータはバックグラウンドから取得する必要があります。ajaxリクエストが成功した後、チャートデータを更新する方法は?問題を確認するのに便利なように、デモアドレスを直接提供します。コードも記述されています。ページ。ページにタイマーを追加しました。時々データをリクエストしてからグラフを更新しますが、リクエストが成功した後、re-Tcharts.setOption(option);を再実行したい場合は、はまだ最後のデータに記載されている間違ったアドレスです。アドバイスしてください!
var maxpage = 1;
var dataPage = 1;
var option = {};
var dataArray ,xAxisArray,legendArray;
var Tcharts = echarts.init(document.getElementById('Tcharts'));
Tcharts.setOption({
title: {
//是否显示标题组件
show : false
},
tooltip: {
trigger: 'axis'
},
legend: {
data:[],
left : 'auto',
right : '0',
top : '0',
bottom : 'auto',
padding : 5,
itemWidth : 10,
itemGap : 20
},
grid: {
show : true,
left: '0',
right: '3%',
bottom: '0',
top: '15%',
containLabel: true,
borderColor : '#ffffff'
},
toolbox: {
show : false,
feature: {
saveAsImage: {}
}
},
xAxis: {
show : true,
type: 'category',
data: [],
nameGap : 10,
boundaryGap : false,
nameTextStyle : {
color : '#f2f2f2'
},
axisLabel : {
},
axisLine : {
show : false,
onZero : true,
lineStyle : {
color : '#999999',
fontWeight : 'bold'
}
},
splitLine : {
show : false
},
axisTick : {
lineStyle : {
color : '#ff5a2a',
width : 1
},
show : false //是否显示坐标轴刻度
}
},
yAxis: {
type: 'value',
axisLine : {
show : true,
onZero : true,
lineStyle : {
color : '#999999',
fontWeight : 'bold'
}
},
axisLabel : {
},
axisTick : {
show : false //是否显示坐标轴刻度
}
},
series: [],
textStyle : {
fontFamily : 'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif'
},
color : ['#ff5a2a','#a981f3','#1496ec','#55ea84'] //线条颜色列表
});
Tcharts.showLoading({
text: "图表数据正在努力加载..."
});
//withDate
function withDate(data){
dataArray = [];
xAxisArray = [];
legendArray = [];
var goods = data.goods,months = data.months;
if (data.msg === 1) {
for (var g = 0;g < goods.length;g++) {
dataArray.push(goods[g]);
legendArray.push({icon : 'circle',name : goods[g].name});
}
for (var m = 0;m < months.length;m++) {
xAxisArray.push(months[m]);
}
option = {
legend: {
data : legendArray
},
xAxis : {
data : xAxisArray
},
series : dataArray
}
//console.log(dataArray +":" + xAxisArray + ":" + legendArray);
Tcharts.setOption(option);
}else {
}
}
//ajax
function getDate(){
$.ajax({
type: "post",
url: "http://wy.woawin.com/verify/pricemovements",
data : {dataPage : dataPage},
dataType : "json",
async : true,
success : function(data){
Tcharts.hideLoading();
withDate(data);
dataPage ++;
maxpage = data.maxpage;
}
});
}
function fechDate(){
$.ajax({
type: "post",
url: "http://wy.woawin.com/verify/pricemovements",
data : {dataPage : dataPage},
dataType : "json",
async : true,
success : function(data){
Tcharts.hideLoading();
withDate(data);
dataPage ++;
maxpage = data.maxpage;
}
});
}
getDate();
window.setInterval(function(){
if( maxpage >= dataPage){
fechDate();
}else{
dataPage = 1;
fechDate();
}
},10000);
オンラインデモアドレスはデモアドレスです
setOption(option, true)
?
https://github.com/ecomfe/echarts/issues/3976の回答の1つが私の問題を解決しました。最初に、chartInstance.clear()、次にsetOption、直接setOption(option、true)は、更新します。私自身のテストの結果は、上記の2つの方法のどちらもマージの効果がないということです。 echartsの更新プロセスには問題があるようです。グラフの表示を適宜変更したいのですが、chartInstance.resizeがエッジにマークを残すたびに。信頼できる解決策があるかどうかも知りたいです
setOption(option, true)
?
この完全な更新では、dispatchActionを介して行った変更はなくなりました。 getOptionをアップデートにマージすることはお勧めしません。より良い解決策はありますか?
最も参考になるコメント
setOption(option, true)
?