Echarts官网链接:Apache ECharts

安装依赖📦

pnpm add echarts

按需使用🏒

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const chart = ref();
function renderChart() {
	const myChart = echarts.init(chart.value)
	myChart.setOption({
		title: {
			text: 'ECharts 入门示例'
		},
		tooltip: {},
		xAxis: {
			data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
		},
		yAxis: {},
		series: [{
			name: '销量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20]
		}]
	});
}
onMounted(() => {
	init()
})
</script>
<template>
	<div>
		<div ref='chart' style="width: 200px;height:150px;" />
	</div>
</tempalte>

Echarts社区资源🎊

首页 - ECharts图表集,ECharts demo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com

image.png


PPChart - 让图表更简单

PixPin_2024-07-26_17-17-45.png


分享你我 - ECharts 作品集 (majh.top)

PixPin_2024-07-26_17-19-23.png