计算机系统应用教程网站

网站首页 > 技术文章 正文

vue3扩展echart封装为组件库-快速复用

btikc 2024-10-26 08:47:04 技术文章 8 ℃ 0 评论

ECharts，全称Enterprise Charts，是一款由百度团队开发并开源，后捐赠给Apache基金会的纯JavaScript图表库。它提供了直观、生动、可交互、可个性化定制的数据可视化图表，广泛应用于数据分析、商业智能、网页开发等领域。以下是关于ECharts的详细介绍：

一、ECharts的特点

  1. 丰富的图表类型：ECharts支持包括折线图、柱状图、散点图、饼图、盒形图、地图、热力图、雷达图、K线图等在内的多种图表类型，满足不同的数据可视化需求。
  2. 多坐标系支持：ECharts支持直角坐标系（Cartesian）、极坐标系（Polar）和地理坐标系（Geo）等多种坐标系，为图表提供了更灵活的布局和展示方式。
  3. 高度可定制：ECharts允许用户通过丰富的配置项来自定义图表的样式、颜色、交互等，实现高度个性化的数据可视化效果。
  4. 良好的兼容性：ECharts可以流畅地运行在PC和移动设备上，并兼容当前绝大部分浏览器，如IE6/7/8/9/10/11、Chrome、Firefox、Safari等。

二、ECharts的使用方式

  1. 引入ECharts：用户可以通过npm、CDN或GitHub等方式引入ECharts。
  2. 准备一个DOM容器：在HTML中定义一个具有宽高的<div>容器，用于承载图表。
  3. 初始化ECharts实例：使用echarts.init(dom)方法初始化一个ECharts实例，其中dom是前面准备的DOM容器的引用。
  4. 配置图表选项：通过编写一个包含图表配置项的对象（通常称为option），来指定图表的类型、数据、样式等。
  5. 设置图表选项：使用ECharts实例的setOption(option)方法，将配置好的option应用到图表上，实现图表的渲染。

三、ECharts的示例

以下是一个简单的ECharts柱状图示例：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>ECharts 示例</title>  
    <!-- 引入 ECharts -->  
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>  
</head>  
<body>  
    <!-- 准备一个具备大小（宽高）的Dom -->  
    <div id="main" style="width: 600px;height:400px;"></div>  
    <script type="text/javascript">  
        // 基于准备好的dom，初始化echarts实例  
        var myChart = echarts.init(document.getElementById('main'));  
  
        // 指定图表的配置项和数据  
        var option = {  
            title: {  
                text: 'ECharts 示例'  
            },  
            tooltip: {},  
            legend: {  
                data:['销量']  
            },  
            xAxis: {  
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]  
            },  
            yAxis: {},  
            series: [{  
                name: '销量',  
                type: 'bar',  
                data: [5, 20, 36, 10, 10, 20]  
            }]  
        };  
  
        // 使用刚指定的配置项和数据显示图表。  
        myChart.setOption(option);  
    </script>  
</body>  
</html>


vue3扩展echart封装为组件库

在Vue 3中扩展ECharts并将其封装为可复用的组件库：

封装ECharts组件

首先，你需要创建一个ECharts组件，该组件接受必要的props（如选项、宽度、高度等)

<template>
	<div ref="chartRef" :style="{ width, height }"></div>
</template>

<script setup name="chart">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

import { useResizeObserver, useVModel } from '@vueuse/core';

const props = defineProps({
	modelValue: {
		type: Object,
		default: {},
	},
	height: {
		type: String,
		default: '100%',
	},
	width: {
		type: String,
		default: '100%',
	},
});

const emit = defineEmits(['update:modelValue']);
const data = useVModel(props, 'modelValue', emit);
const chartRef = ref();
let chart = ref();

const initChart = () => {
	if (chartRef.value) {
		chart = echarts.init(chartRef.value);
		chart.setOption(data.value);
	}
};

// 定义一个函数来处理尺寸变化
const handleResize = () => {
	if (chart) {
		setTimeout(() => {
			chart.resize();
		}, 100);
	}
};

const setOption = (option) => {
	if (chartRef.value) {
		chart = echarts.init(chartRef.value);
		chart.setOption(option);
	}
};

onMounted(() => {
	initChart();
	// 监听窗口大小变化
	if (chartRef.value) {
		useResizeObserver(chartRef.value.parentNode, handleResize);
	}
});
const getChart = () => {
	return chart;
};
defineExpose({
	getChart,
	setOption,
});
</script>

组件调用


<template>
	<div class="container">
		<div style="height: 214px" class="flex diygw-col-12"><diy-echart ref="echartRef" v-model="echartOpts" /></div>
		<div style="height: 214px" class="flex diygw-col-12"><diy-echart ref="echart1Ref" v-model="echart1Opts" /></div>
		<div class="clearfix"></div>
	</div>
</template>

<script setup name="index">
	import { ElMessageBox, ElMessage } from 'element-plus';
	import { ref, toRefs, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue';

	import { useRouter, useRoute } from 'vue-router';
	import { storeToRefs } from 'pinia';
	import { useUserInfo } from '@/stores/userInfo';

	import DiyEchart from '@/components/echart/index.vue';

	const stores = useUserInfo();
	const { userInfos } = storeToRefs(stores);
	const { proxy } = getCurrentInstance();
	const router = useRouter();
	const route = useRoute();
	const globalOption = ref(route.query);
	const getParamData = (e, row) => {
		row = row || {};
		let dataset = e.currentTarget ? e.currentTarget.dataset : e;
		if (row) {
			dataset = Object.assign(dataset, row);
		}
		return dataset;
	};

	const navigateTo = (e, row) => {
		let dataset = getParamData(e, row);
		let { type } = dataset;
		if ((type == 'page' || type == 'inner' || type == 'href') && dataset.url) {
			router.push({
				path: (dataset.url.startsWith('/') ? '' : '/') + dataset.url,
				query: dataset
			});
		} else {
			ElMessage.error('待实现点击事件');
		}
	};

	const state = reactive({
		userInfo: userInfos.value,
		echartOpts: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }] },
		echart1Opts: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }
	});
	const { userInfo, echart1Opts, echartOpts } = toRefs(state);

	const init = async () => {};
	// 页面加载时
	onMounted(async () => {
		await init();
	});

	// 页面卸载时
	onUnmounted(() => {});
</script>

<style lang="scss" scoped>
	.container {
		font-size: 12px;
	}
</style>

至此简单的echart扩展vue3快速复用组件完成.

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表