Echarts异步加载和更新
Echarts异步加载和更新
别团等shy哥发育
发布于 2023-02-25 09:10:42
发布于 2023-02-25 09:10:42
代码可运行
运行总次数：0
代码可运行
文章目录
一、前言
实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。
二、 代码实现步骤
1、引入插件
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>2、为 ECharts 准备 一个DOM 容器。
<div class="echarts" id="echarts_oilDailyAverage"></div>3、通过 echarts.init 方法初始化一个echarts 实例
var oilDailyAverageChart=echarts.init(document.getElementById('echarts_oilDailyAverage'));4、异步加载数据
在异步获取到数据之后，生成图形(这个我后端将集合以JSON格式传到前端)
oilDailyAverageChart.hideLoading();
var optionDailyAverage={ //加载数据图表
title:{
text:'日平均数据'
},
tooltip:{
show:true,
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'cross' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend:{
data:['日产油水平','日产液水平','平均日产水','平均日产气']
},
toolbox: { //工具栏
show: true, //显示工具栏组件
feature: { //各工具配置项
mark: {
show: true
},
dataView: {
show: true, //显示该工具
readOnly: false //是否显示不可编辑(只读)
},
magicType: { //动态类型切换
show: true, //是否显示该工具
type: ['line', 'bar'] //启用的动态类型
},
restore: { //配置项还原
show: true //是否显示该工具
},
saveAsImage: { //保存为图片
show: true //是否显示该工具
}
}
},
xAxis:{
type:'category',
data:time
},
yAxis:[{
position:'left',
type:'value',
axisLabel:{
formatter:'{value}吨'
}
},{
position:'right',
type:'value',
axisLabel:{
formatter:'{value}立方米'
}
}],
series:[{
name:'日产油水平',
type:'bar',
yAxisIndex:0,
data:oilDaily,
itemStyle: { //拐点显示值
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
},{
name:'日产液水平',
type:'bar',
yAxisIndex:0,
data:fluidDaily,
itemStyle: { //拐点显示值
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
},{
name:'平均日产水',
type:'bar',
yAxisIndex:0,
data:waterDaily,
itemStyle: { //拐点显示值
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
},{
name:'平均日产气',
type:'bar',
yAxisIndex:1,
data:gasDaily,
itemStyle: { //拐点显示值
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
}]
}; //先清除掉原来的数据
oilDailyAverageChart.clear(); //渲染 设置为true时不跟之前设置的option进行合并
oilDailyAverageChart.setOption(optionDailyAverage,true);
//自适应宽度
window.onresize=function(){
oilDailyAverageChart.resize();
};//判断传来的是否是空值(若是空值，显示正在加载)
function decideNull(time,oilDaily,fluidDaily,waterDaily,gasDaily,oilMonth,waterMonth,gasMonth,oilPress,casingPress,backPress,
waterContentMonth,oilGasRatio,createDays,oilSalinity,oilDynamic) {
if (time.length==0){
oilDailyAverageChart.showLoading();
numMonthChart.showLoading();
pressDataChart.showLoading();
percentageChart.showLoading();
dynamicSalinityChart.showLoading();
}else{
if (oilDaily.length==0||fluidDaily.length==0||waterDaily.length==0||gasDaily.length==0){
oilDailyAverageChart.showLoading();
}else if (oilMonth.length==0||waterMonth.length==0||gasMonth.length==0){
numMonthChart.showLoading();
}else if (oilPress.length==0||casingPress.length==0||backPress.length==0){
pressDataChart.showLoading();
}else if (waterContentMonth.length==0||oilGasRatio.length==0||createDays.length==0){
percentageChart.showLoading();
}else if (oilSalinity.length==0||oilDynamic.length==0){
dynamicSalinityChart.showLoading();
}
}
}三、渲染之后的效果
四、bug及解决方案
1、生成图形不适配外层div：
//自适应宽度
window.onresize=function(){
oilDailyAverageChart.resize();
};2、在数据更新时没有清除上一次的旧数据
第一种：可以采取在setOption后面加一个参数来解决问题：
oilDailyAverageChart.setOption(optionDailyAverage,true);第二种：在每次更新之前，先调用clear方法
清空当前实例，会移除实例中所有的组件和图表。
oilDailyAverageChart.clear();3、如果后端传递过来的集合为空，页面不变化
解决:这里我在js里面判空处理，若后端传递过来的对象为空，就调用
oilDailyAverageChart.showLoading();方法，让页面一直显示加载动画。
这不是最好的方法，其他大佬的方法也挺多的： 1、有的是数据为空时用一张特殊的图片替换掉渲染的图形，数据正常时就隐藏掉那张特殊图片。 2、 oilDailyAverageChart.showLoading();
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-03-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
![echarts饼图显示百分比[echarts字体模糊]](https://ask.qcloudimg.com/http-save/yehe-1011815/ad49cdfff9e7776bc1a563f6ea45e832.jpeg)
推荐阅读
相关推荐
使用百度图表ECharts
更多 >
腾讯云开发者
