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);
}

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值