Version
5.33
Link to Minimal Reproduction
No response
Steps to Reproduce
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
myChart. setOption({
animation: false,
tooltip: {
trigger: 'axis',
confine: true,
showContent: false,
axisPointer: {
lineStyle: {
color: 'rgba(0, 0, 0, 0)',
}
},
},
xAxis: {
type: 'category',
boundaryGap: false,
},
yAxis: [
{
type: 'value',
position: 'right',
splitNumber: 4,
axisTick: {
inside: true,
},
axisLabel: {
inside: true,
showMinLabel: false,
},
splitLine: {
show: false,
}
}
],
series: [
{
data: [],
type: 'line',
symbol: 'circle',
showSymbol: false,
symbolSize: 10,
itemStyle: {
color: 'blue',
borderColor: 'yellow',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
},
label: {
show: true,
position: 'right',
distance: 10,
padding: 10,
fontSize: 12,
color: '#fff',
backgroundColor: 'rgba(0, 0, 0, .6)',
formatter: function (params) {
return [`价格 :{a|¥${params.data[0]}}`, `总量 :{a|${Math.round(params.data[1])}}`].join('\n')
},
rich: {
a: {
color: '#fff',
fontSize: '12',
fontWeight: 'bold',
lineHeight: '20',
},
}
},
lineStyle: {
color: '#008c00',
},
areaStyle: {
color: 'green',
opacity: .2,
},
},
{
//data11[0].reverse()
data: [],
type: 'line',
symbol: 'circle',
showSymbol: false,
symbolSize: 10,
itemStyle: {
color: 'blue',
borderColor: 'yellow',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
},
label: {
show: true,
position: 'left',
distance: 10,
padding: 10,
fontSize: 12,
color: '#fff',
backgroundColor: 'rgba(0, 0, 0, .6)',
formatter: function (params) {
return [`价格 :{a|¥${params.data[0]}}`, `总量 :{a|${Math.round(params.data[1])}}`].join('\n')
},
rich: {
a: {
color: '#fff',
fontSize: '12',
fontWeight: 'bold',
lineHeight: '20',
},
}
},
lineStyle: {
color: '#ee3523',
},
areaStyle: {
color: 'red',
opacity: .2,
},
},
]
});
//准备好统一的 callback 函数
const update_mychart = function (res) { //res是json格式的response对象
// 隐藏加载动画
myChart.hideLoading();
// 填入数据
myChart.setOption({
series: [
{
//data11[0].reverse()
data: res.data[0].reverse(),
},
]
});
};
// 首次显示加载动画
myChart.showLoading();
// 建立socket连接,等待服务器“推送”数据,用回调函数更新图表
$(document).ready(function() {
const namespace = '/test';
const socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
socket.on('server_response', function(res) {
update_mychart(res);
});
});
</script>
Current Behavior
x轴顺序错
误
Expected Behavior
如果更正
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
2条答案
按热度按时间50pmv0ei1#
@1163849662 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED
TITLE
[Bug] Dynamically updates the x-axis data misordered
wrrgggsh2#
This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.