标题组件
title
--text 标题
--link 超链接
--textStyle 标题样式
--subtext 副标题
--subtextStyle 副标题样式
--textAlign 水平对齐
--textVerticalAlign 垂直对齐
--padding 标题内边距
--itemGap 主副标题间距
--left right top bottom 距离
--backgroundColor 背景颜色
--borderColor borderWidth borderRadius 边框以及圆角
--shadowColor shadowOffsetX shadowOffsetY 阴影颜色及偏移
提示框组件 (鼠标放入提示信息)
tooltip
--trigger 触发类型 axis坐标轴触发 item数据项图形触发
--axisPointer 坐标轴指示器,坐标轴触发有效
--type 指示器类型放上去的样式 'line' 直线指示器 'shadow' 阴影指示器 'cross' 十字准星指示器
--formatter 提示信息内容格式器
--itemWidth 整个提示框组件的宽高
--itemHeight 整个提示框组件的宽高
--textStyle 整个提示框组件的样式
工具箱组件
toolbox
--show 显示隐藏
--orient: 'horizontal' 工具箱组件布局朝向
--feature 各工具配置项
--dataView 数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新
--saveAsImage 保存为图片
--restore 配置项还原
--dataZoom 数据区域缩放。目前只支持直角坐标系的缩放
--magicType 动态类型切换 type: ['line', 'bar', 'stack']
--brush 选框组件的控制按钮
图例组件(最上面)
legend
--data 如果series对象有name 值,则可以不用写data
--textStyle 样式 --color…..
--left right top bottom 距离
--orient: 'vertical' 图例列表的布局朝向
网格组件(控制整个图标)
grid
--left right top bottom 距离
--containLabel 区域是否包含刻度
--borderColor 整个表大边框颜色
区域选择组件
brush
--toolbox 各种选择功能
直角坐标系 grid 中的 xy 轴(可以添加多组)
xAxis,yAxis [{}]
--show 是否轴相关信息
--type 坐标轴类型,'value' 数值轴'category' 类目轴'time' 时间轴'log' 对数轴
--data 坐标刻度上的数据类型
--boundaryGap 坐标两边的留白
--axisLabel 坐标轴刻度标签相关设置
--inside 刻度标签是否朝内,默认朝外。
--formatter 刻度标签的内容格式器
--textStyle 样式
--fontSize
--color …
--axisLine 轴的样式
--show 显示隐藏轴
--lineStyle 线的样式
--splitArea 显示分隔区域(斑马格)
--splitLine 网格分割线
--lineStyle 样式
--color …
--axisTick 刻度
--show 显示隐藏刻度
--alignWithLabel:true 刻度和item居中对齐
--inverse 是否反向排序 内置型数据区域缩放组件
--dataZoom []
--type 滚轮缩放:inside 图上绘制缩放区域:slider
数据信息(可以多个线(数据))
series []
--data 每条线的数据
--type 数据类型,line线型
--name 线的名字(和legend关联 如果有了name,可以删除legend中的)
--markPoint 图表上标点
--data 数据
--type max,min
--name 坐标名
--coord 手动标记 [10, 20]
--x: 100,y: 100 某个屏幕坐标
--yAxis: 10,x: '90%' 固定 x 像素位置
--markLine 图表标线
--data [0]起点数据 [1]终点
--name 线名字
--type 选择 average max min
--yAxis 100 Y 轴值为 100 的水平线
--coord [10, 20] 两个坐标之间的标线 --x: 100,y: 100 两个屏幕坐标之间的标线
--symbol 点的样式
--label 该数据项标签的样式
--stack 数据堆叠 (同一类情况下)
--emphasis 高亮状态样式
--itemStyle 样式
--color 高亮颜色
--shadowBlur 模糊阴影
--shadowColor 模糊颜色
--barWidth 宽度--35%
--smooth 是否平滑显示
--itemStyle item样式
--barBorderRadius 圆角
--color 柱子颜色 分别设置不同颜色 (params){return mycolor[params.dataIndex]}
--border
--borderWidth
--barBorderRadius 边框,宽度 ,圆角
--color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
渐变色
--barCategoryGap 柱子之间的距离
--lable 显示柱子/饼内的文字
--show
--position:'inside' 位置
--formatter:'{b}%' 文字类型 a系列名 b是x类 c是y类
--yAxisIndex 层级,类似定位z-index
--lineStyle 单独修改线的样式 --color….
--areaStyle 区域填充样式
--color 颜色 或者渐变
--shadowColor 阴影颜色
--symbol 拐点-点的类型
--symbolSize 拐点大小
--showSymbol 开始不显示拐点,鼠标经过显示
--itemStyle 拐点颜色边框
--radius: ["40%", "60%"] 第一个值是内圆的半径 第二个值是外圆的半径
--center 圆的中心点(整个位置偏移)
--avoidLabelOverlap 防止标签过多重叠,自动挪动。可以false关闭
--labelLine 指上标签的线
--length 指着标签的线分为两段,第一段长度
--length2 指着标签的线分为两段,第二段长度
--roseType 饼图展示类型,突出展示,展示成南丁格尔图
--backgroundStyle 是否显示柱条的背景色 通过 backgroundStyle 配置背景样式。
--backgroundStyle 每一个柱条的背景样式