echarts各配置项属性说明

  • 一、图表标题
  • 二、legend图例
  • 三、值域
  • 四、tooltip提示框
  • 五、dataZoom区域缩放控制器
  • 六、grid网格
  • 七、生成一个适合你的列表
  • 八、数值型坐标轴默认参数
  • 九、设定内容居中、居左、居右
  • 十、折线图默认参数
  • 十一、图类
    • 1、饼状图
    • 2、柱状图
  • 十二、创建一个自定义列表
  • 十三、创建一个自定义列表
  • 十四、可计算特性配置,孤岛,提示颜色
  • 十五、X轴上可配置项
  • 十六、Echarts图表加载的缓存问题
  • 十七、Echarts图表事件
  • 十八、Echarts展示无数据
    • 1、title
    • 2、通过 graphic 配置项来实现

参考手册 :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,            // 标题边框线宽,默认为0px(无边框)padding: 5,                // 标题内边距,默认各方向内边距为5px,// 接受数组分别设定上右下左边距,同cssitemGap: 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,noneitemWidth: 10,  // 设置宽度itemHeight: 4, // 设置高度itemGap: 20, // 设置间距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提示框

tooltip: {                         //提示框trigger: 'item',           // 触发类型,默认数据触发,见下图,可选为:'item' ¦ 'axis'  [1]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',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 内容。

五、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)'     // 手柄颜色},

六、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'},

七、生成一个适合你的列表

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,         // 拐点图形类型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区间折线颜色为#660099color: '#660099'}, {gt: 300, //y轴300以上的颜色为#660099color: 'pink'}],outOfRange: {color: 'red'}},

十一、图类

1、饼状图

相关文档 饼状图配置

pie: {center : ['50%', '50%'],    // 默认全局居中radius : [0, '75%'],//radius :'55%'             // 系列展示的百分比clockWise : false,          // 默认逆时针startAngle: 90,minAngle: 0,                // 最小角度改为0selectedOffset: 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: 各异,     // 标注边线颜色,优先于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'},
k: {// barWidth : null          // 默认自适应// barMaxWidth : null       // 默认自适应itemStyle: {normal: {color: '#fff',          // 阳线填充颜色color0: '#00aa11',      // 阴线填充颜色lineStyle: {width: 1,color: '#ff3200',   // 阳线边框颜色color0: '#00aa11'   // 阴线边框颜色}},emphasis: {// color: 各异,// color0: 各异}}},

2、柱状图

十二、创建一个自定义列表

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}}}},

十三、创建一个自定义列表

  1. List item
symbolList : [
2       'circle', 'rectangle', 'triangle', 'diamond',
3       'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
4     ],

十四、可计算特性配置,孤岛,提示颜色

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

十五、X轴上可配置项

xAxis: [{type: 'category',data: sourceName,boundaryGap: true, 图表不从0开始axisTick: {alignWithLabel: true},axisLabel: {interval:0,rotate:20//角度顺时针计算的 X轴坐标文字倾斜}}],

十六、Echarts图表加载的缓存问题

//基于准备好的dom,初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));//使用刚指定的配置项和数据显示图表。
myChart.setOption(option,true);
//清空画布,防止缓存
myChart.clear();
//使用刚指定的配置项和数据显示图表。
myChart.setOption(option,true);

十七、Echarts图表事件

链接:菜鸟echarts事件介绍

十八、Echarts展示无数据

1、title

   if (chartData.length == 0 ) {  //暂无数据option = {   //为空时展示的opitontitle: {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)

echarts配置项属性值设置相关推荐

  1. java 隐藏地址栏参数_要想在浏览器的地址栏上的URL中隐藏传输的参数,需要将form标签的method属性值设置为( )。 (5.0分)_学小易找答案...

    [填空题]若在JSP页面的不同作用域中有相同名称的对象,且EL表达式中又省略了相应的作用域类型名,则系统将会按照 . . . 的先后顺序查找相应对象. (20.0分) [简答题]AJAX异步请求过程中 ...

  2. html如何设置重置按钮,在HTML网页上,表单中元素的TYPE属性值设置为()时,用语创建重置按钮。...

    在HTML网页上,表单中元素的TYPE属性值设置为()时,用语创建重置按钮. 更多相关问题 A non-current asset ( cost $15,000, depreciation $10,0 ...

  3. Python基础教程:属性值设置和判断变量是否存在

    介绍Python设置属性值方法setattr()和判断变量是否存在的方法 以属性名为变量的方式给一个对象添加属性 使用 setattr 方法 obj = SomeClass() key = 'key_ ...

  4. SplitContainer.SplitterDistance属性值设置应注意的与FixedPanel有关

    使用 SplitterDistance 属性可确定或指定拆分器离容器的左边缘或上边缘的距离(以像素为单位). 但应注意的与FixedPanel有关,譬如下面代码目的是设置SplitterDistanc ...

  5. WPF 后台常用属性值设置

    1.字体加粗 FontWeight = FontWeights.Bold; 2.设置16进制颜色值 Label.Background = new SolidColorBrush(Colors.Cade ...

  6. Spring Boot笔记-自定义配置项默认值设置

    如果用动态配置中心,如果漏了配置会很麻烦,spring boot可以设置个默认值如下: 这个是正常的: application.properties test.hello=Hello World My ...

  7. echarts 网格属性_设置echarts_的网格样式颜色

    设需朋者说上事是础一发一开程和开数的目前间置echarts的网格新直能分支调二浏页器朋代说,事刚样式颜色 参考AP用它互不直曾经明以机会式近分扯.多接相常I文档:http://echarts.baid ...

  8. 通过反射突破private访问修饰符获取私有和公共的属性,设置和获取值

    import operate425.demo.demo1.Student;import java.lang.reflect.Constructor; import java.lang.reflect. ...

  9. Thymeleaf th:* 设置/修改属性值详解

    文章目录 属性汇总 th:text 与 th:utext th:attr 设置任意属性值 设置指定属性值 th:alt-title 和 th:lang-xmllang 固定值布尔属性 默认属性处理器 ...

最新文章

  1. java容器类的继承结构
  2. python中showinfo_python – Tkinter中的非阻塞信息对话框
  3. docker打包镜像上传_Jenkins | 一键打包部署Spring Boot 应用的Docker镜像
  4. 你知道生气有多可怕吗?“气死人”是有科学依据的
  5. ae正在发生崩溃_AE错误:正在发生崩溃的解决方法,原创问题解决方案
  6. 打造一款便携版的Sublime Text
  7. emlog和typecho文章采集插件-简数第三方数据采集
  8. nginx实现负载均衡配置
  9. 用SQL在文本文件中追加数据
  10. Java类与类,类与接口,接口与接口关系
  11. MyBatis配置项--配置环境(environments)
  12. iOS一代码搞定定位
  13. lcx端口转发linux_LCX端口转发及NC反弹
  14. 大觉寺到鹫峰线路_大觉寺—鹫峰—望京塔—羊台山—凤凰岭—七王坟徒步游记...
  15. win10计算器_计算器也能刷Win10,国外大神又现惊人操作
  16. Python实战案例01
  17. 【转载】Excel操作 Microsoft.Office.Interop.Excel.dll的使用
  18. 线性代数的视角理解LSR(least square regression)的参数评估算法本质
  19. STM32单片机的电子密码锁设计
  20. Echache整合Spring缓存实例讲解(转)

热门文章

  1. 开源证券交易撮合引擎 jOpenExchg V0.01 预览版
  2. 咱们裸熊---观后感
  3. 初学Java基础学习——抽象类和接口的区别
  4. 现代数据团队的特征工程(Continual)
  5. 能量采集 BZOJ - 2005
  6. Android targetSdkVersion 的作用
  7. 「逗你一笑」一些关于程序员的笑话
  8. 桌子测试用例思维导图
  9. C语言(通识)_对三子棋的简单实现
  10. 思考——程序員是知識分子嗎?