vue3引入Echarts的万能模板

最新推荐文章于 2024-09-06 17:08:59 发布

console.log('只想发财')

最新推荐文章于 2024-09-06 17:08:59 发布

阅读量345

点赞数 3

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/jl____/article/details/136680500

版权

1. 安装echarts

npm install echarts --save

2. 将图表拆成单独的组件，在组件中引入echarts

<template>
    <div class="echarts-box">
        <div id="main3" class="container"></div>
    </div>
</template>

<script setup lang="ts">
	import * as echarts from 'echarts';

	//父组件调用接口，将图表数据传给子组件，子组件赋值
	const initData = data => {
	    initChart(data)
	}
	
	//初始化图表
	const initChart = data => {
	    // 基于准备好的dom，初始化echarts实例
	    var myChart = echarts.init(document.getElementById('main3'))
	    // 指定图表的配置项和数据
	    var option = {
	     	//这里是Echarts官网示例中的代码
	    }
	    // 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option)
	}

	defineExpose({ initData })
</script>
<style lang="scss" scoped>
	.container {
	    height: 300px;
	    width: 540px;
	}
</style>