• 欢迎光临~

初识 echarts

开发技术 开发技术 2022-10-27 次浏览

echarts 官网

特点:
1.丰富的可视化类型图表
2.多数据格式无需转换
3.千万级别数据进行展示
4.移动端优化
5.多渲染方案,跨平台使用
6.深度的交互方案
7.动态数据
8.绚丽的特效

init echarts

  1. 通过hbuilder 创建一个项目

  2. 命令行打开项目 npm init

  3. 引入echarts 命令 npm install echarts --save
    初识 echarts

核心代码

<template>
	<!-- echarts 默认宽高是0,如果不设置宽高,不展示 -->
	<div ref="mycharts" style="width: 500px;height:500px;"></div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		mounted() {
			let myEcharts = echarts.init(this.$refs.mycharts);
			// set option
			myEcharts.setOption(
			{
				title:{ //set title
					text:'hello world',
				},
				xAxis:{ //x 轴
					data:['EZ','VN','MF','NOC','GL']
				},
				yAxis: {}, //y 轴
				series:{//系列
					name:'LOL英雄大全',
					type:'bar',//当前图标的类型,bar  柱状图
					data:[4800,4800,6300,4800,3150]
				}
			})
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	
</style>

第一个展示

初识 echarts

程序员灯塔
转载请注明原文链接:初识 echarts
喜欢 (0)
违法和不良信息举报电话:022-22558618 举报邮箱:dljd@tidljd.com