提示：記錄一下寫頁面的時(shí)候遇到過的一些小問題！
一、頁面布局
頁面布局就是簡(jiǎn)單的用了個(gè)三欄式布局，在寫頁面的過程中對(duì)于多個(gè)頁面共同使用的部分要注意善用組件復(fù)用，避免寫冗余重復(fù)的代碼！
比如說對(duì)于需要重復(fù)使用的圖表容器，可以將其注冊(cè)為全局組件V3Echarts.vue，當(dāng)需要表示圖表時(shí)，可直接引入，然后利用props傳值，將Echarts圖表需要的options傳給V3Echarts組件即可；
以及對(duì)于圖表options，可以將其封裝到一個(gè)ts文件中，將其暴露出去，當(dāng)需要的時(shí)候引入即可；
整體使用vite搭建的vue3-ts項(xiàng)目，頁面大抵如下！(就不放多個(gè)頁面了，都差不多，我也知道沒有多好看，會(huì)繼續(xù)優(yōu)化的?。?/p>
二、遇到的問題(主要在于Echarts圖表版本過高使用的配置項(xiàng)該版本已經(jīng)淘汰而導(dǎo)致的控制臺(tái)警告)
1.[ECharts] DEPRECATED:[radar.indicator]text is deprecated, use name instead.
其實(shí)中文翻譯過來就能知道是說radar.indicator這個(gè)配置項(xiàng)中的數(shù)據(jù)中的text鍵值需要替換為name；
//錯(cuò)誤寫法！
const indicator = [
{
text: '信訪',
max: 6000,
},
{
text: '網(wǎng)訪',
max: 5000
},
{
text: '電訪',
max: 5000
},
{
text: '郵訪',
max: 5000,
},
{
text: '來訪',
max: 5000
}
];
radar: {
indicator: indicator,
// shape: 'circle',
axisName: {
color: '#fff',
fontSize: 14
},
}
Echarts最新版本寫法！
//在radar中使用indicator的時(shí)候，數(shù)據(jù)需要將鍵名text改為name就不會(huì)報(bào)錯(cuò)啦！
const indicator = [
{
name: '信訪',
max: 6000,
},
{
name: '網(wǎng)訪',
max: 5000
},
{
name: '電訪',
max: 5000
},
{
name: '郵訪',
max: 5000,
},
{
name: '來訪',
max: 5000
}
];
2.[ECharts] DEPRECATED: textStyle hierarchy in lable has been removed since 4.0 All textStyle properties…
其實(shí)這個(gè)問題也是一樣的，最新版本的Echarts5棄用了在lable配置項(xiàng)中再寫一個(gè)textStyle配置項(xiàng)的操作，直接將原本在textStyle中寫的配置，放到lable配置下即可！文章來源：http://www.zghlxwxcb.cn/news/detail-602246.html
總結(jié)
寫頁面的過程中也沒有遇到什么比較難的問題，編寫頁面的過程中，也是自己復(fù)習(xí)溫習(xí)鍛煉的一個(gè)過程，要再繼續(xù)加油！文章來源地址http://www.zghlxwxcb.cn/news/detail-602246.html
到了這里，關(guān)于記錄vue3+echarts搭建數(shù)據(jù)可視化頁面！的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
