Echarts中Option属性设置

一、title--标题组件

标题组件，包含主标题和副标题。

title:{x:"left",    // 'left' | 'right' | 'center' | '100px'y:"4%",     // 'top' | 'bottom' | 'center' | '100px'// 标题show: true, //是否显示text: "标题内容",textStyle: {color: "#fff", // 主标题文字的颜色。fontStyle: "normal", // 主标题文字字体的风格。 'normal'  'italic'  'oblique'fontWeight: "normal", // 主标题文字字体的粗细。 'normal' 'bold'  'bolder'  'lighter' 500|600fontFamily: "sans-serif", // 主标题文字的字体系列。fontSize: 18, // 字体大小lineHeight: "30", // 行高// width ... , // 文字块的宽度// height ... , // 文字块的高度textBorderColor: "transparent", // 文字本身的描边颜色。textBorderWidth: 0, // 文字本身的描边宽度。textShadowColor: "transparent", // 文字本身的阴影颜色。textShadowBlur: 0, // 文字本身的阴影长度。textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。textShadowOffsetY: 0, //  文字本身的阴影 Y 偏移。},subtext: "bb", // 副标题文本subtextStyle: {color: "red",fontSize: "16",},   //副标题样式textAlign: "auto", //水平对齐'auto'、'left'、'right'、'center'textVerticalAlign: "auto", // 垂直对齐  'auto'、'top'、'bottom'、'middle'triggerEvent: false, // 是否触发事件padding: 5, // 标题内边距  5/[5,2,4,7]itemGap: 10, //主副标题之间的间距left: 10, // 距离 left top right bottomx: "center",  // 水平安放位置，默认为左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）y: "4%",      // 垂直安放位置，默认为全图顶端，可选为：// 'top' ¦ 'bottom' ¦ 'center'¦ {number}（y坐标，单位px）backgroundColor: "pink", // 标题背景色borderColor: "#ccc", // 标题的边框颜色borderWidth: 5, // 标题的边框线宽。borderRadius: 2, // 圆角半径shadowBlur: 10, //图形阴影的模糊大小shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色shadowOffsetX: 5, // 阴影水平方向上的偏移距离。shadowOffsetY: 5, //阴影垂直方向上的偏移距离。
}

二、legend--图例组件

图例组件,展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

    legend: {show: true, //是否显示type: "plain", // 图例的类型 'plain':普通图例  'scroll':可滚动翻页的图例zlevel: 1, // 所有图形的 zlevel 值。icon: "circle",top: "5%", // bottom:"20%" // 组件离容器的距离right: "5%", //left:"10%"  // // 组件离容器的距离width: "auto", // 图例组件的宽度height: "auto", // 图例组件的高度orient: "horizontal", // 图例列表的布局朝向。 'horizontal'  'vertical'align: "auto", // 图例标记和文本的对齐padding: 5, // 图例内边距itemWidth: 6, // 图例标记的图形宽度。itemGap: 20, // 图例每项之间的间隔。itemHeight: 14, //  图例标记的图形高度。symbolKeepAspect: true, // 如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。formatter: function (name) {return '{a|text}{a|   }{b|' +  name + '}'},selectedMode: true, // 图例选择的模式，inactiveColor: "#ccc", // 图例关闭时的颜色。textStyle: {color: "#556677", // 文字的颜色。fontStyle: "normal", // 文字字体的风格。fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold'  'bolder' 'lighter'  100 | 200 | 300 | 400...fontFamily: "sans-serif", // 文字的字体系列。fontSize: 12, // 文字的字体大小。lineHeight: 20, // 行高。backgroundColor: "transparent", // 文字块背景色。borderColor: "transparent", // 文字块边框颜色。borderWidth: 0, // 文字块边框宽度。borderRadius: 0, // 文字块的圆角。padding: 0, // 文字块的内边距shadowColor: "transparent", // 文字块的背景阴影颜色shadowBlur: 0, // 文字块的背景阴影长度。shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。// width: 50, // 文字块的宽度。 默认// height: 40, // 文字块的高度 默认textBorderColor: "transparent", // 文字本身的描边颜色。textBorderWidth: 0, // 文字本身的描边宽度。textShadowColor: "transparent", // 文字本身的阴影颜色。textShadowBlur: 0, // 文字本身的阴影长度。textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。rich: {a: {color: "red",lineHeight: 10,},b: {color: "#fff",lineHeight: 10,},}, // 自定富文本样式},},

三、tooltip--提示框组件

提示框组件,可以设置在多种地方：

可以设置在全局，即 tooltip
可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以设置在系列中，即 series.tooltip
可以设置在系列的每个数据项中，即 series.data.tooltip

tooltip ={                                  //提示框组件trigger: 'item',                        //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。triggerOn:"mousemove",                  //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发showContent:true,                       //是否显示提示框浮层alwaysShowContent:true,                 //是否永远显示提示框内容showDelay:0,                            //浮层显示的延迟，单位为 mshideDelay:100,                          //浮层隐藏的延迟，单位为 msenterable:false,                        //鼠标是否可进入提示框浮层中confine:false,                          //是否将 tooltip 框限制在图表的区域内transitionDuration:0.4,                 //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动position:['50%', '50%'],                //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等backgroundColor:"transparent",          //标题背景色borderColor:"#ccc",                     //边框颜色borderWidth:0,                          //边框线宽padding:5,                              //图例内边距，单位px  5  [5, 10]  [5,10,5,10]textStyle:mytextStyle,                  //文本样式axisPointer: {                          // 鼠标放在type: 'cross', //默认为line，line直线，cross十字准星，shadow阴影crossStyle: {color: '#fff'}},formatter: function (value) {for (var i = 0; i < value.length; i++) {return (value[i].seriesName +"<br/>" +value[i].name +unit +"：" +value[i].value +"%");}},
};

四、grid--可用于调整图例在整个容器中的占位

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
也可用于调整图例在整个容器中的占位
在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。

grid:{x: 80,   //top:"15%" | right:"3%" | left:"2%" | bottom:"12%"y: 60,x2: 80,y2: 60,// width: {totalWidth} - x - x2,// height: {totalHeight} - y - y2,backgroundColor: ‘rgba(0,0,0,0)‘,borderWidth: 1,borderColor: '#ccc',containLabel: true, //防止坐标轴标签溢出
}

五、xAxis--x 轴

直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

xAxis: {boundaryGap: false,// 刻度离纵轴有无间隙，默认true有间距type: 'category', //'value' 数值轴，适用于连续数据。 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 'log' 对数轴。适用于对数数据。position:'bottom',  // 'bottom' | 'top'name: '(ETD)',// 横轴名称nameTextStyle:{fontSize:12,fontWeight:'bold',color:'#ff0033',//align:'left',},nameLocation:'middle',//坐标轴的位置 'start' | 'center' | 'end'nameGap:50,//坐标轴名称与轴线之间的距离nameRotate:90,//坐标轴名字旋转角度值,axisLabel : {//坐标轴刻度标签的相关设置。// clickable:true,//并给图表添加单击事件  根据返回值判断点击的是哪里interval: 0,inside:false, //  标签朝内还是朝外rotate: 40,// 文字倾斜度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   // 刻度线是否显示}
}

六、yAxis-y 轴

直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

yAxis: {type: 'value',name: "         金额( 单位: 万元 )",nameTextStyle: {color: '#ffffff'},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}},

七、series-line--折线/面积图

折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。

line: {itemStyle: {normal: {// color: 各异,label: {show: false// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为//           'inside'|'left'|'right'|'top'|'bottom'// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE},lineStyle: {width: 2,type: 'solid',normal: {//线的渐变颜色color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [        {offset: 0,color: "#24D5CC",},{offset: 1,color: "#7A50F1",},]),opacity: 0.75,},shadowColor: 'rgba(0,0,0,0)', //默认透明  阴影shadowBlur: 5,shadowOffsetX: 3,shadowOffsetY: 3}，itemStyle: {normal: {lineStyle: {width: 3, //设置线条粗细},},},areaStyle: {   //折线图覆盖面积color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: "rgba(255,80,124,0)",},{offset: 1,color: "rgba(255,80,124,0.35)",},]),    //渐变色},},emphasis: {   // 鼠标移入// color: 各异,label: {show: false// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为//           'inside'|'left'|'right'|'top'|'bottom'// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE}}},//smooth : false,  //是否平滑//symbol: null,         // 拐点图形类型,可以自己设置图片symbolSize: 2, // 拐点图形大小symbolOffset: ["0", "-8"],//拐点位置//symbolRotate : null,  // 拐点图形旋转控制showAllSymbol: false // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
},

八、series-bar--柱状图

柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。

bar:{barMinHeight: 0, // 最小高度改为0// barWidth: null,        // 默认自适应barGap: '30%', // 柱间距离，默认为柱形宽度的30%，可设固定值barCategoryGap: '20%', // 类目间柱形距离，默认为类目间距的20%，可设固定值itemStyle: {normal: {// color: '各异',barBorderColor: '#fff', // 柱条边线barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1label: {  //z柱状图上显示数字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}}}
}

九、series-pie--饼图

饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
从 ECharts v4.6.0 版本起，我们提供了 'labelLine' 与 'edge' 两种新的布局方式。详情参见 label.alignTo。

// 横向柱状图
series: [{type: "pie",radius: ["45%", "60%"],center: this.center,data: echartData,hoverAnimation: false,itemStyle: {normal: {borderColor: bgColor,borderWidth: 2}},labelLine: {normal: {length: 20,// length2: 100,lineStyle: {color: "#999"}}},label: {normal: {//https://echarts.apache.org/zh/option.html#grid.tooltip.formatter//{a},{b},{c},{d}各代表不同的值// formatter: "{font|{b}}\n{hr|}\n{font|{d}%}",formatter: params => {return ("{icon|●}{name|" +params.name +"}{value|" +formatNumber(params.value) +"}");},padding: [0, 0, 0, 0],rich: {icon: {fontSize: 16},name: {fontSize: 14,padding: [0, 10, 0, 4],color: "#666"},value: {fontSize: 16,fontWeight: "bold",color: "#666"},hr: {height: 0,borderWidth: 1,width: "100%",borderColor: "#999"}}}}}]