解决echarts数据二次渲染不成功的问题
作者:有时间织个毛衣 时间:2024-04-27 15:56:44
最近在使用echarts做报表需求,二次生成报表时数据合并,无法正确显示。
第一次渲染:
第二次渲染:
可以看到这里的echarts项的series变为2个(如上图),但是渲染后的效果series项还是和第一次相同。
解决办法:
应该设置mychart.setoption({},true);
原因:
chart.setOption(option,notMerge,lazyUpdate);
option:图表的配置项和数据
notMerge:可选,是否不跟之前设置的option进行合并,默认为false,即合并。(这里是导致二次渲染不成功的根本)
lazyUpdate:可选,在设置完option后是否不立即更新图表,默认为false,即立即更新。
补充知识:请求到数据后echarts图表的重新渲染问题
我就废话不多说了,大家还是直接看代码吧~
export default{
data(){
return{
//定义接受数据的空数组
柱状图
e2data1:[],
e2data2:[],
}
mounted() {
//加载图表
this.drawLine();
},
created(){
// 并发发送多个请求
axios.all([this.getTable1Data1()])
.then(axios.spread(function (acct, perms) {
console.log("所有数据请求成功");
}));
},
methods:{
getTable1Data1(){
let formData=new FormData;
formData.append("companyName",this.chose);
return axios.post('/StockFirstnfirstout/trendChart',formData)
.then(response=> {
let list=response.data.trendChartOfMonth;
//每次加载前清空接口数据
this.e2data1=[];
this.e2data2=[];
list.forEach((value,i)=>{
this.e2data1.push(value.count);
this.e2data2.push(value.saleMonth);
});
//重新渲染图表
myChart2.setOption({
xAxis: {
data:this.e2data2
},
series: [
{name:'柱状图',
data: this.e2data1
}]
});
console.log(this.e2data1);
console.log(this.e2data2);
})
.catch(error=> {
console.log(error);
});
},
// 基于准备好的dom,初始化echarts实例
//注意出myChart2的作用域
myChart2 = echarts.init(document.getElementById('zhLine'));
myChart2.setOption({
title: {text: '本月累计趋势图',
//
textStyle:{
color:'#000', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
fontFamily:'Microsoft yahei', //字体
fontSize:16, //大小
align:'center', //水平对齐
lineHeight:50
},
// title位置
padding:[20, 0, 20, 30]
},
legend: {
data:['环比',],
//折点提示位置
left:'90%',
top:'5%'
},
grid:{ //显示数据的图表位于当前canvas的坐标轴
x:50,
y:80,
borderWidth:1,
},
tooltip: {
trigger: 'axis',
backgroundColor : '#ccc',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis : [
{ name:'日期',
type : 'category',
data : this.e2data2,
axisLine: {
lineStyle: {
color: '#999'
}
},
axisTick:{
show:false
},
},
],
yAxis : [
{
type : 'value',
name:'台数',
interval: 30,
scale: true,
show:true,
splitLine:{
show:false
},
axisTick:{
show:false
},
nameTextStyle:{
padding: [0,0,0,-20],
color:'#999999'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
},
{
type: 'value',
// name: '温度',
min: 0,
//取消y轴网格
interval: 25,
scale: true,
show:true,
splitLine:{
show:false
},
axisTick:{
show:false
},
axisLine: {
lineStyle: {
color: '#999'
}
},
}
],
series : [
{
name:'环比',
type:'line',
stack: '总量',
color:'#fccd35',
symbolSize: 8,
//按右边y轴显示
yAxisIndex: 1,
data:[30, 15, 42, 65, 38, 40, 78,50]
},
{
name:'柱状图',
type:'bar',
//柱状图宽度
barWidth: '13%',
data:this.e2data1,
itemStyle:{
normal:{
color:'#84d1d3'
}
},
},
],
});
}
}
来源:https://blog.csdn.net/chenjin_chenjin/article/details/82018156
标签:echarts,数据,渲染
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
vue中provide和inject的用法及说明(vue组件爷孙传值)
2024-05-21 10:15:26
![](https://img.aspxhome.com/file/2023/6/125296_0s.png)
用Python可视化新冠疫情数据
2021-10-14 06:06:39
![](https://img.aspxhome.com/file/2023/6/76906_0s.jpg)
只需要这一行代码就能让python计算速度提高十倍
2023-01-30 15:16:02
![](https://img.aspxhome.com/file/2023/4/89284_0s.png)
给年青设计师们的十条经验教训
2011-03-31 17:09:00
简单理解Python中的装饰器
2021-06-18 01:44:21
SQL语句练习实例之一——找出最近的两次晋升日期与工资额
2024-01-19 06:19:50
解析:MySQL对“服务器端光标”的限制
2008-11-27 16:22:00
SqlServer如何通过SQL语句获取处理器(CPU)、内存(Memory)、磁盘(Disk)以及操作系统相关信息
2024-01-17 20:18:16
![](https://img.aspxhome.com/file/2023/8/94448_0s.png)
Go 语言入门之Go 计时器介绍
2024-05-25 15:16:04
基于Python实现绘制属于你的世界地图
2021-11-30 16:55:50
![](https://img.aspxhome.com/file/2023/8/101288_0s.jpg)
mysql 时间转换函数的使用方法第1/2页
2024-01-21 22:09:40
深入理解Python中的super()方法
2022-11-07 05:10:45
python中关于数据类型的学习笔记
2023-10-30 09:31:29
![](https://img.aspxhome.com/file/2023/0/111930_0s.png)
小议javascript设计模式
2009-10-09 13:31:00
浅谈对pytroch中torch.autograd.backward的思考
2023-10-28 13:21:44
如何通过IntersectionObserver实现懒加载
2024-04-16 08:44:41
MySQL锁阻塞的深入分析
2024-01-20 12:47:22
![](https://img.aspxhome.com/file/2023/4/71104_0s.png)
Go Struct结构体的具体实现
2023-09-02 04:54:01
![](https://img.aspxhome.com/file/2023/1/101041_0s.png)
select @@identity的应用(得到刚插入数据的ID)
2009-09-10 11:24:00
一篇文章带你搞懂Python类的相关知识
2021-06-01 19:31:54
![](https://img.aspxhome.com/file/2023/8/131008_0s.jpg)