echarts 初学

最新推荐文章于 2024-05-29 16:56:12 发布

许秀不许秀！

最新推荐文章于 2024-05-29 16:56:12 发布

阅读量178

点赞数 1

文章标签： javascript 前端 echarts

本文链接：https://blog.youkuaiyun.com/weixin_51221133/article/details/121657253

版权

本文深入探讨了Echarts这个JavaScript图表库，它由百度捐赠给Apache基金会，适合中国人的制表习惯。核心概念包括实例、系列、提示、图例等，支持柱状、饼形、线性等多种图表类型。颜色可以通过主题或自定义调色板进行修改，同时支持渐变效果。数据堆叠和label标签功能提供了丰富的可视化选项。此外，还介绍了如何创建多图表布局和使用工具箱功能，如数据缩放、视图和保存图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对echarts的定义

1.javascrit的图表库
2.百度捐给apache基金会
3.比较符合中国人的制表习惯
3.HeightCharts，D3为同行
echarts官网

核心概念

1.instance 实例
2.series 系列
3.tooltip 提示
4.legend 图裂
5.xAxis X轴
6.yAxis Y轴
7.toolbox 工具箱
8.dataZoom 缩放
9.vitualMap 虚拟映射

图标的常用类型

bar 柱状
pie 饼形
radius:[“60%”,“40%”]
line 线性
areaStyle 面
smooth:true 平滑

颜色的修改

1.主题：自定义主题 light,dark 浅色与深色
2.自定义主题
3.color：调色盘
4.color系列调色盘
5.itemStyle normal默认 emphasis强调状态

特别样式

1.渐变

var linear={
	type:'linear',
	x:0,
	y:0,
	x2:0,
	y2:1,
	colorStops:[{
		offset:0,
		color:'#0bdcf3'
		//0%处的颜色
	},{
		offset:1,color:'#0093dd'
		//100%处的颜色
	}],
	global:false//缺省为false
}

2.线的样式lineStyle

lineStyle:{
	width:12,
	cap:"round",
	opacity:0.7,
}

3.面的样式

areaStyle:{
	color:linear2,
}

数据的堆叠

stack:true

在这里插入图片描述

label 标签

show true 是否显示
formatter:"{a}{b}{c}"格式化
a代表数据名
b系列名
c数字
3.position：位置
inisideRigt内部右侧
top/left/right/bottom/inside
4.color:颜色

多图表

grid 网络布局
top/left/right/botton
height
width
xAxis,yAxis 轴线指定
gridIndex:0,
gridIndex:1
series 数据指定轴线
xAxisIndex:0
yAxisIndex:0

工具箱

toolbox:{
	show:true,//显示工具箱
	feature:{
	//缩放
		dataZoom:{
			yAxisIndex:'none'
		},
	//数据视图
		dataView:{readOnly:false},
	//魔法类型
		magicType:{type:['line','bar','pie']},
	//重置
		restore:{},
	//保存图片
	 	saveAsImage:{}
	}
}

在这里插入图片描述