解决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 相关文章推荐
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
原生JS实现飞机大战小游戏
Jun 09 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
通达OA公共代码 php常用检测函数
2011/12/14 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
python中的函数用法入门教程
2014/09/02 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python isinstance函数介绍
2015/04/14 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
网页设计个人找工作求职信
2013/11/28 职场文书
生产助理岗位职责
2014/06/18 职场文书
公司离职证明标准格式
2014/11/18 职场文书
公司员工安全协议书
2014/11/21 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
MySQL数据库事务的四大特性
2022/04/20 MySQL