快捷導(dǎo)航

vue3中使用Vchart的示例代碼

更新時(shí)間：2024年01月16日 15:38:02 作者：智慧女孩要禿頭~

使用vue開發(fā)的web項(xiàng)目中使用圖表,可以使用v-charts,本文主要介紹了vue3中使用Vchart的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下

使用vue開發(fā)的web項(xiàng)目中使用圖表，可以使用v-charts，它基于 Vue 和 echarts 封裝的 v-charts 圖表組件，只需要統(tǒng)一提供一種對前后端都友好的數(shù)據(jù)格式設(shè)置簡單的配置項(xiàng)，便可輕松生成常見的圖表，避免了做繁瑣的數(shù)據(jù)類型轉(zhuǎn)化、修改復(fù)雜的配置項(xiàng)。

步驟

1、npm 安裝

npm install echarts vue-echarts

2、在vue中使用

折線圖

在這里插入圖片描述

代碼：

<template>
  <div>
          <h3>下載流量 <span style="font-weight: normal">7天內(nèi)趨勢</span></h3>
          <v-chart
            style="width: 100%; height: 210px"
            :option="(chartOptions as EChartsOption)"
          ></v-chart>
        </div>
</template>

<script setup lang="ts">

import { onMounted,ref } from 'vue'
import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { CanvasRenderer } from 'echarts/renderers'
import type { EChartsOption } from 'echarts'
import dayjs from 'dayjs'

use([CanvasRenderer, LineChart, GridComponent, LegendComponent, TooltipComponent])

const sevenDays: string[] = []
const todayNow = dayjs()
for (let i = 6; i >= 0; i--) {
  const day = todayNow.add(-i, 'days').format('YYYY/MM/DD')
  sevenDays.push(day)
}
const chartOptions = ref({
  //提示框
  tooltip: {
    trigger: 'axis',
    formatter: function (data: any) {
      let formatValue
      if (data[0] && data[0].value) {
        formatValue = `${Utils.getFileSize(data[0].value)}`
      } else {
        formatValue = 0
      }
      return data[0].axisValueLabel + '<br />' + data[0].marker + formatValue
    }
  },
  //橫軸配置
  xAxis: {
    type: 'category',
    data: sevenDays,
    lineWidth: 0,
    left: '-2%',
    axisTick: {
      show: false
    }
  },
  //縱軸配置
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: (value: number) => {
        if (value) return `${Utils.getFileSize(value)}`
        return 0
      }
    }
  },
  //數(shù)據(jù)集配置
  series: [
    {
      data: [0, 0, 0, 0, 0, 0, 0],
      type: 'line'
    }
  ],
  grid: {
    top: '20px',
    bottom: '0px',
    left: '0px',
    right: '20px',
    containLabel: true
  }
})

onMounted(() => {
  FirmReq.getFirmFlow(firmStore().profile?.id!).then((res) => {
        const daysData = [...sevenDays]
        //daysData = ['2024/01/10', '2024/01/11', '2024/01/12', '2024/01/13', '2024/01/14', '2024/01/15', '2024/01/16']
        /**
         * 接口返回?cái)?shù)據(jù)res.data.data
         * [{dt: "2024/01/12",total: "13029932"},{dt: "2024/01/16",total: "18977"}]
         */
        console.log('daysData', daysData)
        chartOptions.value.series = [
          {
            type: 'line',
            data: daysData.map((day) => {
              const data = res.data.data.find(
                (_item: { dt: string; total: string }) => _item.dt == day
              )
              if (data && data.total) return Number(data.total)
              return 0
            })
          }
        ]
      })
})

  
</script>

餅圖

在這里插入圖片描述

代碼

<template>
  <div style="width: 100%; height: 80%; margin-top: 10px">
      <v-chart class="chart" :option="deviceOption"></v-chart>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref} from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import type { EChartsOption } from 'echarts'
import VChart from 'vue-echarts'

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent, GraphicComponent])
const deviceOption =ref({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      top: '10%',
      left: '55%',
      data: ['新版本', '舊版本']
    },
    series: [
      {
        name:'固件Agent分布',
        type: 'pie',
        radius: ['60%', '90%'],
        center: ['25%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 0, name: '新版本' },
          { value: 0, name: '舊版本' }
        ]
      }
    ],
    color: ['#6095CA', '#BAC8DB']
  
})

onMounted(() => {
 StatisReq.teamDesktopVersion().then((res) => {
    const { latest, low } = res.data
    const deviceOptionLabel = `新版本 (${Number(latest)}臺(tái))`
    const deviceOptionLabel1 = `舊版本 (${Number(low)}臺(tái))`
   //更新餅圖數(shù)據(jù)
    deviceOption.value.series[0].data[0] = { value: Number(latest), name: deviceOptionLabel }
    deviceOption.value.series[0].data[1] = { value: Number(low), name: deviceOptionLabel1 }
    deviceOption.value.legend.data[0] = deviceOptionLabel
    deviceOption.value.legend.data[1] = deviceOptionLabel1
  })
})  
  
</script>

3、添加圖例點(diǎn)擊事件

// 組件添加legendselectchanged事件
<v-chart :option="option2" @legendselectchanged="legendselectchanged"></v-chart>

// script標(biāo)簽中代碼
const legendselectchanged = (res) => {
	//	點(diǎn)擊圖例默認(rèn)會(huì)改變系列的顯示狀態(tài)
	//	自定義圖例點(diǎn)擊事件需要先阻止這個(gè)默認(rèn)事件
	//  legend: {selectedMode: false},這個(gè)屬性可以使點(diǎn)擊事件不起效，但同樣自定義legendselectchanged 事件也會(huì)失效，因此不能通過 selectedMode: false 來控制
	// option2.value.legend.selected = {[res.name] : true};這句代碼可以使點(diǎn)擊的圖例系列重新顯示
    option2.value.legend.selected = {[res.name] : true};
    //下面就可以做一些你想做的功能
    // .....
}

到此這篇關(guān)于vue3中使用Vchart的示例代碼的文章就介紹到這了,更多相關(guān)vue3使用Vchart內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: