echarts常用配置项
grid
grid:{ top:70,//表示组件距离容器顶部的距离，单位为px left:70,//表示组件距离容器左侧边距的距离 right:50//表示组件距离容器右侧边距的距离 },
官方文档如下：left等同理。
grid.top string, number [ default: 60 ]
grid 组件离容器上侧的距离。
top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
tooltip
tooltip:{ show:true,//是否显示提示框 trigger:'axis',//触发方式 backgroundColor:'#131725',//提示框背景颜色 borderColor:'#131725',//提示框边框颜色 borderRadius:2,//提示框边框圆角 borderWidth:1,//边框宽度 textStyle:{//文本字体颜色 color:'rgba(255,255,255,1)' }, formatter:function(params){//格式化内容 var myDate = new Date(); const year = myDate.getFullYear(); var date = params[0].name.split(" ")[0]; var m = date.split('-')[1]; m = m <10?'0'+m : m; var d = date.split('-')[2]; d = d< 10 ? '0'+d : d; const AxisValue = [year,m,d].join("-"); const AllCost = params[0].value; var res = "<span style='color:rgba(255,255,255,0.54)'>日期 </span>" + AxisValue + "<br/><span style='color:rgba(255,255,255,0.54)'>总成本 </span>" + '￥'+ self.util.toThoudsandsSplit(AllCost.toFixed(0)); return res; } },
这里要重点说一下formatter。这个方法表示对提示框内容的格式化，如果需要根据需求来显示部分数据项，那么可以设置formatter，而不使用默认的形式（全部数据项都显示出来）。
方法的参数params，是formatter需要的数据数组，里面的每一项是根据series中的数据顺序列出的。
官方文档说明如下。
{ componentType: 'series', // 系列类型 seriesType: string, // 系列在传入的 option.series 中的 index seriesIndex: number, // 系列名称 seriesName: string, // 数据名，类目名 name: string, // 数据在传入的 data 数组中的 index dataIndex: number, // 传入的原始数据项 data: Object, // 传入的数据值 value: number|Array, // 数据图形的颜色 color: string, // 饼图的百分比 percent: number, }
legend
表示图例选项，包括图例图片及图例文本的设置。
注：当需要从其他路径引入图片icon的时候，一定要在路径前面先写image://，这是固定格式，写上之后才能解析后面的路径，否则不会正常显示引用图片。
legend: { data:['温度','湿度','降水量'], textStyle:{ fontFamily: 'MicrosoftYaHei', fontSize:12, color: 'rgba(255,255,255,0.54)', letterSpacing:-0.07, lineHeight:11 }, top:50, },
xAxis
表示x轴的配置，包括轴线样式、label样式、刻度样式、名称样式等。
xAxis:{
show: true, // 是否显示 x 轴
position: 'top', // x 轴的位置（'top'，'bottom'）
type: 'category', // 坐标轴类型
nameRotate: 10, // 坐标轴名字旋转，角度值
inverse: false, // 是否是反向坐标轴
boundaryGap: ['20%', '20%'], // 坐标轴两边留白策略
splitNumber: 5, // 坐标轴的分割段数（预估值）
axisLine: {
show: true, // 是否显示坐标轴轴线
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [10, 15], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
color: '#333', // 坐标轴线线的颜色
width: '5', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
},
axisTick: {
show: true, // 是否显示坐标轴刻度
inside: true, // 坐标轴刻度是否朝内，默认朝外
length: 5, // 坐标轴刻度的长度
lineStyle: {
color: '#FFF', // 刻度线的颜色
width: 10, // 坐标轴刻度线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
},
axisLabel: {
show: true, // 是否显示刻度标签
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
inside: true, // 刻度标签是否朝内，默认朝外
rotate: 90, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度（坐标轴上的名字）
margin: 10, // 刻度标签与轴线之间的距离
// formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
color: '#FFF', // 刻度标签文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '50', // 行高 ）
backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
splitLine: {
show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
color: ['#ccc'], // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
width: 3, // 分隔线线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
splitArea: {
show: true, // 是否显示分隔区域
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
areaStyle: {
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
},
},
data: {
textStyle: {
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '50', // 行高 ）
backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
},},
yAxis
y轴相关设置，与x轴基本相同。常用type为value。一般在没有第二个数据轴的时候也会设置，用于封闭图表，更加美观。
注：当需要两个y轴的时候，一定注意在series中设置对应的yAxisIndex，0表示左侧y轴，1表示右侧y轴。不对应的话会导致折线、柱状图等不显示(因为数据范围不对应)。
yAxis: [ { type: 'value', name:'用气量 (m³/h)', nameGap:20, nameTextStyle:{ fontFamily: 'MicrosoftYaHei', fontSize: '12', color: 'rgba(255,255,255,0.87)', textAlign:'right', lineHeight:16 }, min:55000, max:79000, interval:3000, splitLine:{ lineStyle:{ color:"rgba(255,255,255,0.24)" } }, axisLine:{//坐标轴线条相关设置(颜色等) lineStyle:{ color:'rgba(255,255,255,0.24)' } }, axisLabel:{ show:true, fontFamily: 'PingFangSC-Regular', fontSize: '12', color: 'rgba(255,255,255,1)', lineHeight: '12', }, axisTick:{ show:false } }, { type:'value', axisTick:{ show:false }, axisLine:{//坐标轴线条相关设置(颜色等) lineStyle:{ color:'rgba(255,255,255,0.24)' } } } ],
series
series是最重要的配置项，表示数据系列，通过type设置图表类型。
例1：type为line
series:{
barWidth:10,//柱状的粗细 name:'实际值', type:'line', data:self.data.chiller_low_rt_real, yAxisIndex:0, boundaryGap:false, symbol:'none', symbolSize:7, lineStyle:{ normal:{ color:'#8BE0EE' } },
itemStyle:{
normal:{
color:'blue'//柱状图颜色
}
}, areaStyle:{//折线下方区域样式 normal:{ color:new echarts.graphic.LinearGradient(0,0,0,1,[{ offset:0, color:'rgba(139,224,238,0.24) ' },{ offset:0.85, color:'rgba(139,224,238,0.24) ' }],false), shadowColor:'rgba(0,0,0,0.1)', shadowBlur:10, } }, markLine : {//此处表示一个垂直x轴且随着x轴时间增长的推移线 data : [{name : '最小值', xAxis : 0}], itemStyle : { normal:{ label:{show:false}, lineStyle:{ type:'solid', color:'#01c6fd', width:1 } } }, symbol:"none" } },
例2：type为bar
{ name:'耗电量', type:'bar', barWidth:30, data:[], yAxisIndex:1, itemStyle:{ normal:{ label: { show : true, position : 'top', formatter : "{c}", textStyle : { color: '#eab62a' } } }, } }
作者注： 以上内容均为本人在项目中常用到的配置项，并没有列出全部配置项目，如有用到其他配置项，请移步echarts官方文档进行查阅。
————————————————
版权声明：本文为CSDN博主「晨小点的小疯子」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chenqiurui1994/article/details/81591010
