解决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 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
Angular工具方法学习
Dec 26 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
基于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
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
python利用beautifulSoup实现爬虫
2014/09/29 Python
python实现中文分词FMM算法实例
2015/07/10 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
python学生信息管理系统(完整版)
2020/04/05 Python
python实现键盘控制鼠标移动
2020/11/27 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
如何基于python实现不邻接植花
2020/05/01 Python
Python内置函数property()如何使用
2020/09/01 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
最热门的自我评价
2013/12/30 职场文书
建筑工地质量标语
2014/06/12 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL