解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)


Posted in Javascript onJuly 20, 2020

1.问题描述:在echarts弹框中嵌入echarts,在页面数据改变时,echarts视图不更新;

解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)

2.解决办法:

数据更新时以为drawLine()函数在updated()里面执行(这种情况之前碰到过),后来发现热更新之后视图更新了,所以跟周期函数没有关系;参考了一下网上的一些资料,发现可以用vue中的watch()函数来监听数据的更新,一旦数据更新了,那么就在watch()函数中调用drawLine()函数,发现视图更新了,完美解决。

解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)

补充知识:vue echarts line动态刷新数据组件

我就废话不多说了,大家还是直接看代码吧~

<template>
 <div class="echartLine-wrap">
  <div class="echartLine-title">
   <img src="@/assets/icon.png" alt />
   <div class="text">
    <div>{{echartData.title}}</div>
    <div>{{echartData.title2}}</div>
    <div>{{echartData.title3}}</div>
   </div>
  </div>
  <div ref="lineDom" id="myChart"></div>
 </div>
</template>

<script>
export default {
 name: "echartLine",
 props: {
  echartData: {
   type: Object,
   default: () => {}
  }
 },
 data() {
  return {
   img: require("../assets/time_bj.png")
  };
 },
 mounted() {
  setTimeout(() => {
   this.ButtomDrawLine();
  }, 500);
 },
 created() {},
 methods: {
  ButtomDrawLine() {
   let t = this;
   let myChart = this.$echarts.init(this.$refs.lineDom);
   myChart.setOption({
    title: { text: "" },
    tooltip: {
     trigger: "axis",
     borderRadius: 8, //边框圆角
     backgroundColor: "rgba(51,204,204,0)", //背景颜色(此时为默认色)
     formatter: function(params) {
      let value = params[0].value;
      let name = params[0].name;
      let html = ` 
       <div class='line-html'> 
        <span>
        <span class='active' style="background: ${t.echartData.itemStyle.color}"></span>
        ${value}
        </span>
        <span>${t.echartData.title3}</span>
        <span></span>
        <span>${name}</span>
       </div>
      `;
      return html;
     },
     textStyle: { color: "#ffff", align: "center", fontSize: 18 }
    },
    // legend: {
    //  left: 'right',
    //  textStyle: {//图例文字的样式
    //   color: '#ffffff',
    //   fontSize: 14
    //  },
    //  show: true,
    //  data: [
    //   {
    //    name: '审方数',
    //   },
    //   {
    //    name: '处方数',
    //   },
    //   {
    //    name: '会员数'
    //   },
    //   {
    //    name: '含麻登记',
    //   }
    //  ]
    // },
    /*toolbox: {
      feature: {
       dataView: {readOnly: false},
       restore: {},
       saveAsImage: {}
      },
      iconStyle:{
       normal:{
        color:'white',//设置颜色
       }
      }
     },*/
    xAxis: [
     {
      boundaryGap: true,
      type: "category",
      axisLine: {
       // x轴的颜色和宽度
       lineStyle: {
        color: "#0070C6"
       }
      },
      axisLabel: {
       show: true,
       textStyle: {
        color: "#fff"
       }
      },
      offset: 0,
      nameTextStyle: {
       align: "right"
      },
      axisTick: {
       alignWithLabel: true
      },
      data: t.echartData.XData
     }
    ],
    yAxis: [
     {
      type: "value",

      axisLabel: {
       show: true,
       textStyle: {
        color: "#fff"
       }
      },
      axisLine: {
       lineStyle: {
        color: "#0070C6"
       }
      },
      // 控制网格线是否显示
      splitLine: {
       show: false
      },
      min: 0,
      splitNumber: 5,
      boundaryGap: [0.2, 0.2],
      data: [0, 50, 100, 150]
     }
    ],
    grid: {
     top: "3.5%",
     left: "0",
     right: "0",
     bottom: "0",
     containLabel: true
    },
    series: [
     {
      name: t.echartData.title,
      type: "line",
      // smooth: true,

      showSymbol: true,
      symbolSize: 4, // 拐点图形大小
      cursor: "pointer",
      areaStyle: {
       normal: {
        color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
         {
          offset: 0,
          color: t.echartData.areaStyleColor.fromColor
         },
         {
          offset: 0.4,
          color: t.echartData.areaStyleColor.toColor
         }
         // {
         //  offset: 1,
         //  color: "rgba(63,227,236,0.00)"
         // }
        ])
        // ['rgba(63,227,236,0.3)'],
       }
      },
      itemStyle: {
       color: [t.echartData.itemStyle.color]
      },
      data: t.echartData.YData,
      icon:
       "image://http://file.dyzhkj.cn/null/1562315548784PyZcsO处方数.png"
     }
     // {
     //  name: '处方数',
     //  type: 'line',
     //  smooth: true,
     //  symbolSize: 1,     // 拐点图形大小
     //  areaStyle: {
     //   color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
     //    offset: 0,
     //    color: 'rgba(82,206,86,0.8)'
     //   }, {
     //    offset: .4,
     //    color: 'rgba(82,206,86,0.3)'
     //   }, {
     //    offset: 1,
     //    color: 'rgba(82,206,86,0.00)'
     //   }])
     //   // ['rgba(82,206,86,0.3)'],
     //  },
     //  itemStyle: {
     //   normal: {
     //    color: ['#52CE56'],
     //   }
     //  },
     //  data: [10, 5, 15, 5, 15, 20, 15, 20, 15, 5, 15, 10]
     // },
     // {
     //  name: '会员数',
     //  type: 'line',
     //  smooth: true,
     //  symbolSize: 1,     // 拐点图形大小
     //  areaStyle: {
     //   color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
     //    offset: 0,
     //    color: 'rgba(251,98,100,0.8)'
     //   }, {
     //    offset: .4,
     //    color: 'rgba(251,98,100,0.3)'
     //   }, {
     //    offset: 1,
     //    color: 'rgba(251,98,100,0.00)'
     //   }])
     //   // ['rgba(251,98,100,0.3)'],
     //  },
     //  itemStyle: {
     //   normal: {
     //    color: ['#FB6264'],
     //   }
     //  },
     //  data: [35, 45, 65, 25, 65, 44, 15, 40, 35, 46, 50, 25]
     // },
     // {
     //  name: '含麻登记',
     //  type: 'bar',
     //  itemStyle: {
     //   normal: {
     //    color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
     //     offset: 0,
     //     color: 'rgba(231,233,65,0.8)'
     //    }, {
     //     offset: .4,
     //     color: 'rgba(231,233,65,0.3)'
     //    }, {
     //     offset: 1,
     //     color: 'rgba(231,233,65,0.00)'
     //    }]),
     //    // ['rgba(231,233,65,0.5)'],
     //    barBorderColor: '#E7E941',      // 柱条边线
     //    barBorderRadius: 0,        // 柱条边线圆角,单位px,默认为0
     //    barBorderWidth: 1,           // 柱条边线线宽,单位px,默认为1
     //   }
     //  },
     //  barWidth: 15,//柱图宽度
     //  data: [5, 7, 3, 7, 5, 4, 5, 6, 4, 7, 5, 8]
     // }
    ]
   });
  }
 }
};
</script>

<style lang="less">
.line-html {
 width: 83.5px;
 height: 38px;
 text-align: center;
 background: url("../assets/line_btn_bj.png") no-repeat;
 background-size: 83.5px 38px;
 line-height: 42px;
 box-sizing: border-box;
 position: relative;
 font-size: 9px;
 padding-right: 2px;
 box-sizing: border-box;

 .active {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  margin-left: 3px;
  margin-bottom: 1.5px;
  box-sizing: border-box;
 }
 > span:nth-child(3) {
  background: url("../assets/time_bj.png") no-repeat;
  background-size: 38.5px 14px;
  position: absolute;
  top: -5px;
  left: 23px;
  right: 0;
  bottom: 0;

  box-sizing: border-box;
 }
 > span:nth-child(4) {
  position: absolute;
  top: -19px;
  left: 2px;
  right: 2px;
  bottom: 0;
  font-size: 8px;
  
   box-sizing: border-box;
 }
}
</style>
<style scoped lang="less">
.echartLine-wrap {
 width: 100%;
 height: 100%;
 .echartLine-title {
  width: 100%;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  padding-bottom: 13px;

  > img {
   width: 7.5px;
   height: 14px;
   margin-right: 8.5px;

   box-sizing: border-box;
  }
  > .text {
   text-align: left;
   display: flex;
   flex-direction: row;
   justify-content: start;
   font-size: 12px;
   line-height: 1;
   align-items: baseline;

   > div:nth-child(2) {
    font-size: 15px;
    margin: 0 5px 0 10px;
    font-weight: bold;

    box-sizing: border-box;
   }
  }
 }
 #myChart {
  width: 100%;
  height: 165px;
 }
}
</style>

调用

//html
 <echartLine :echartData="echartData" ref="echartData1" />

//index.js
 echartData: {
    title: "溶氧",
    title2: 3,
    title3: "毫克/升",
    XData: [1,2,3,4,5,6,7,8,9],
    YData: [12,34,56,66,65,77,12,11,33,44],

    areaStyleColor: {
     fromColor: "#1AB8F9",
     toColor: "rgba(63,227,236,0.1)"
    },
    itemStyle: {
     color: "#1AB8F9"
    }
   }

以上这篇解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中的ready函数冲突的解决方法
May 17 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 #Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 #Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 #Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 #Javascript
解决vue项目router切换太慢问题
Jul 19 #Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 #Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 #Javascript
You might like
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
PHP 动态随机生成验证码类代码
2010/04/09 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
校领导推荐信
2013/11/01 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
房屋买卖协议书
2014/04/10 职场文书
纪检监察建议书
2014/05/19 职场文书
求职信格式要求
2014/05/23 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
个人租房协议书
2014/11/28 职场文书
写给医院的感谢信
2015/01/22 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
小学新课改心得体会
2016/01/22 职场文书
速龙x4-860k处理器相当于i几
2022/04/20 数码科技