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

Vue3使用ECharts實現(xiàn)?；鶊D的代碼示例

 更新時間：2025年01月22日 09:39:45   作者：吉檀迦俐  
?；鶊D是一種用于直觀顯示流向數(shù)據(jù)的可視化工具,特別適合展示復雜的網(wǎng)絡關系和資源流動,在前端項目中,通過結合?Vue?3?和?ECharts,可以快速實現(xiàn)交互性強、樣式美觀的?；鶊D,本文將通過完整的代碼示例,帶你一步步完成一個桑基圖的實現(xiàn),需要的朋友可以參考下

1. 前言

?；鶊D是一種用于直觀顯示流向數(shù)據(jù)的可視化工具，特別適合展示復雜的網(wǎng)絡關系和資源流動。在前端項目中，通過結合 Vue 3 和 ECharts，可以快速實現(xiàn)交互性強、樣式美觀的?；鶊D。本文將通過完整的代碼示例，帶你一步步完成一個?；鶊D的實現(xiàn)。

2. 項目準備

2.1 安裝必要的依賴

在 Vue 3 項目中使用 ECharts，首先需要安裝 ECharts 包：

npm install echarts

2.2 創(chuàng)建項目結構

在項目中創(chuàng)建一個組件文件，例如 SankeyChart.vue，用于封裝?；鶊D的實現(xiàn)邏輯和展示。

3. 代碼實現(xiàn)

以下是完整的代碼實現(xiàn)，包括模板、腳本和樣式。

<!--
 * @Author: 彭麒
 * @Date: 2025/1/20
 * @Email: 1062470959@qq.com
 * @Description: 此源碼版權歸吉檀迦俐所有，可供學習和借鑒或商用。
 -->
<template>
  <div class="w-full justify-start flex h-[180px] items-center pl-10">
    <BackButton @click="goBack"/>
  </div>
  <div class="font-bold text-[24px]">在Vue3中使用Echarts實現(xiàn)桑基圖</div>
  <div class="chart-container">
    <div ref="chartRef" class="sankey-chart"></div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import BackButton from "@/views/components/BackButton.vue";
import router from "@/router";
const goBack = () => {
  setTimeout(() => {
    router.push('/Echarts')
  }, 1000)
}
const chartRef = ref<HTMLElement | null>(null)
let chart: echarts.ECharts | null = null
 
const initChart = () => {
  if (!chartRef.value) return
 
  chart = echarts.init(chartRef.value)
 
  const option = {
    color: ['#7BC074', '#709EF1', '#F59363'],
    series: [{
      type: 'sankey',
      draggable: false,
      left: '8%',
      right: '8%',
      data: [
        // 左點
        { name: '安徽', label: { position: 'left' } },
        { name: '廣西', label: { position: 'left' } },
        { name: '江西', label: { position: 'left' } },
        { name: '青海', label: { position: 'left' } },
        { name: '湖南', label: { position: 'left' } },
        { name: '四川', label: { position: 'left' } },
        { name: '湖北', label: { position: 'left' } },
        // 右點
        { name: '江蘇 ', label: { position: 'right' } },
        { name: '廣東 ', label: { position: 'right' } },
        { name: '浙江 ', label: { position: 'right' } },
        { name: '重慶', label: { position: 'right' } }
      ],
      links: [
        { source: '安徽', target: '江蘇 ', value: 18.68 },
        { source: '安徽', target: '浙江 ', value: 12.38 },
        { source: '廣西', target: '廣東 ', value: 30.36 },
        { source: '江西', target: '廣東 ', value: 12.48 },
        { source: '江西', target: '浙江 ', value: 12.67 },
        { source: '青海', target: '廣東 ', value: 13.47 },
        { source: '青海', target: '浙江 ', value: 11.03 },
        { source: '湖南', target: '廣東 ', value: 19.11 },
        { source: '四川', target: '重慶 ', value: 15.02 },
        { source: '湖北', target: '廣東 ', value: 11.66 }
      ],
      label: {
        normal: {
          color: 'rgba(9, 27, 61, 0.6)',
          fontSize: 14,
          fontWeight: '400'
        }
      },
      itemStyle: {
        normal: {
          borderWidth: 1,
          borderColor: '#aaa'
        }
      },
      lineStyle: {
        normal: {
          color: 'gradient',
          borderColor: 'black',
          borderWidth: 0,
          opacity: 0.3,
          curveness: 0.6
        }
      }
    }]
  }
 
  chart.setOption(option)
}
 
const handleResize = () => {
  chart?.resize()
}
 
onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})
 
onUnmounted(() => {
  chart?.dispose()
  window.removeEventListener('resize', handleResize)
})
</script>
 
<style scoped>
.chart-container {
  width: 100%;
  height: 70%;
  min-height: 600px;
  background-color: #fff;
}
 
.sankey-chart {
  width: 100%;
  height: 100%;
}
 
@media screen and (max-width: 768px) {
  .chart-container {
    min-height: 400px;
  }
}
 
@media screen and (max-width: 480px) {
  .chart-container {
    min-height: 300px;
  }
}
</style>

4. 運行效果

運行項目后，訪問相應頁面，即可看到一個動態(tài)的?；鶊D，展示了各省份之間的流向數(shù)據(jù)。

5. 功能擴展

數(shù)據(jù)動態(tài)更新

  • 將圖表數(shù)據(jù)通過 API 獲取，并動態(tài)更新圖表內(nèi)容。
  • 示例：
chart.setOption({ series: [{ data: newData, links: newLinks }] });

交互功能

  • 添加鼠標懸停事件，展示詳細信息。
  • 使用 tooltip 配置實現(xiàn)：
tooltip: { trigger: 'item', formatter: ': {c}', }

6. 總結

本文通過完整的代碼示例，展示了如何使用 Vue 3 和 ECharts 實現(xiàn)?；鶊D。從項目搭建到細節(jié)優(yōu)化，都進行了詳細講解。希望這篇文章對你有所幫助！

到此這篇關于Vue3使用ECharts實現(xiàn)桑基圖的代碼示例的文章就介紹到這了,更多相關Vue3 ECharts?；鶊D內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論