ECHARTS配置项手册
- 官网手册
- title
- legend
- grid
- xAxis
- yAxis
- polar
- radiusAxis
- angleAxis
- radar
- dataZoom
- visualMap
- tooltip
- axispointer
- toolbox
- brush
- geo
- parallel
- parallelAxis
- singleAxis
- timeline
- graphic
- calendar
- dataset
- aria
- series
- darkMode
- color
- backgroundColor
- textStyle
- animation
- animationThreshold
- animationDuration
- animationEasing
- animationDelay
- animationDurationUpdate
- animationEasingUpdate
- animationDelayUpdate
- stateAnimation
- blendMode
- hoverlayerThreshold
- useUTC
- options
- media
- categoryAxis
官网手册
title
title: {
x: 'left', // 水平安放位置,默认为左对齐,可选为:
// center|left|right
// ¦ {number}(x坐标,单位px)
y: 'top', // 垂直安放位置,默认为全图顶端,可选为:
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}(y坐标,单位px)
//textAlign: null // 水平对齐方式,默认根据x设置自动调整
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜色
borderWidth: 0, // 标题边框线宽,默认为0px(无边框)
padding: 5, // 标题内边距,默认各方向内边距为5px,
// 接受数组分别设定上右下左边距,同css
itemGap: 10, // 主副标题纵向间隔,单位px,默认为10,
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题文字颜色
},
subtextStyle: {
color: '#aaa' // 副标题文字颜色
}
},
legend
legend: {
type: 'scroll', plain普通图例(缺省)|scroll可翻页图例
selectedMode:false,//取消图例上的点击事件
orient: 'horizontal', // 布局方式,默认为水平布局,可选为:
// 'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置,默认为全图居中,可选为:
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}(x坐标,单位px)
y: 'top', // 垂直安放位置,默认为全图顶端,可选为:
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}(y坐标,单位px)
left: 'right', //位置
icon: "rect",//形状 类型包括 circle,rect矩形,line,roundRect,triangle,diamond,pin,arrow,none
itemWidth: 10, // 设置宽度
itemHeight: 4, // 设置高度
itemGap: 20, // 设置间距
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜色
borderWidth: 0, // 图例边框线宽,单位px,默认为0(无边框)
padding: 5, // 图例内边距,单位px,默认各方向内边距为5,
// 接受数组分别设定上右下左边距,同css
itemGap: 10, // 各个item之间的间隔,单位px,默认为10,
// 横向布局时为水平间隔,纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: '#333' // 图例文字颜色
}
},
grid
grid: {
x: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
},
xAxis
xAxis: {
boundaryGap: false,// 刻度离纵轴有无间隙,默认true有间距
type: 'category', //'value' 数值轴,适用于连续数据。 'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。 'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。 'log' 对数轴。适用于对数数据。
position:'bottom', // 'bottom' | 'top'
name: '(ETD)',// 横轴名称
nameLocation: "center",
nameTextStyle:{
fontSize:12,
fontWeight:'bold',
color:'#ff0033',
//align:'left',
},
nameLocation:'middle',//坐标轴的位置 'start' | 'center' | 'end'
nameGap:50,//坐标轴名称与轴线之间的距离
nameRotate:90,//坐标轴名字旋转角度值,
axisLabel : {//坐标轴刻度标签的相关设置。
// clickable:true,//并给图表添加单击事件 根据返回值判断点击的是哪里
interval: 0,
**//注:interval 坐标轴刻度标签的显示间隔(在类目轴中有效哦),默认会采用标签不重叠的方式显示标签(也就是默认会将部分文字显示不全)
可以设置为0强制显示所有标签,如果设置为1,表示隔一个标签显示一个标签,如果为3,表示隔3个标签显示一个标签,以此类推**
inside:false, // 标签朝内还是朝外
rotate: 40,// 文字倾斜度
//-----------文字竖直显示--------------------
formatter:function(value){
return value.split("").join("\n");
}
//-----------------------------------两个字垂直显示----------------------------
formatter:function(value)
{
debugger
var ret = "";//拼接加\n返回的类目项
var maxLength = 2;//每项显示文字个数
var valLength = value.length;//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1)//如果类目项的文字大于3,
{
for (var i = 0; i < rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxLength;//开始截取的位置
var end = start + maxLength;//结束截取的位置
//这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; //凭借最终的字符串
}
return ret;
}
else {
return value;
}
}
//------------------------------------------------------------------------------------
textStyle:{
color:'#fff,
fontSize:'20px',
align:'center'
}
},
axisLine:{
lineStyle:{
color:'red' //x轴颜色
},
symbol:['none','arrow'], //轴线两边的箭头
symbolSize:[8, 12] //箭头大小
},
data: ['2020-07-08 周三','2020-07-09 周四',].map((str) => {
return str.replace(' ','\n')
}),// 横轴坐标值
// data: [{value:'1',textStyle:{
color:'#ff0033',
}}, '2/7', '3', '4', '5', '6', '7']//每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
splitLine: {
show: false,
lineStyle:{ //属性lineStyle(详见lineStyle)控制线条样式
color:['#ccc'],
width:1,
type:'solid'
}
}, // 取消X轴的网格
splitArea:{ //分隔区域
show:true,
areaStyle:{
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],
}
},
axisTick: { // 显示隐藏刻度线
inside:true, //刻度朝内还是朝外
alignWithLabel: true // 刻度线是否显示
}
}
```## dataRange-值域
```css
dataRange: {
orient: 'vertical', // 布局方式,默认为垂直布局,可选为:
// 'horizontal' ¦ 'vertical'
x: 'left', // 水平安放位置,默认为全图左对齐,可选为:
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}(x坐标,单位px)
y: 'bottom', // 垂直安放位置,默认为全图底部,可选为:
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}(y坐标,单位px)
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 值域边框颜色
borderWidth: 0, // 值域边框线宽,单位px,默认为0(无边框)
padding: 5, // 值域内边距,单位px,默认各方向内边距为5,
// 接受数组分别设定上右下左边距,同css
itemGap: 10, // 各个item之间的间隔,单位px,默认为10,
// 横向布局时为水平间隔,纵向布局时为纵向间隔
itemWidth: 20, // 值域图形宽度,线性渐变水平布局宽度为该值 * 10
itemHeight: 14, // 值域图形高度,线性渐变垂直布局高度为该值 * 10
splitNumber: 5, // 分割段数,默认为5,为0时为线性渐变
color:['#1e90ff','#f0ffff'],//颜色
//text:['高','低'], // 文本,默认为数值文本
textStyle: {
color: '#333' // 值域文字颜色
}
},
toolbox: {
orient: 'horizontal', // 布局方式,默认为水平布局,可选为:
// 'horizontal' ¦ 'vertical'
x: 'right', // 水平安放位置,默认为全图右对齐,可选为:
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}(x坐标,单位px)
y: 'top', // 垂直安放位置,默认为全图顶端,可选为:
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}(y坐标,单位px)
color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
borderColor: '#ccc', // 工具箱边框颜色
borderWidth: 0, // 工具箱边框线宽,单位px,默认为0(无边框)
padding: 5, // 工具箱内边距,单位px,默认各方向内边距为5,
// 接受数组分别设定上右下左边距,同css
itemGap: 10, // 各个item之间的间隔,单位px,默认为10,
// 横向布局时为水平间隔,纵向布局时为纵向间隔
itemSize: 16, // 工具箱图形宽度
featureImageIcon : {}, // 自定义图片icon
featureTitle : {
mark : '辅助线开关',
markUndo : '删除辅助线',
markClear : '清空辅助线',
dataZoom : '区域缩放',
dataZoomReset : '区域缩放后退',
dataView : '数据视图',
lineChart : '折线图切换',
barChart : '柱形图切换',
restore : '还原',
saveAsImage : '保存为图片'
}
},
yAxis
yAxis: {
type: 'value',
name: " 金额( 单位: 万元 )",
nameRotate: 90,
nameLocation: "middle",
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, -10] ,//调整位置
},
scale: true,//自动适配y轴,不需要必须从0开始 或者选择下边这种设置最大最小值
min: function(value) {return value.min;},
max: function(value) {return value.max;},
axisLine: {
show: false,
lineStyle: {
type: 'dashed',
color: 'rgba(135,140,147,0.8)'
},
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: "16",
},
formatter:function(value){ //设置Y轴显示的名字,超出做..隐藏
var res = value;
if(res.length >7){
res = res.substring(0,6) + ".."
}
return res;
}
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //背景线为虚线
color: 'rgba(135,140,147,.8)' //左侧显示线
}
},
axisLabel: {
formatter: '{value}',
color: '#fff',
fontSize: 14
},
axisTick: {
show: true, //刻度展示
},
},
polar
radiusAxis
angleAxis
radar
dataZoom
dataZoom: {
start: 80,
type: "inside" //slider内置型数据区域缩放组件|inside 内置型数据区域缩放组件
orient: 'horizontal', // 布局方式,默认为水平布局,可选为:
// 'horizontal' ¦ 'vertical'
// x: {number}, // 水平安放位置,默认为根据grid参数适配,可选为:
// {number}(x坐标,单位px)
// y: {number}, // 垂直安放位置,默认为根据grid参数适配,可选为:
// {number}(y坐标,单位px)
// width: {number}, // 指定宽度,横向布局时默认为根据grid参数适配
// height: {number}, // 指定高度,纵向布局时默认为根据grid参数适配
backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
dataBackgroundColor: '#eee', // 数据背景颜色
fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
handleColor: 'rgba(70,130,180,0.8)' // 手柄颜色
},
visualMap
tooltip
show:true // 是否显示提示框组件,含提示框悬浮层和axisPointer
trigger:"item" // item|axis|none
axisPoninter:{}
showContent:true //是否显示提示框浮层,默认显示。只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false。
alwaysShowContent:true //是否永远显示提示框内容,默认情况下在移出可触发提示框区域后 一定时间 后隐藏,设置为 true 可以保证一直显示提示框内容。该属性为 ECharts 3.0 中新加。
triggerOn = 'mousemove|click'
showDelay: 0
//浮层显示的延迟,单位为 ms,默认没有延迟,也不建议设置。在 triggerOn 为 'mousemove' 时有效。
hideDelay: 100 ,
//浮层隐藏的延迟,单位为 ms,在 alwaysShowContent 为 true 的时候无效。
enterable: false ,
//鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为 true。
renderMode: 'html' ,
//浮层的渲染模式,默认以 'html 即额外的 DOM 节点展示 tooltip;此外还可以设置为 'richText' 表示以富文本的形式渲染,渲染的结果在图表对应的 Canvas 中,这对于一些没有 DOM 的环境(如微信小程序)有更好的支持。
confine: false , //是否将 tooltip 框限制在图表的区域内。
tooltip: { //提示框
trigger: 'item', // 触发类型,默认数据触发,见下图,可选为:'item' ¦ 'axis' [1]
showDelay: 20, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
hideDelay: 100, // 隐藏延迟,单位ms
transitionDuration : 0.4, // 动画变换时间,单位s
backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色,默认为透明度为0.7的黑色
borderColor: '#333', // 提示边框颜色
borderRadius: 4, // 提示边框圆角,单位px,默认为4
borderWidth: 0, // 提示边框线宽,单位px,默认为0(无边框)
padding: 5, // 提示内边距,单位px,默认各方向内边距为5,
// 接受数组分别设定上右下左边距,同css
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'line', // 默认为直线,可选为:'line' | 'shadow'
lineStyle : { // 直线指示器样式设置
color: '#48b',
width: 2,
type: 'solid',
colorStops: [{ //指示器线上颜色上下区域分布
offset: 0,
color: 'red'//颜色
}, {
offset: 0.5,
color: '#48b3FF',
}, {
offset: 1,
color: '#d9efff'
}],
},
shadowStyle : { // 阴影指示器样式设置
width: 'auto', // 阴影大小
color: 'rgba(150,150,150,0.3)' // 阴影颜色
}
},
textStyle: {//文本样式
color: '#fff'
}
},
[1]:提示
trigger值为item: 则鼠标移入后 tooltip 显示内容为每一个bar的seriesname 和 value 内容。
trigger值为为axis: 则鼠标移入后tooltip显示内容为全部bar的seriesname 和 value 内容。
1.tooltip提示内容过多分列显示并列
【问题解决查看详情】
2.多个echarts图共享tooltip
【问题解决查看详情】
axispointer
toolbox
brush
geo
parallel
parallelAxis
singleAxis
timeline
graphic
calendar
dataset
aria
series
type-line
line: {
itemStyle: {
normal: {
// color: 各异,
label: {
show: false
// position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
lineStyle: {
width: 2,
type: 'solid',
shadowColor : 'rgba(0,0,0,0)', //默认透明
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
emphasis: {
// color: 各异,
label: {
show: false
// position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
}
}
},
//smooth : false,
//symbol: null, // 拐点图形类型
symbol:'star', //拐点样式图形类型 默认循环类型有circle,rectangle,triangle,diamond,emptyCircle,emptyTriangle,emptyDiamond。
//还有heart心形,droplet水滴,pin标注,arrow箭头,star五角星,其中'star数字'如star6可以显示六角星,图片可是为'image://+路径'
symbolSize: 2, // 拐点图形大小
//symbolRotate : null, // 拐点图形旋转控制
showAllSymbol: false // 标志图形默认只有主轴显示(随主轴标签间隔隐藏策略)
},
visualMap: {
top: 10,
right: 10,
pieces: [{
gt: 0,
lte: 300, //y轴的0到300区间折线颜色为#660099
color: '#660099'
}, {
gt: 300, //y轴300以上的颜色为#660099
color: 'pink'
}],
outOfRange: {
color: 'red'
}
},
type-bar
bar: {
barMinHeight: 0, // 最小高度改为0
// barWidth: null, // 默认自适应
barGap: '30%', // 柱间距离,默认为柱形宽度的30%,可设固定值
barCategoryGap : '20%', // 类目间柱形距离,默认为类目间距的20%,可设固定值
itemStyle: {
normal: {
// color: '各异',
barBorderColor: '#fff', // 柱条边线
barBorderRadius: 0, // 柱条边线圆角,单位px,默认为0
barBorderWidth: 1, // 柱条边线线宽,单位px,默认为1
label: {
show: false
// position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
}
},
emphasis: {
// color: '各异',
barBorderColor: 'rgba(0,0,0,0)', // 柱条边线
barBorderRadius: 0, // 柱条边线圆角,单位px,默认为0
barBorderWidth: 1, // 柱条边线线宽,单位px,默认为1
label: {
show: false
// position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
}
}
}
},
type-pie
相关文档 饼状图配置
type:'pie',
id:"",
name:"",
colorBy: 'data' ,
legendHoverLink: true ,//是否启用图例 hover 时的联动高亮。
coordinateSystem:""//null | geo | calendar | 'none'
geoIndex: 0 ,
center : ['50%', '50%'], // 默认全局居中
radius : [0, '75%'],
//radius :'55%' // 系列展示的百分比
clockWise : false, // 默认逆时针
startAngle: 90,
minAngle: 0, // 最小角度改为0
selectedOffset: 10, // 选中是扇区偏移量
itemStyle: {
shadowBlur:200, //阴影的大小
shadowOffsetX:0, //阴影水平方向的偏移
shadowOffsetY:0, //阴影垂直方向的偏移
shadowColor:'rgba(0,0,0,0.5) //阴影颜色,0.5为透明度
normal: {
// color: 各异,
borderColor: '#fff',
borderWidth: 1,
roseType:'angle', //设置为南丁格尔图,不设置就不写
label: {
show: true,
position: 'outer'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
labelLine: {
show: true,
length: 20,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
}
}
},
//emphasis是鼠标hover时候的高亮样式
emphasis: {
// color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
label: {
show: false
// position: 'outer'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
labelLine: {
show: false,
length: 20,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
}
}
}
}
},
map: {
mapType: 'china', // 各省的mapType暂时都用中文
mapLocation: {
x : 'center',
y : 'center'
// width // 自适应
// height // 自适应
},
showLegendSymbol : true, // 显示图例颜色标识(系列标识的小圆点),存在legend时生效
itemStyle: {
normal: {
// color: 各异,
borderColor: '#fff',
borderWidth: 1,
areaStyle: {
color: '#ccc'//rgba(135,206,250,0.8)
},
label: {
show: false,
textStyle: {
color: 'rgba(139,69,19,1)'
}
}
},
emphasis: { // 也是选中样式
// color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
areaStyle: {
color: 'rgba(255,215,0,0.8)'
},
label: {
show: false,
textStyle: {
color: 'rgba(139,69,19,1)'
}
}
}
}
},
force : {
// 数据map到圆的半径的最小值和最大值
minRadius : 10,
maxRadius : 20,
density : 1.0,
attractiveness : 1.0,
// 初始化的随机大小位置
initSize : 300,
// 向心力因子,越大向心力越大
centripetal : 1,
// 冷却因子
coolDown : 0.99,
// 分类里如果有样式会覆盖节点默认样式
itemStyle: {
normal: {
// color: 各异,
label: {
show: false
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
nodeStyle : {
brushType : 'both',
color : '#f08c2e',
strokeColor : '#5182ab'
},
linkStyle : {
strokeColor : '#5182ab'
}
},
emphasis: {
// color: 各异,
label: {
show: false
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
nodeStyle : {},
linkStyle : {}
}
}
},
chord : {
radius : ['65%', '75%'],
center : ['50%', '50%'],
padding : 2,
sort : 'none', // can be 'none', 'ascending', 'descending'
sortSub : 'none', // can be 'none', 'ascending', 'descending'
startAngle : 90,
clockWise : false,
showScale : false,
showScaleText : false,
itemStyle : {
normal : {
label : {
show : true
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
lineStyle : {
width : 0,
color : '#000'
},
chordStyle : {
lineStyle : {
width : 1,
color : '#666'
}
}
},
emphasis : {
lineStyle : {
width : 0,
color : '#000'
},
chordStyle : {
lineStyle : {
width : 2,
color : '#333'
}
}
}
}
},
island: {
r: 15,
calculateStep: 0.1 // 滚轮可计算步长 0.1 = 10%
},
markPoint : {
symbol: 'pin', // 标注类型
symbolSize: 10, // 标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
//symbolRotate : null, // 标注旋转控制
itemStyle: {
normal: {
// color: 各异,
// borderColor: 各异, // 标注边线颜色,优先于color
borderWidth: 2, // 标注边线线宽,单位px,默认为1
label: {
show: true,
position: 'inside' // 可选为'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
}
},
emphasis: {
// color: 各异
label: {
show: true
// position: 'inside' // 'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
}
}
}
},
markLine : {
// 标线起始和结束的symbol介绍类型,如果都一样,可以直接传string
symbol: ['circle', 'arrow'],
// 标线起始和结束的symbol大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
symbolSize: [2, 4],
// 标线起始和结束的symbol旋转控制
//symbolRotate : null,
itemStyle: {
normal: {
// color: 各异, // 标线主色,线色,symbol主色
// borderColor: 随color, // 标线symbol边框颜色,优先于color
borderWidth: 2, // 标线symbol边框线宽,单位px,默认为2
label: {
show: false,
// 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
position: 'inside',
textStyle: { // 默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
lineStyle: {
// color: 随borderColor, // 主色,线色,优先级高于borderColor和color
// width: 随borderWidth, // 优先于borderWidth
type: 'solid',
shadowColor : 'rgba(0,0,0,0)', //默认透明
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
emphasis: {
// color: 各异
label: {
show: false
// position: 'inside' // 'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
lineStyle : {}
}
}
},
textStyle: {
decoration: 'none',
fontFamily: 'Arial, Verdana, sans-serif',
fontFamily2: '微软雅黑', // IE8- 字体模糊并且不支持不同字体混排,额外指定一份
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal'
},
k: {
// barWidth : null // 默认自适应
// barMaxWidth : null // 默认自适应
itemStyle: {
normal: {
color: '#fff', // 阳线填充颜色
color0: '#00aa11', // 阴线填充颜色
lineStyle: {
width: 1,
color: '#ff3200', // 阳线边框颜色
color0: '#00aa11' // 阴线边框颜色
}
},
emphasis: {
// color: 各异,
// color0: 各异
}
}
},
darkMode
color
backgroundColor
textStyle
animation
animationThreshold
animationDuration
animationEasing
animationDelay
animationDurationUpdate
animationEasingUpdate
animationDelayUpdate
stateAnimation
blendMode
hoverlayerThreshold
useUTC
options
media
移动端自适应
query
同时写两个属性,表示 “且”。
minWidth:undefined
//minWidth: 200 表示『大于等于 200px 宽度』
maxHeight::undefined
//minHeight: 200 表示『大于等于 200px 高度』。
minAspectRatio:undefined
//长宽比。值如 1.3。
option:…
categoryAxis
categoryAxis: {
position: 'bottom', // 位置
nameLocation: 'end', // 坐标轴名字位置,支持'start' | 'end'
boundaryGap: true, // 类目起始和结束两端空白策略
axisLine: { // 坐标轴线
show: true, // 默认显示,属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐标轴小标记
show: true, // 属性show控制显示与否,默认不显示
interval: 'auto',
// onGap: null,
inside : false, // 控制小标记是否在grid里
length :5, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#333',
width: 1
}
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
show: true,
interval: 'auto',
rotate: 0,
margin: 8,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
splitLine: { // 分隔线
show: true, // 默认显示,属性show控制显示与否
// onGap: null,
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分隔区域
show: false, // 默认不显示,属性show控制显示与否
// onGap: null,
areaStyle: { // 属性areaStyle(详见areaStyle)控制区域样式
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
}
}
},
数值型坐标轴默认参数
valueAxis: {
position: 'left', // 位置
nameLocation: 'end', // 坐标轴名字位置,支持'start' | 'end'
nameTextStyle: {}, // 坐标轴文字样式,默认取全局样式
boundaryGap: [0, 0], // 数值起始和结束两端空白策略
splitNumber: 5, // 分割段数,默认为5
axisLine: { // 坐标轴线
show: true, // 默认显示,属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐标轴小标记
show: false, // 属性show控制显示与否,默认不显示
inside : false, // 控制小标记是否在grid里
length :5, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#333',
width: 1
}
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
show: true,
rotate: 0,
margin: 8,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
splitLine: { // 分隔线
show: true, // 默认显示,属性show控制显示与否
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分隔区域
show: false, // 默认不显示,属性show控制显示与否
areaStyle: { // 属性areaStyle(详见areaStyle)控制区域样式
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
}
}
},
polar : {
center : ['50%', '50%'], // 默认全局居中
radius : '75%',
startAngle : 90,
splitNumber : 5,
name : {
show: true,
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
axisLine: { // 坐标轴线
show: true, // 默认显示,属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
color: '#ccc',
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
show: false,
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
splitArea : {
show : true,
areaStyle : {
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
}
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : '#ccc'
}
}
},
十二、创建一个自定义列表
scatter: {
//symbol: null, // 图形类型
symbolSize: 4, // 图形大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
//symbolRotate : null, // 图形旋转控制
large: false, // 大规模散点图
largeThreshold: 2000,// 大规模阀值,large为true且数据量>largeThreshold才启用大规模模式
itemStyle: {
normal: {
// color: 各异,
label: {
show: false
// position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
}
},
emphasis: {
// color: '各异'
label: {
show: false
// position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
}
}
}
},
十七、Echarts图表事件
十八、Echarts相关问题
1、Echarts数据为空时提示无数据
(1)通过title实现
if (chartData.length == 0 ) { //暂无数据
option = { //为空时展示的opiton
title: {
text: '暂无数据',
x: 'center',
y: 'center',
textStyle: {
fontSize: 14,
fontWeight: 'normal',
}
}
}
} else {
option={...} //正常的option配置
}
(2)通过 graphic 配置项来实现
const init = (data) => {
const myChart = echarts.init(document.getElementById('noData'))
const option = {
xAxis: {
show: data.length, // 无数据时不展示 x 轴
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data,
type: 'line'
}
],
graphic: {
type: 'text',
left: 'center',
top: 'middle',
silent: true,
invisible: data.length>0,
style: {
fill: '#9d9d9d',
text: '暂无数据',
font: 'bold 26px sans-serif'
}
}
}
myChart.setOption(option)
}
// const data = [150, 230, 224, 218, 135, 147, 260]
const data = []
init(data)
2、数据视图表格美化
toolbox: { //可以把optionToContent函数单独提取出来
show: true,
feature: {
mark: { show: true },
dataView: {
show: true, readOnly: false,
optionToContent: function (opt) {
let axisData = opt.xAxis[0].data; //坐标数据
let series = opt.series; //折线图数据
let tdHeads = '<td style="padding: 0 10px">时间</td>'; //表头
let tdBodys = ''; //数据
series.forEach(function (item) {
//组装表头
tdHeads += `<td style="padding: 0 10px">${item.name}</td>`;
});
let table = `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>${tdHeads} </tr>`;
for (let i = 0, l = axisData.length; i < l; i++) {
for (let j = 0; j < series.length; j++) {
//组装表数据
tdBodys += `<td>${series[j].data[i]}</td>`;
}
table += `<tr><td style="padding: 0 10px">${axisData[i]}</td>${tdBodys}</tr>`;
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
样式为:
3、Echarts图表加载时存在缓存
//基于准备好的dom,初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
//使用刚指定的配置项和数据显示图表。
myChart.setOption(option,true);
//清空画布,防止缓存
myChart.clear();
//使用刚指定的配置项和数据显示图表。
myChart.setOption(option,true);
Echarts社区
1、Echarts社区
Echarts社区:传送门
2、MCChart
MCChart: 传送门
3、ISQQW
ISQQW:传送门
4、PPchart
:PPchart:传送门
5、Chart.Top
Chart.Top:传送门
6、ChartLib
ChartLib:传送门
Echarts词汇
我还没找到好用的词汇收集工具,这个百度的需要登录,大家先凑合用吧,要是有好用的可以推荐给我echart词汇:传送门