vue+antv實現(xiàn)雷達(dá)圖的示例代碼
更新時間:2021年12月06日 16:50:44 作者:&小胖&
這篇文章主要介紹了vue+antv實現(xiàn)雷達(dá)圖,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
一、下載依賴
npm install @antv/data-set
npm install @antv/g2
二、代碼實現(xiàn)
<template> <div ref="container" /> </template> <script> import DataSet from '@antv/data-set' import { Chart } from '@antv/g2' export default { // 創(chuàng)建雷達(dá)圖 mounted() { this.constradar() }, methods: { constradar() { const data = [ { item: '工作效率', a: 70, b: 30 }, { item: '考勤', a: 60, b: 70 }, { item: '積極性', a: 50, b: 60 }, { item: '幫助同事', a: 40, b: 50 }, { item: '自主學(xué)習(xí)', a: 60, b: 70 }, { item: '正確率', a: 70, b: 50 } ] const { DataView } = DataSet const dv = new DataView().source(data) dv.transform({ type: 'fold', fields: ['a', 'b'], // 展開字段集 key: 'user', // key字段 value: 'score' // value字段 }) const chart = new Chart({ container: this.$refs.container, autoFit: true, height: 500 }) chart.data(dv.rows) chart.scale('score', { min: 0, max: 80 }) chart.coordinate('polar', { radius: 0.8 }) chart.tooltip({ shared: true, showCrosshairs: true, crosshairs: { line: { style: { lineDash: [4, 4], stroke: '#333' } } } }) chart.axis('item', { line: null, tickLine: null, grid: { line: { style: { lineDash: null } } } }) chart.axis('score', { line: null, tickLine: null, grid: { line: { type: 'line', style: { lineDash: null } } } }) chart.line().position('item*score').color('user').size(2) chart .point() .position('item*score') .color('user') .shape('circle') .size(4) .style({ stroke: '#fff', lineWidth: 1, fillOpacity: 1 }) chart.area().position('item*score').color('user') chart.render() //修改數(shù)據(jù) const newData = [ { item: '工作效率', a: 20, b: 30 }, { item: '考勤', a: 30, b: 70 }, { item: '積極性', a: 10, b: 60 }, { item: '幫助同事', a: 40, b: 50 }, { item: '自主學(xué)習(xí)', a: 60, b: 70 }, { item: '正確率', a: 20, b: 50 } ] // 立刻更新 setTimeout(() => { // 處理數(shù)據(jù)開始 const dv = new DataView().source(newData) dv.transform({ type: 'fold', fields: ['a', 'b'], // 展開字段集 key: 'user', // key字段 value: 'score' // value字段 }) // 處理結(jié)束 // 正式使用處理之后的數(shù)據(jù)進(jìn)行圖標(biāo)更新 chart.changeData(dv.rows) }, 3000) } } } </script> <style></style>
三、實現(xiàn)效果
數(shù)據(jù)修改前
??
數(shù)據(jù)修改后
?
到此這篇關(guān)于vue+antv實現(xiàn)雷達(dá)圖的文章就介紹到這了,更多相關(guān)vue雷達(dá)圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽
這篇文章主要介紹了vue App.vue里的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05vue3語法中使用vscode打開滿屏紅線報錯的完美解決方法
這篇文章主要介紹了vue3語法中使用vscode打開滿屏紅線報錯的完美解決方法,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答
這篇文章主要介紹了web面試中常問問題,MVC與MVVM區(qū)別以及Vue為什么不完全遵守MVVM的難點解答,有需要的朋友可以借鑒參考下,希望能夠有所幫助2021-09-09