基于vue3+antDesign2+echarts?實現雷達圖效果
更新時間：2022年08月12日 10:25:01 作者：Ningal0717
這篇文章主要介紹了基于vue3+antDesign2+echarts?實現雷達圖,本文通過實例代碼圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
右上角時間選擇器的實現
- 修改ant組件樣式
根據原型圖，該選擇器為月份時間選擇器，使用a-month-picker，但原始的月份選擇器樣式與設計圖不符，需要進行修改，修改有分為兩部分：1.選擇框；2.額外彈出的日歷
- 選擇框樣式修改
修改ant組件時應避免全局修改，如使用less語法，對ant組件的修改應在該頁面的class下
<style lang="less" >
@vw: 19.2vw;
@vh: 10.8vh;
.ping_index {
.ant-picker {
border: none;
height: 28 / @vh;
font-size: 14 / @vw;
//修改字體居中
.ant-picker-input > input {
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
//修改右側下拉圖標
.anticon svg {
color: rgb(143, 135, 135);
}
}
</style>- 額外彈出的日歷
額外彈出的日歷框是在#app之外的，故無法與選擇框使用相同方法進行修改,需要利用dropdownClassName屬性來修改樣式
a-month-picker(
...
dropdownClassName="month_class"
)
<style lang="less">
.month_class {
.ant-picker-panel-container {
background-color: #010a21;
border: none;
.ant-picker-panel {
background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(222, 60, 70, 0));
box-shadow: 0 0 10 / @vh 0 #005088 inset;
.ant-picker-header button {
color: rgba(255, 255, 255, 0.8);
}
.ant-picker-cell-in-view {
color: rgba(255, 255, 255, 0.8);
}
.ant-picker-cell-selected {
background: rgba(28, 68, 169, 0.7);
}
.ant-picker-cell-in-view:hover {
background: rgba(28, 68, 169, 0.6);
box-shadow: 0 0 18 / @vh 0 #1c44a9 inset;
}
.ant-picker-cell:hover {
background-color: transparent;
}
.ant-picker-cell-inner {
background: transparent !important;
}
}
}
}
</style>
- 數據綁定
- 默認時間
設置默認事件時需要對時間格式進行確定，根據原型圖需要的時年-月的格式，故需要將ant組件的valueFormat設置為“YYYY-MM”
綁定的值也需要利用moment.js處理得到相同是時間格式
a-month-picker.info_btn(
v-model:value="selectedMonth",
value-format="YYYY-MM"
)
let selectedMonth = ref(moment(new Date()).format("YYYY-MM"));
- 時間改變時觸發(fā)的事件
利用@change綁定事件，考慮到接口需要分別傳輸年、月，需要對selectedMonth進行切割
a-month-picker.info_btn(
v-model:value="selectedMonth",
value-format="YYYY-MM"
@change="changeMonth()"
)
let changeMonth = () => {
let year = selectedMonth.value.substring(0,4)
let month = Number(selectedMonth.value.substring(5,7))
//封裝過的接口
getSafetyIndex({
year,
month
}).then(( res ) => {
console.log(res);
})
}
五角雷達圖的繪制及數據渲染
接口返回的數據是類別名稱的縮寫，為了使得數據和類別在渲染時能夠對應，在定義雷達圖indicator時添加了index字段，用于遍歷接口數據得到與indicator中順序相同的數據數組
let indecatorList = [
{
name: "火災情況",
max: 10,
index: 'hjqk',
},
{
name: "交通安全",
max: 10,
index: 'jtaq',
},
{
name: "信訪形勢",
max: 10,
index: 'xfxs',
},
{
name: "反電詐",
max: 10,
index: 'fdz',
},
{
name: "矛盾糾紛",
max: 10,
index: 'mdjf',
},
];
let getData = ( data ) => {
let series = []
indecatorList.map(( item ) => {
series.push(data[item.index])
})
setOptions(series);
};
let setOptions = ( seriesData = [0,0,0,0,0] ) => {
let option = {
radar: {
...
indicator: indecatorList,
},
...
series: [
...
{
type: "radar",
data: [
{
value: seriesData,
},
],
},
],
};
chart.setOption(option);
};
到此這篇關于基于vue3+antDesign2+echarts 實現雷達圖的文章就介紹到這了,更多相關vue3 echarts雷達圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了vue+element實現手機號驗證碼注冊的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
數據緩存可以提高應用程序的性能,減少網絡請求,提高用戶體驗,在本文中,我們介紹了Vue中如何進行數據緩存,并提供了一些示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-09-09
解決element-ui?el-drawer抽屜el-dialog彈框關閉優(yōu)化demo
這篇文章主要為大家介紹了解決element-ui?el-drawer抽屜el-dialog彈框關閉優(yōu)化demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-06-06
本文要給大家介紹Vue實現動態(tài)樣式的多種方法，下面給大家?guī)韼讉€案列，需要的朋友可以借鑒研究一下。2021-06-06
這篇文章主要為大家詳細介紹了vue實現div單選多選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要介紹了form?表單驗證是異步問題記錄,通過實例代碼介紹了Promise.all 和 Promise.allSettled 區(qū)別，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了如何通過vue elementUI實現拖拽流程圖效果,不引入插件,純手寫實現,感興趣的小伙伴可以跟隨小編一起學習一下2025-01-01
這篇文章主要介紹了Vue中的變量賦值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了使用vue項目配置多個代理的注意點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要為大家介紹了VuePress使用Algolia實現全文搜索示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07