欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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實例的選項總結(jié)

    vue實例的選項總結(jié)

    這篇文章主要介紹了Vue實例的選項有哪些,文中講解非常細(xì)致,代碼幫助大家更好的學(xué)習(xí),感興趣的朋友可以了解下
    2020-06-06
  • vue3.0組合式api的使用小結(jié)

    vue3.0組合式api的使用小結(jié)

    這篇文章主要介紹了vue3.0組合式api的使用小結(jié),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽

    vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽

    這篇文章主要介紹了vue App.vue里的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • vue3語法中使用vscode打開滿屏紅線報錯的完美解決方法

    vue3語法中使用vscode打開滿屏紅線報錯的完美解決方法

    這篇文章主要介紹了vue3語法中使用vscode打開滿屏紅線報錯的完美解決方法,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-06-06
  • Vue.js計算屬性computed與watch(5)

    Vue.js計算屬性computed與watch(5)

    這篇文章主要為大家詳細(xì)介紹了Vue.js計算屬性computed與watch,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答

    web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答

    這篇文章主要介紹了web面試中常問問題,MVC與MVVM區(qū)別以及Vue為什么不完全遵守MVVM的難點解答,有需要的朋友可以借鑒參考下,希望能夠有所幫助
    2021-09-09
  • vue router 路由跳轉(zhuǎn)方法講解

    vue router 路由跳轉(zhuǎn)方法講解

    這篇文章主要介紹了vue router 路由跳轉(zhuǎn)方法概述,使用到Vue的項目,我們最常見使用的就是Vue配套的Vue Router庫,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下
    2022-12-12
  • Vue extends 屬性的用法示例詳解

    Vue extends 屬性的用法示例詳解

    這篇文章主要為大家介紹了Vue extends 屬性的用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • vue移動端項目vant組件庫之tag詳解

    vue移動端項目vant組件庫之tag詳解

    這篇文章主要介紹了vue移動端項目vant組件庫之tag詳解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue.js的簡單自動求和計算實例

    vue.js的簡單自動求和計算實例

    今天小編就為大家分享一篇vue.js的簡單自動求和計算實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11

最新評論