基于vue3+antDesign2+echarts?實現(xiàn)雷達圖效果

更新時間：2022年08月12日 10:25:01 作者：Ningal0717

這篇文章主要介紹了基于vue3+antDesign2+echarts?實現(xiàn)雷達圖,本文通過實例代碼圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

右上角時間選擇器的實現(xiàn)

修改ant組件樣式

根據(jù)原型圖，該選擇器為月份時間選擇器，使用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);
    }
    //修改右側(cè)下拉圖標
    .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>

數(shù)據(jù)綁定
- 默認時間

設置默認事件時需要對時間格式進行確定，根據(jù)原型圖需要的時年-月的格式，故需要將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);
      })
    }

五角雷達圖的繪制及數(shù)據(jù)渲染

接口返回的數(shù)據(jù)是類別名稱的縮寫，為了使得數(shù)據(jù)和類別在渲染時能夠?qū)?，在定義雷達圖indicator時添加了index字段，用于遍歷接口數(shù)據(jù)得到與indicator中順序相同的數(shù)據(jù)數(shù)組

    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 實現(xiàn)雷達圖的文章就介紹到這了,更多相關vue3 echarts雷達圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: