1,echarts配合element ui的抽屉插件出现报错,上次解决方法是使用element ui 抽屉的open事件,让在打开事件重新加载,我们项目的需求是点击某个数据,要传递这条数据包含的其他值,让其显示;当时和后台对完数据发现会有报错,后来解决办法是在数据赋值结束,让他重新加载echarts

//和后台数据对接
method:{
echartsData(row){
this.$nextTick(() => {
this.$http
.get(`/bus/asset-flaw/chart/${row.assetId}?listType=${this.listType}`)
.then(res => {
this.tabData2= res.data.content.assetStatistics
//折线图的数据
this.lineData(row)
//重新加载echarts
this.line()
//窗口自适应
this.inits()
})
.catch(error => {
console.log(error.message)
})
})
},
line() {
this.$echarts.init(this.$refs.main).setOption(this.option3)
},
inits() {
let self = this //因为箭头函数会改变this指向,指向windows。所以先把this保存
window.onresize = function() {
self.$echarts.init(self.$refs.main).resize()
}
},
//给折线图赋值
lineData(row) {
this.option3.title.text = this.textContent + '趋势图' + '-' + row.startUrl
let asset = this.tabData2.map(x => x.needAttentionCount)
let findNewCount = this.tabData2.map(x => x.findNewCount)
let findRecurringCount = this.tabData2.map(x => x.findRecurringCount)
let findOpenCount = this.tabData2.map(x => x.findOpenCount)
this.option3.series[0].data = asset
this.option3.series[0].name = 'A'
this.option3.series[1].data = findNewCount
this.option3.series[1].name = 'B'
this.option3.series[2].data = findRecurringCount
this.option3.series[2].name = 'C'
this.option3.series[3].data = findOpenCount
this.option3.series[3].name = 'D'
let historyTime = this.tabData2.map(x => x.historyTime)
// 时间
this.option3.xAxis.data = historyTime
this.option3.legend.data = ['A','B','C','D']
},
}

2、让饼图中的百分比为0的不显示

  // 隐藏百分比为0的
lineHide(opt) {
opt.data.forEach(item => {
if (item.value === 0) {
item.value = null
}
})
},

  

  

最新文章

  1. docker 初探之简单安装 ----Windows10
  2. 第二天ci项目规划 前后台分离
  3. JS-Dom概念
  4. android简单登陆和注册功能实现+SQLite数据库学习
  5. Android 返回桌面的Intent
  6. 《day18_String练习_基本类型包装类_集合入门》
  7. windows7下python3.4.3 添加库路径(转)
  8. div的contenteditable和placeholder蹦出的火花
  9. 剑指offer--3题
  10. Light oj 1236 - Pairs Forming LCM (约数的状压思想)
  11. 【转】 Linux Core Dump 介绍
  12. Visual Studio如何删除多余的空行
  13. [转] gdb的基本工作原理
  14. java.util.List 的大小
  15. jquery正则常用的
  16. Docker rancher 部署
  17. java基础常见面试题,这是一篇超长的随笔!!!
  18. 微信跳转技术,浏览器唤起微信,weixin://dl/business/?ticket=
  19. Android系统应用Mms之Sms短信发送流程(Mms应用部分)二
  20. BZOJ.4727.[POI2017]Turysta(哈密顿路径/回路 竞赛图)

热门文章

  1. Kong03-Nginx、OpenResty、Kong 的基本概念和区别联系
  2. win10环境下配置openCV+pycharm+python3.6
  3. 蓝牙耳机没声音,用mac平台下的safari时
  4. 【TCP/IP网络编程】:03地址族与数据序列
  5. CSPS模拟99
  6. Asp.Net终于可以在龙芯服务器上运行啦:Jexus成功完成对国产系列CPU的适配
  7. 获取tomcat的deploy路径(用于存放用户上传的文件,如果不放在这会出现图片不能及时加载出来的问题!)
  8. JSP——底层原理
  9. Apache Spark 3.0 预览版正式发布,多项重大功能发布
  10. spring源码1