解決echarts vue數(shù)據(jù)更新,視圖不更新問(wèn)題(echarts嵌在vue彈框中)
更新時(shí)間：2020年07月20日 09:22:08 作者：baoyingltt
這篇文章主要介紹了解決echarts vue數(shù)據(jù)更新,視圖不更新問(wèn)題(echarts嵌在vue彈框中)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
1.問(wèn)題描述：在echarts彈框中嵌入echarts，在頁(yè)面數(shù)據(jù)改變時(shí)，echarts視圖不更新；
2.解決辦法：
數(shù)據(jù)更新時(shí)以為drawLine()函數(shù)在updated()里面執(zhí)行（這種情況之前碰到過(guò)），后來(lái)發(fā)現(xiàn)熱更新之后視圖更新了，所以跟周期函數(shù)沒(méi)有關(guān)系；參考了一下網(wǎng)上的一些資料，發(fā)現(xiàn)可以用vue中的watch()函數(shù)來(lái)監(jiān)聽(tīng)數(shù)據(jù)的更新，一旦數(shù)據(jù)更新了，那么就在watch()函數(shù)中調(diào)用drawLine()函數(shù)，發(fā)現(xiàn)視圖更新了，完美解決。
補(bǔ)充知識(shí)：vue echarts line動(dòng)態(tài)刷新數(shù)據(jù)組件
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
<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)", //背景顏色（此時(shí)為默認(rèn)色）
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: '審方數(shù)',
// },
// {
// name: '處方數(shù)',
// },
// {
// name: '會(huì)員數(shù)'
// },
// {
// name: '含麻登記',
// }
// ]
// },
/*toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
},
iconStyle:{
normal:{
color:'white',//設(shè)置顏色
}
}
},*/
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"
}
},
// 控制網(wǎng)格線是否顯示
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, // 拐點(diǎn)圖形大小
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處方數(shù).png"
}
// {
// name: '處方數(shù)',
// type: 'line',
// smooth: true,
// symbolSize: 1, // 拐點(diǎn)圖形大小
// 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: '會(huì)員數(shù)',
// type: 'line',
// smooth: true,
// symbolSize: 1, // 拐點(diǎn)圖形大小
// 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，默認(rèn)為0
// barBorderWidth: 1, // 柱條邊線線寬，單位px，默認(rèn)為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>
調(diào)用
//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數(shù)據(jù)更新,視圖不更新問(wèn)題(echarts嵌在vue彈框中)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)導(dǎo)出word文檔的示例詳解
這篇文章主要為大家詳細(xì)介紹了Vue如何使用第三方庫(kù)file-saver和html-docx-js實(shí)現(xiàn)導(dǎo)出word文檔的效果,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
基于Vue中this.$options.data()的this指向問(wèn)題
這篇文章主要介紹了基于Vue中this.$options.data()的this指向問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
本文總結(jié)了在Vue2項(xiàng)目中使用element-ui的el-table組件在彈窗中展示數(shù)據(jù),并實(shí)現(xiàn)基礎(chǔ)的勾選功能,內(nèi)容包括如何設(shè)置row-key、使用reserve-selection屬性、修改數(shù)據(jù)獲取函數(shù)以支持跨頁(yè)勾選以及如何在關(guān)閉彈窗時(shí)清理selection,感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要為大家介紹了vue組合式API淺顯入門(mén)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別
這篇文章主要介紹了詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue開(kāi)發(fā)中遇到的問(wèn)題總結(jié)
在本篇文章里小編給大家分享的是關(guān)于vue開(kāi)發(fā)中遇到的問(wèn)題總結(jié)，有興趣的朋友們可以學(xué)習(xí)參考下。2020-04-04
Vue與compressor.js實(shí)現(xiàn)高效文件壓縮的方法
本文將介紹基于 Vue 框架和 compressor.js 的上傳時(shí)文件壓縮實(shí)現(xiàn)方法,通過(guò)在上傳過(guò)程中對(duì)文件進(jìn)行壓縮,減小文件大小,提升上傳速度,為用戶創(chuàng)造更快捷、高效的上傳體驗(yàn),感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue.js 帶下拉選項(xiàng)的輸入框(Textbox with Dropdown)組件
這篇文章主要介紹了Vue.js 帶下拉選項(xiàng)的輸入框(Textbox with Dropdown)組件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了vue+freemarker中遇到的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue 2.0組件與v-model的相關(guān)資料，文中介紹的非常詳細(xì)，本文適合初學(xué)組件編寫(xiě)的同學(xué)閱讀，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-03-03