echarts配置项

标题组件

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 每一个柱条的背景样式

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值