Shulou(Shulou.com)06/02 Report--

This article introduces you how to write the sample code of vue+antv radar map, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Download dependence

Npm install @ antv/data-set

Npm install @ antv/g2

2. Import DataSet from'@ antv/data-set'import {Chart} from'@ antv/g2'export default {/ / create radar map mounted () {this.constradar ()}, methods: {constradar () {const data = [{item: 'work efficiency', a: 70, b: 30}, {item: 'attendance', a: 60, b: 70} {item: 'enthusiasm', a: 50, b: 60}, {item: 'help colleagues', a: 40, b: 50}, {item: 'autonomous learning', a: 60, b: 70}, {item: 'accuracy', a: 70 B: 50}] const {DataView} = DataSet const dv = new DataView () .source (data) dv.transform ({type: 'fold', fields: [' asides,'b'], / / expand the field set key: 'user' / / key field value: 'score' / / value field}) 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 () / / modify data const newData = [{item: 'productivity', a: 20, b: 30}, {item: 'attendance', a: 30, b: 70}, {item: 'enthusiasm' A: 10, b: 60}, {item: 'help colleagues', a: 40, b: 50}, {item: 'autonomous learning', a: 60, b: 70}, {item: 'accuracy', a: 20 B: 50}] / / immediately update setTimeout (() = > {/ / start processing data const dv = new DataView () .source (newData) dv.transform ({type: 'fold', fields: [' asides,'b'], / / expand the field set key: 'user' / / key field value: 'score' / / value field}) / / end of processing / / data after processing is officially used to update chart.changeData (dv.rows)}, 3000)}} 3. Achieve effect

Before data modification

After data modification

On the vue+antv implementation of radar map sample code how to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.