vue引入echarts柱状图_vue异步请求渲染echarts图表「建议收藏」

一、cmd命令：vue create demo

二、项目命令窗口：npm install echarts –save

三：main.js 全局引入形式
 

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

四：index.vue页面使用

<template>
	<div class="app">
		<div style="width:500px;height:500px" ref="chart"></div>
	</div>
</template>
<script>
	const echarts = require('echarts');
	export default {
		data() {
			return {
				data: []
			}
		},
		mounted() {
			this.initCharts();
		},
		methods: {
			initCharts() {
				let myChart = echarts.init(this.$refs.chart);
				myChart.setOption({
					title: {
						text: "ECharts 入门示例",
					},
					tooltip: {},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
					},
					yAxis: {},
					series: [{
						name: "销量",
						type: "bar",
						data: [5, 20, 36, 10, 10, 20],
					}, ],
				})
			}
		}
	}
</script>

今天的文章vue引入echarts柱状图_vue异步请求渲染echarts图表「建议收藏」分享到此就结束了，感谢您的阅读。