echarts:1、基础篇

1、从 npm 获取

npm install echarts --save

2、在项目中引入echarts

// html
<div ref="main" class="main"></div>

// js
mounted() {
	import * as echarts from 'echarts';
	// 基于准备好的dom,初始化echarts实例
	var myChart = echarts.init(this.$refs.main);
	// 绘制图表
	myChart.setOption({
		title: {
			text: 'ECharts 入门示例'
		},
		tooltip: {},
		xAxis: {
			data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
		},
		yAxis: {},
		series: [{
			name: '销量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20]
		}]
	});

	// 如果需要视图跟随屏幕缩放自适应,加入下边代码
	window.addEventListener('resize', myChart.resize);
}

echarts:1、基础篇_第1张图片

你可能感兴趣的:(echarts,echarts,前端,javascript)