legend（圖例組件）

圖表的圖例，表示不同系列的標(biāo)識(shí)。

legend: {
    top: '5%',
    left: 'center',
    data: ['直接訪問(wèn)', '聯(lián)盟廣告', '搜索引擎']
}

series（系列列表）

每個(gè) series 代表一組數(shù)據(jù)項(xiàng)的集合，對(duì)于餅圖配置的主要部分。

series 屬性及其可能的值包括：

• type: 'pie' // 必須設(shè)置為 'pie' 表示這是一個(gè)餅圖。
• radius: 半徑，可以是百分比或固定像素值，也可以是數(shù)組形式表示內(nèi)外半徑。
• center: Pie圖的中心位置。
• data: 數(shù)據(jù)項(xiàng)數(shù)組，每個(gè)數(shù)據(jù)項(xiàng)包括 value（數(shù)值）和 name（名稱）。
• stillShowZeroSum: 如果所有數(shù)據(jù)值都是0，是否顯示圖形。
• label: 用于設(shè)置數(shù)據(jù)標(biāo)簽，如是否顯示、位置、格式等。

series: [
    {
        name: '訪問(wèn)來(lái)源',
        type: 'pie',
        radius: '50%', // 半徑大小，支持百分比
        center: ['50%', '50%'], // 餅圖的中心位置
        data: [
            {value: 335, name: '直接訪問(wèn)'},
            {value: 234, name: '聯(lián)盟廣告'},
            {value: 1548, name: '搜索引擎'}
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        },
        stillShowZeroSum: true,
        label: {
            normal: {
                show: true,
                position: 'outside' // 標(biāo)簽的位置
            },
            emphasis: {
                show: true,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        }
    }
]

toolbox (工具欄配置)

color (配色方案)

定義顏色數(shù)組，用于系列中每個(gè)扇形的默認(rèn)顏色：

• 示例：<font style="color:rgb(46, 50, 56);">['#5470C6', '#91CC75', '#FAC858', '#EE6666']</font>

animation (動(dòng)畫配置)

完整配置示例代碼

option = {
    title: {
        // 餅圖的標(biāo)題
        text: 'Pie Chart Example'
    },
    tooltip: {
        // 鼠標(biāo)懸浮時(shí)的提示框設(shè)置
        trigger: 'item' // item: 數(shù)據(jù)項(xiàng)圖形觸發(fā)
    },
    legend: {
        // 圖例組件，展示不同系列的標(biāo)識(shí)顏色和名稱
        top: '5%',    // 距離容器上方的距離
        left: 'center', // 水平居中
        // 對(duì)應(yīng)系列名稱的數(shù)據(jù)
        data: ['Direct Visit', 'Union Ad', 'Search Engine']
    },
    toolbox: {
    show: true, // 顯示工具欄
    feature: {
      saveAsImage: {}, // 保存為圖片功能
      restore: {} // 還原功能
    }
  },
    series: [
        {
            // 系列名稱，用于tooltip的顯示
            name: 'Access From',
            type: 'pie', // 類型必須為餅圖
            // 餅圖的半徑大小
            radius: '55%',
            // 餅圖的中心（圓心）位置
            center: ['50%', '60%'],
            // 數(shù)據(jù)數(shù)組，包含每個(gè)扇區(qū)的大小和名稱
            data: [
                { value: 335, name: 'Direct Visit' },
                { value: 234, name: 'Union Ad' },
                { value: 1548, name: 'Search Engine' }
            ],
            // 強(qiáng)調(diào)樣式，當(dāng)鼠標(biāo)懸浮時(shí)顯示陰影等效果
            emphasis: {
                itemStyle: {
                    shadowBlur: 10, // 陰影的模糊大小
                    shadowOffsetX: 0, // 陰影水平方向上的偏移距離
                    shadowColor: 'rgba(0, 0, 0, 0.5)' // 陰影顏色
                }
            },
            // 標(biāo)簽的顯示方式設(shè)定
            label: {
                normal: {
                    // 常規(guī)狀態(tài)下的標(biāo)簽顯示設(shè)置
                    show: true, // 是否展示標(biāo)簽
                    position: 'outside', // 標(biāo)簽的位置
                    // 標(biāo)簽的格式化器
                    formatter: '{b}: {c} (v6fgzc1vch%)'
                },
                emphasis: {
                    // 高亮狀態(tài)下的文本樣式定義
                    show: true,
                    textStyle: {
                        fontSize: '30', // 字體大小
                        fontWeight: 'bold' // 字體粗細(xì)
                    }
                }
            }
        }
    ]
};

EChart 在 Vue3 中實(shí)戰(zhàn)

// 圖表實(shí)例的引用
  const chart = ref(null);
  // 初始化圖表
  const initChart = () => {
    if (chart.value) {
      const myChart = echarts.init(chart.value); // 初始化 ECharts 實(shí)例
      myChart.setOption(props.option); // 設(shè)置配置項(xiàng)
    }
  };
  // 監(jiān)聽(tīng) props 的變化，動(dòng)態(tài)更新圖表
  watch(
    () => props.option,
    (newOption) => {
      if (chart.value) {
        const myChart = echarts.getInstanceByDom(chart.value); // 獲取已初始化的圖表實(shí)例
        myChart.setOption(newOption); // 更新配置項(xiàng)
      }
    }
  );

響應(yīng)式處理

圖表在窗口大小變化時(shí)能夠自動(dòng)調(diào)整。可以使用 resize() 方法手動(dòng)調(diào)整圖表大小，通常是在 updated 生命周期鉤子中調(diào)用。

// 響應(yīng)式調(diào)整圖表大小， 監(jiān)聽(tīng)窗口大小變化，確保圖表自適應(yīng)容器的大小。
const resizeChart = () => {
  if (chart.value) {
    const myChart = echarts.getInstanceByDom(chart.value);
    myChart.resize(); // 調(diào)整圖表尺寸
  }
};
// 生命周期鉤子
onMounted(() => {
  initChart(); // 組件掛載后初始化圖表
  window.addEventListener('resize', resizeChart); // 監(jiān)聽(tīng)窗口大小變化
});

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

使用 Vue 的響應(yīng)式數(shù)據(jù)（如 ref 或 reactive）配合 watch，在數(shù)據(jù)變化時(shí)調(diào)用 chart.setOption() 重新渲染圖表。

const chartOption = ref({
      title: { text: '實(shí)時(shí)數(shù)據(jù)' },
      tooltip: { trigger: 'axis' },
      xAxis: { data: ['1', '2', '3', '4', '5'] },
      yAxis: {},
      series: [{
        name: '銷量',
        type: 'line',
        data: [120, 132, 101, 134, 90]
      }]
    });
watch(
  () => props.option,
  (newOption) => {
    if (chartInstance.value) {
      chartInstance.value.setOption(newOption); // 動(dòng)態(tài)更新圖表配置
    }
  },
  { deep: true } // 深度監(jiān)聽(tīng)
);
chartOption.value.series[0].data.push(Math.random() * 100);
chartOption.value.xAxis.data.push(String(chartOption.value.xAxis.data.length + 1));

圖表容器大小自適應(yīng)

父容器尺寸發(fā)生變化時(shí)，圖表可能不會(huì)自動(dòng)調(diào)整大小。 我們可以通過(guò) 監(jiān)聽(tīng) resize 事件或使用 Vue 的響應(yīng)式布局方案，調(diào)用 chart.resize() 更新圖表尺寸。

const observer = new ResizeObserver(() => {
  chartInstance.value?.resize(); // 動(dòng)態(tài)調(diào)整大小
});
observer.observe(containerElement); // 監(jiān)聽(tīng)容器

國(guó)際化與多語(yǔ)言支持

圖表中包含的文案（如標(biāo)題、提示）需要支持多語(yǔ)言。 我們可以使用 Vue I18n 或其他國(guó)際化工具動(dòng)態(tài)替換文本。

npm install vue-i18n

import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const option = reactive({
  title: { text: t('chart.title') },
});

ECharts 圖表導(dǎo)出

toolbox: {
  feature: {
    saveAsImage: { show: true },
  },
};

性能優(yōu)化

銷毀 ECharts 實(shí)例

在組件銷毀時(shí)，確保銷毀 ECharts 實(shí)例，防止內(nèi)存泄漏。

 onBeforeUnmount(() => {
      if (chart.value) {
        const myChart = echarts.getInstanceByDom(chart.value);
        myChart.dispose(); // 銷毀 ECharts 實(shí)例
      }
      window.removeEventListener('resize', resizeChart); // 移除事件監(jiān)聽(tīng)
    });

大數(shù)據(jù)渲染性能優(yōu)化

數(shù)據(jù)量大時(shí)，ECharts 的渲染可能會(huì)導(dǎo)致性能瓶頸。 我們可以通過(guò)以下三種方式來(lái)達(dá)到優(yōu)化作用

• 使用 **dataZoom**: 允許用戶縮放數(shù)據(jù)區(qū)域，減少可視數(shù)據(jù)點(diǎn)。
• 啟用分片渲染:

series: [
  {
    type: 'line',
    large: true, // 啟用大數(shù)據(jù)優(yōu)化
    largeThreshold: 4000, // 數(shù)據(jù)量門檻
  },
];

• 降級(jí)動(dòng)畫： 動(dòng)態(tài)數(shù)據(jù)場(chǎng)景中禁用或簡(jiǎn)化動(dòng)畫。

animation: false,
progressive: 4000, // 分步渲染
progressiveThreshold: 10000, // 數(shù)據(jù)點(diǎn)門檻

圖表配置項(xiàng)太長(zhǎng)，分離配置項(xiàng)

配置項(xiàng)代碼過(guò)長(zhǎng)，組件可讀性降低。我們可以將配置項(xiàng)提取到單獨(dú)的模塊，便于復(fù)用和維護(hù)。

EChart 知識(shí)點(diǎn)常考

如何初始化和銷毀 ECharts 實(shí)例？

• echarts.init(dom) 初始化。
• chart.dispose() 銷毀實(shí)例，避免內(nèi)存泄漏。

ECharts 常見(jiàn)配置項(xiàng)有哪些？

• title, legend, tooltip, grid, xAxis, yAxis, series, toolbox, dataZoom。

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

- 如何實(shí)現(xiàn)圖表數(shù)據(jù)的動(dòng)態(tài)更新？
- 如何監(jiān)聽(tīng) `props` 變化并更新圖表配置？

性能優(yōu)化

- 大數(shù)據(jù)渲染場(chǎng)景如何優(yōu)化？
- 什么是 `progressive` 渲染模式？

圖表事件

- 如何捕獲圖表點(diǎn)擊、懸停事件并執(zhí)行對(duì)應(yīng)的業(yè)務(wù)邏輯？

如何處理數(shù)據(jù)較多導(dǎo)致渲染卡頓的情況？

• 使用數(shù)據(jù)分片渲染（progressive）。
• 禁用動(dòng)畫。
• 使用 dataZoom 限制顯示范圍。

如何實(shí)現(xiàn)圖表導(dǎo)出功能？

使用 toolbox.feature.saveAsImage 或通過(guò) chart.getDataURL() 獲取圖表數(shù)據(jù)并導(dǎo)出。

最后

通過(guò)對(duì) ECharts 通用屬性的深入提煉與系統(tǒng)整理，以及常用配置項(xiàng)的歸納總結(jié)，我們能夠迅速實(shí)現(xiàn)圖表的搭建與展示，極大地提升了開(kāi)發(fā)效率。此外，借助豐富的 ECharts 資源和示例，我們基本上能夠滿足大部分業(yè)務(wù)場(chǎng)景的需求。這樣一來(lái)，我們不僅能夠更加快捷地實(shí)現(xiàn)功能需求，還能騰出更多寶貴的時(shí)間，專注于其他重要任務(wù)。

?轉(zhuǎn)自https://www.cnblogs.com/HaiJun-Aion/p/18569547