echarts属性的设置（完整大全）


// 图表标题
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,           // 标题边框线宽，单位px，默认为0（无边框）padding: 5,             // 标题内边距，单位px，默认各方向内边距为5，// 接受数组分别设定上右下左边距，同cssitemGap: 10,             // 主副标题纵向间隔，单位px，默认为10，textStyle: {fontSize: 18,fontWeight: 'bolder',color: '#333'                             // 主标题文字颜色},subtextStyle: {color: '#aaa'                            // 副标题文字颜色}
},// 图例
legend: {orient: 'horizontal',          // 布局方式，默认为水平布局，可选为：// 'horizontal' ¦ 'vertical'x: 'center',                // 水平安放位置，默认为全图居中，可选为：// 'center' ¦ 'left' ¦ 'right'// ¦ {number}（x坐标，单位px）y: 'top',              // 垂直安放位置，默认为全图顶端，可选为：// 'top' ¦ 'bottom' ¦ 'center'// ¦ {number}（y坐标，单位px）backgroundColor: 'rgba(0,0,0,0)',borderColor: '#ccc',            // 图例边框颜色borderWidth: 0,                // 图例边框线宽，单位px，默认为0（无边框）padding: 5,                  // 图例内边距，单位px，默认各方向内边距为5，// 接受数组分别设定上右下左边距，同cssitemGap: 10,              // 各个item之间的间隔，单位px，默认为10，// 横向布局时为水平间隔，纵向布局时为纵向间隔itemWidth: 20,             // 图例图形宽度itemHeight: 14,            // 图例图形高度textStyle: {color: '#333'                              // 图例文字颜色}
},// 值域
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，// 接受数组分别设定上右下左边距，同cssitemGap: 10,               // 各个item之间的间隔，单位px，默认为10，// 横向布局时为水平间隔，纵向布局时为纵向间隔itemWidth: 20,             // 值域图形宽度，线性渐变水平布局宽度为该值 * 10itemHeight: 14,            // 值域图形高度，线性渐变垂直布局高度为该值 * 10splitNumber: 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，// 接受数组分别设定上右下左边距，同cssitemGap: 10,                  // 各个item之间的间隔，单位px，默认为10，// 横向布局时为水平间隔，纵向布局时为纵向间隔itemSize: 16,              // 工具箱图形宽度featureImageIcon : {},            // 自定义图片iconfeatureTitle : {mark : '辅助线开关',markUndo : '删除辅助线',markClear : '清空辅助线',dataZoom : '区域缩放',dataZoomReset : '区域缩放后退',dataView : '数据视图',lineChart : '折线图切换',barChart : '柱形图切换',restore : '还原',saveAsImage : '保存为图片'}
},// 提示框
tooltip: {trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位mshideDelay: 100,            // 隐藏延迟，单位mstransitionDuration : 0.4,         // 动画变换时间，单位sbackgroundColor: 'rgba(0,0,0,0.7)',  // 提示背景颜色，默认为透明度为0.7的黑色borderColor: '#333',            // 提示边框颜色borderRadius: 4,                // 提示边框圆角，单位px，默认为4borderWidth: 0,                // 提示边框线宽，单位px，默认为0（无边框）padding: 5,                   // 提示内边距，单位px，默认各方向内边距为5，// 接受数组分别设定上右下左边距，同cssaxisPointer : {                 // 坐标轴指示器，坐标轴触发有效type : 'line',         // 默认为直线，可选为：'line' | 'shadow'lineStyle : {          // 直线指示器样式设置color: '#48b',width: 2,type: 'solid'},shadowStyle : {              // 阴影指示器样式设置width: 'auto',         // 阴影大小color: 'rgba(150,150,150,0.3)'  // 阴影颜色}},textStyle: {color: '#fff'}
},// 区域缩放控制器
dataZoom: {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)'       // 手柄颜色
},// 网格
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'
},// 类目轴
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.axisLabelshow: true,interval: 'auto',rotate: 0,margin: 8,// formatter: null,textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEcolor: '#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,        // 分割段数，默认为5axisLine: {             // 坐标轴线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.axisLabelshow: true,rotate: 0,margin: 8,// formatter: null,textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEcolor: '#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: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEcolor: '#333'}},axisLine: {            // 坐标轴线show: true,         // 默认显示，属性show控制显示与否lineStyle: {        // 属性lineStyle控制线条样式color: '#ccc',width: 1,type: 'solid'}},axisLabel: {                // 坐标轴文本标签，详见axis.axisLabelshow: false,textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEcolor: '#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'}}
},// 柱形图默认参数
bar: {barMinHeight: 0,            // 最小高度改为0// barWidth: null,        // 默认自适应barGap: '30%',           // 柱间距离，默认为柱形宽度的30%，可设固定值barCategoryGap : '20%',   // 类目间柱形距离，默认为类目间距的20%，可设固定值itemStyle: {normal: {// color: '各异',barBorderColor: '#fff',         // 柱条边线barBorderRadius: 0,            // 柱条边线圆角，单位px，默认为0barBorderWidth: 1,             // 柱条边线线宽，单位px，默认为1label: {show: false// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE}},emphasis: {// color: '各异',barBorderColor: 'rgba(0,0,0,0)',            // 柱条边线barBorderRadius: 0,                // 柱条边线圆角，单位px，默认为0barBorderWidth: 1,                     // 柱条边线线宽，单位px，默认为1label: {show: false// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为//           'inside'|'left'|'right'|'top'|'bottom'// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE}}}
},// 折线图默认参数
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,             // 拐点图形类型symbolSize: 2,          // 拐点图形大小//symbolRotate : null,       // 拐点图形旋转控制showAllSymbol: false                   // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
},// K线图默认参数
k: {// barWidth : null              // 默认自适应// barMaxWidth : null           // 默认自适应itemStyle: {normal: {color: '#fff',      // 阳线填充颜色color0: '#00aa11',  // 阴线填充颜色lineStyle: {width: 1,color: '#ff3200',    // 阳线边框颜色color0: '#00aa11'          // 阴线边框颜色}},emphasis: {// color: 各异,// color0: 各异}}
},// 散点图默认参数
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}}}
},// 雷达图默认参数
radar : {itemStyle: {normal: {// color: 各异,label: {show: false},lineStyle: {width: 2,type: 'solid'}},emphasis: {// color: 各异,label: {show: false}}},//symbol: null,          // 拐点图形类型symbolSize: 2          // 可计算特性参数，空数据拖拽提示图形大小//symbolRotate : null,    // 图形旋转控制
},// 饼图默认参数
pie: {center : ['50%', '50%'],          // 默认全局居中radius : [0, '75%'],clockWise : false,             // 默认逆时针startAngle: 90,minAngle: 0,                 // 最小角度改为0selectedOffset: 10,         // 选中是扇区偏移量itemStyle: {normal: {// color: 各异,borderColor: '#fff',borderWidth: 1,label: {show: true,position: 'outer'// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE},labelLine: {show: true,length: 20,lineStyle: {// color: 各异,width: 1,type: 'solid'}}},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: 各异,     // 标注边线颜色，优先于colorborderWidth: 2,         // 标注边线线宽，单位px，默认为1label: {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介绍类型，如果都一样，可以直接传stringsymbol: ['circle', 'arrow'], // 标线起始和结束的symbol大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2symbolSize: [2, 4],// 标线起始和结束的symbol旋转控制//symbolRotate : null,itemStyle: {normal: {// color: 各异,           // 标线主色，线色，symbol主色// borderColor: 随color,       // 标线symbol边框颜色，优先于colorborderWidth: 2,          // 标线symbol边框线宽，单位px，默认为2label: {show: false,// 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'position: 'inside', textStyle: {         // 默认使用全局文本样式，详见TEXTSTYLEcolor: '#333'}},lineStyle: {// color: 随borderColor,    // 主色，线色，优先级高于borderColor和color// width: 随borderWidth,    // 优先于borderWidthtype: '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'
},// 默认标志图形类型列表
symbolList : ['circle', 'rectangle', 'triangle', 'diamond','emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
],
loadingText : 'Loading...',
// 可计算特性配置，孤岛，提示颜色
calculable: false,                       // 默认关闭可计算特性
calculableColor: 'rgba(255,165,0,0.6)',       // 拖拽提示边框颜色
calculableHolderColor: '#ccc',               // 可计算占位提示颜色
nameConnector: ' & ',
valueConnector: ' : ',
animation: true,
animationThreshold: 2500,           // 动画元素阀值，产生的图形原素超过2500不出动画
addDataAnimation: true,         // 动态数据接口是否开启动画效果
animationDuration: 2000,
animationEasing: 'ExponentialOut'             //BounceOut

echarts属性的设置（完整大全）相关推荐

ECharts属性设置
ECharts属性设置转载于:https://www.cnblogs.com/macT/p/10212684.html
Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码
设置标题背景颜色以及设置副标题和标题加边框, 设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码 <!DOCTYPE html> <html lang="en&q ...
DBGrid 各属性的设置
在 Delphi 语言的数据库编程中,DBGrid 是显示数据的主要手段之一.但是 DBGrid 缺省的外观未免显得单调和缺乏创意.其实,我们完全可以在我们的程序中通过编程来达到美化DBGrid 外观 ...
wifi虚拟服务器名称怎么弄,虚拟wifi设置方法大全【图解】
现在手机的功能都很强大,我们除了可以利用手机通讯之外,手机还具有很多的功能.我们可以在手机上面听歌.看视频.上网等.这些功能都是离不开网络的,只有有了网络我们才能更好的使用这些功能.如果是直接使用数据 ...
Echarts图表中设置背景图片
Echarts 图表中设置背景图片在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片. graphi ...
echarts之渐变色设置
前言: 用过echarts的朋友们应该都知道,里边的一般都是单色的,但是如果UI把它设计成了渐变色,前端该怎么处理呢? 法一:echarts.graphic.LinearGradient echart ...
python3获取用户输入_群晖IPV6 DDNS设置终极大全(移动用户进)(二)
如何申请一个免费的顶级域名:群晖IPV6 DDNS设置终极大全(移动用户进)(一) 前面的文章中我们已经获取了有了一台分配有IPV6地址的群晖和一个免费顶级域名,下面我们要讲如何把它解析到我们的国内D ...
CSS 计算属性 calc()的完整指南（下）
从之前的文章:CSS 计算属性 calc()的完整指南(一),我们可以学习到几个方面: calc() 只作用于属性值 calc() 用于长度和其他数值不能在媒体查询中使用混合单位与预处理器数学比 ...
R语言attributes函数（获取属性、设置属性）、attr函数（改变一个属性）、structure函数（改变数据形状）实战
R语言attributes函数(获取属性.设置属性).attr函数(改变一个属性).structure函数(改变数据形状)实战目录
问题.NET--win7 IIS唯一密钥属性“VALUE”设置为“DEFAULT.ASPX”时,无法添加类型为“add”的重复集合...
问题现象:.NET--win7 IIS唯一密钥属性"VALUE"设置为"DEFAULT.ASPX"时,无法添加类型为"add"的重复集合问 ...

echarts属性的设置（完整大全）

echarts属性的设置（完整大全）相关推荐

最新文章

热门文章