封裝 ECharts 爲 Vue 組件：X-ECharts 簡介

ECharts 是一個廣泛使用的開源可視化庫，它提供了豐富的圖表類型和靈活的配置選項，適用於複雜的數據可視化需求。而 X-ECharts 是一個基於 ECharts 封裝的 Vue 組件庫，旨在提供更簡潔的集成方式，同時兼容 Vue 2 和 Vue 3，使得開發者能夠在不同版本的 Vue 項目中無縫使用 ECharts。

English Docs |
中文文檔

感謝您對 X-ECharts 的興趣！這是一個基於 ECharts 封裝的 Vue 組件庫，能夠幫助您在 Vue 應用中快速集成豐富的圖表功能。我們支持 Vue 2 和 Vue 3，讓您可以無縫遷移和升級。

如何開始？

開始使用 X-ECharts 非常簡單，您只需按照下面的步驟來安裝和配置：

1. 通過 npm 或 yarn 安裝 X-ECharts：

   npm install x-echarts
   # 或
   yarn add x-echarts

2. 在您的 Vue 項目的 main.js 或 main.ts 文件中引入和使用：

import xEcharts from 'x-echarts';
Vue.use(xEcharts); // 在 Vue3 中使用 app.use(xEcharts);

使用示例

下面是一些基本的使用示例，展示瞭如何在 Vue 組件中使用 X-ECharts。

<template>
    <e-chart style="width: 600px; height: 400px;" :option="option" @click="handleClick"></e-chart>
</template>

<script>
export default {
    data() {
        return {
            option: {
                series: [{
                    type: 'bar',
                    data: [11, 12, 15, 16, 13, 12, 14]
                }],
                xAxis: {
                    data: ['a', 'b', 'c', 'd', 'e', 'f', 'g']
                },
                yAxis: {},
                tooltip: {}
            }
        }
    },
    methods: {
        handleClick(params) {
            alert(params.name);
        }
    }
}
</script>

餅圖

<template>
	<div style="background: #04233c">
		<e-pie :data="pieData" style="width: 400px; height: 400px;"></e-pie>
	</div>
</template>

<script>
  export default {
	created () {
		this.$xEchart.setChartConfig({
			THEME_COLOR: 'dark'
		});
	},
    data () {
      return {
        pieData: [
            { name: 'A', value: 5 },
            { name: 'B', value: 5 },
            { name: 'C', value: 30 },
            { name: 'D', value: 20 },
            { name: 'E', value: 10 },
            { name: 'F', value: 2 }
        ]
      }
    }
  }
</script>

柱狀圖

<template>
    <e-bar :data="data" style="width: 600px; height: 400px;background: #04233c"></e-bar>
</template>

<script>
  export default {
	created () {
		this.$xEchart.setChartConfig({
			THEME_COLOR: 'dark'
		});
	},
    data () {
      return {
        data: {
            xAxis: ['2014', '2015', '2016', '2017', '2018', '2019'],
            series: [
                {
                    name: '2018',
                    data: [22, 33, 28, 36, 28, 35]
                },
                {
                    name: '2019',
                    data: [28, 36, 28, 35, 22, 33]
                }
            ]
        }
      }
    }
  }
</script>

請支持我們！

如果您覺得 X-ECharts 對您有幫助，請考慮到我們的 GitHub 項目頁面給我們一個星標！這不僅可以幫助我們，還可以讓更多的開發者發現並使用這個項目。

🌟 給 X-ECharts 點個贊 🌟

您的支持是我們不斷改進和增加新功能的動力！

請關注！

請點個關注，後續會更新uniapp版本的x-echarts

如果您有好的想法或建議，歡迎通過 Issues 或 Pull Requests 與我們交流。

讓我們一起讓 X-ECharts 變得更好！

QQ 交流羣
羣1: 932176088