五、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，默认为0
barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
label: { //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，默认为0
barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
label: {
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,
1046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
