vue3中使用echart5

最新推荐文章于 2024-01-03 21:27:40 发布

望风也等你

最新推荐文章于 2024-01-03 21:27:40 发布

阅读量168

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/m0_48912797/article/details/130178390

版权

该文章演示了在Vue项目中如何安装和使用ECharts库。通过`npminstallecharts--save`命令安装ECharts，然后在组件内全局导入并初始化ECharts，利用onMounted生命周期钩子设置图表选项，展示了一个包含销量数据的柱状图。

摘要由CSDN通过智能技术生成

安装

npm install echarts --save

<div id="main" style='height: 500px'></div>

全局导入

<script>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
export default {
	setup() {
		onMounted(() => {
			// 获取DOM元素并且进行初始化
			var myChart = echarts.init(document.getElementById('main'));
			// 创建图标
			myChart.setOption({
			  title: {
			    text: 'ECharts 入门示例'
			  },
			  tooltip: {},
			  xAxis: {
			    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
			  },
			  yAxis: {},
			  series: [
			    {
			      name: '销量',
			      type: 'bar',
			      data: [5, 20, 36, 10, 10, 20]
			    }
			  ]
			})
		})
	}
}
</script>