解決echarts vue數(shù)據(jù)更新,視圖不更新問題(echarts嵌在vue彈框中)
更新時間：2020年07月20日 09:22:08 作者：baoyingltt
這篇文章主要介紹了解決echarts vue數(shù)據(jù)更新,視圖不更新問題(echarts嵌在vue彈框中)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1.問題描述：在echarts彈框中嵌入echarts，在頁面數(shù)據(jù)改變時，echarts視圖不更新；
2.解決辦法：
數(shù)據(jù)更新時以為drawLine()函數(shù)在updated()里面執(zhí)行（這種情況之前碰到過），后來發(fā)現(xiàn)熱更新之后視圖更新了，所以跟周期函數(shù)沒有關(guān)系；參考了一下網(wǎng)上的一些資料，發(fā)現(xiàn)可以用vue中的watch()函數(shù)來監(jiān)聽數(shù)據(jù)的更新，一旦數(shù)據(jù)更新了，那么就在watch()函數(shù)中調(diào)用drawLine()函數(shù)，發(fā)現(xiàn)視圖更新了，完美解決。
補充知識：vue echarts line動態(tài)刷新數(shù)據(jù)組件
我就廢話不多說了，大家還是直接看代碼吧~
<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)", //背景顏色（此時為默認(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: '會員數(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, // 拐點圖形大小
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, // 拐點圖形大小
// 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: '會員數(shù)',
// 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，默認(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ù)更新,視圖不更新問題(echarts嵌在vue彈框中)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vite項目的根目錄中的env.d.ts類型聲明文件里要寫什么
這篇文章主要介紹了vite項目的根目錄中的env.d.ts類型聲明文件里要寫什么,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
解決ElementUI中tooltip出現(xiàn)無法顯示的問題
這篇文章主要介紹了解決ElementUI中tooltip出現(xiàn)無法顯示的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue-cli是什么及創(chuàng)建vue-cli項目的方法
vue-cli是 vue 官方提供的、快速生成 vue 工程化項目的工具，支持創(chuàng)建vue2和vue3的項目，本文給大家詳細(xì)講解vue-cli是什么及創(chuàng)建vue-cli項目的方法，感興趣的朋友跟隨小編一起看看吧2023-04-04
這篇文章主要介紹了vue項目熱更新的坑及解決方案，具有很好的參考價值，希望對的大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單學(xué)生信息管理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了vue父子模板傳值問題解決方法,結(jié)合案例形式分析了vue.js父子模板傳值問題相關(guān)實現(xiàn)方法與具體操作步驟,需要的朋友可以參考下2020-02-02
文件拖拽上傳功能現(xiàn)在已經(jīng)隨處可見,大家應(yīng)該都用過了吧,那么它具體是怎么實現(xiàn)的大家有去了解過嗎,今天我們一起來實現(xiàn)一下這個功能,并封裝一個拖拽上傳組件吧2024-03-03
vue中實現(xiàn)全屏以及對退出全屏的監(jiān)聽
本文主要介紹了vue中實現(xiàn)全屏以及對退出全屏的監(jiān)聽，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
Vue3如何使用axios發(fā)起網(wǎng)絡(luò)請求
這篇文章主要介紹了Vue3如何使用axios發(fā)起網(wǎng)絡(luò)請求，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
elementUI+Springboot實現(xiàn)導(dǎo)出excel功能的全過程
這篇文章主要介紹了elementUI+Springboot實現(xiàn)導(dǎo)出excel功能,現(xiàn)在也對這個導(dǎo)出功能進(jìn)行一個匯總整理寫出來，結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09