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

 更新时间:2020年07月20日 14:26:59   作者:有时间织个毛衣  
这篇文章主要介绍了解决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数据二次渲染不成功的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3 setup语法糖之父子组件之间的传值方法

    vue3 setup语法糖之父子组件之间的传值方法

    父组件向子组件传值的时候,子组件是通过props来接收的,然后以变量的形式将props传递到setup语法糖果中使用,本文给大家介绍vue3 setup语法糖之父子组件之间的传值,感兴趣的朋友一起看看吧
    2023-12-12
  • 详解vue中$nextTick和$forceUpdate的用法

    详解vue中$nextTick和$forceUpdate的用法

    这篇文章主要介绍了详解vue中$nextTick和$forceUpdate的用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Vue.js中的组件系统

    Vue.js中的组件系统

    这篇文章主要介绍了Vue.js之组件系统,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue.js原理分析之nextTick实现详解

    Vue.js原理分析之nextTick实现详解

    这篇文章主要给大家介绍了关于Vue.js原理分析之nextTick实现的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Vue项目中props传值时子组件检测不到的问题及解决

    Vue项目中props传值时子组件检测不到的问题及解决

    这篇文章主要介绍了Vue项目中props传值时子组件检测不到的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue3+vite多项目多模块打包(基于vite-plugin-html插件)

    vue3+vite多项目多模块打包(基于vite-plugin-html插件)

    这篇文章主要给大家介绍了关于vue3+vite基于vite-plugin-html插件实现多项目多模块打包的相关资料,现在很多小伙伴都已经使用Vite+Vue3开发项目了,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • vue+elementui实现拖住滑块拼图验证

    vue+elementui实现拖住滑块拼图验证

    这篇文章主要为大家详细介绍了vue+elementui实现拖住滑块拼图验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 路由vue-route的使用示例教程

    路由vue-route的使用示例教程

    这篇文章主要介绍了路由vue-route的使用,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • 解决Vue项目中tff报错的问题

    解决Vue项目中tff报错的问题

    这篇文章主要介绍了解决Vue项目中tff报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 详解在vue开发中如何利用.env文件

    详解在vue开发中如何利用.env文件

    我们在 vue 项目的目录中经常看到 env 开头的文件,在文件内声明一些变量,这些变量就是一些配置变量,在不同环境下可使用的变量,本文我们将给大家介绍在vue开发中如何利用.env文件,需要的朋友可以参考下
    2023-10-10

最新评论