解决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分页代码(当前页码居中)
Sep 20 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
php统计数组元素个数的方法
2015/07/02 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
浅谈PHP封装CURL
2019/03/06 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
使用python实现扫描端口示例
2014/03/29 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Python OS模块实例详解
2019/04/15 Python
python中if及if-else如何使用
2020/06/02 Python
python import 上级目录的导入
2020/11/03 Python
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
八年级数学教学反思
2014/01/31 职场文书
岗位安全生产责任书
2014/07/28 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
mysql中整数数据类型tinyint详解
2021/12/06 MySQL