Skip to content

引入

sh
npm install echarts --save

main.js

js
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

测试代码-App.vue

html
<template>
	<div>
		<div id="main" class="main_container"></div>
	</div>
</template>

<script>
	export default {
		name: 'VueAppApp',
		mounted() {
			this.initCharts()
		},
		methods: {
			initCharts(){
				let myChart = this.$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>

<style lang="css" scoped>
	.main_container {
		width: 100%;
		height: 500px;
		overflow: hidden;
	}
</style>

基于 MIT 许可发布