vue3 echarts雷达图
Ningal0717 人气:0右上角时间选择器的实现
- 修改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"));
- 时间改变时触发的事件
利用@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); };
加载全部内容