在Vue项目中使用ECharts

最新推荐文章于 2024-07-05 10:34:38 发布

西格玛猫

最新推荐文章于 2024-07-05 10:34:38 发布

阅读量245

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43810973/article/details/105764294

版权

Vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

在Vue项目中使用ECharts

搭建脚手架并安装ECharts

cnpm i echarts --save

在main.js中引入ECharts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

新建组件test.vue

<template>
	<div>
		<h3>ECharts</h3>
		<div ref="chart" style="width:600px;height:300px;"></div>
	</div>
</template>
<script>
	export default {
		data () {
			return {
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				var chart = this.$refs.chart;
				const myChart = this.$echarts.init(chart);
				var option = {
					title: {
						text: 'Echarts Demo'
					},
					tooltip: {},
					xAxis: {
						data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				};
				myChart.setOption(option);
			}

		}
	}
</script>