解决echarts数据二次渲染不成功的问题


Posted in Javascript onJuly 20, 2020

最近在使用echarts做报表需求,二次生成报表时数据合并,无法正确显示。

第一次渲染:

解决echarts数据二次渲染不成功的问题

第二次渲染:

解决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'
       }
      },
     },



    ],

   });
  }
}

以上这篇解决echarts数据二次渲染不成功的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript select下拉框操作常用方法
Nov 09 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
js实现自定义进度条效果
Mar 15 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
详细分析vue表单数据的绑定
Jul 20 #Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 #Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 #Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 #Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 #Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 #Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 #Javascript
You might like
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python版中国省市经纬度
2020/02/11 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
集团薪酬管理制度
2014/01/13 职场文书
教育学习自我评价
2014/02/03 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
python pyhs2 的安装操作
2021/04/07 Python
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技