文章目录
- title：标题
- grid配置项：图标离容器的距离
- tootip：提示
- xAxis：x轴
- yAxis ：y轴
- legend：图表旁边的文字
- toolbox 工具箱
- series：
- dataZoom：区域缩放控制器（支持x轴y轴同时缩放）
- 下面写一个例子：
title：标题
title: {
text: 'test',
x: 'center',
backgroundColor: 'rgb(8, 10, 90,.4)',//标题背景颜色，默认'rgba(0,0,0,0)'透明
textStyle: { // 标题样式
color: '#fff', //字体颜色
fontSize: 15, //字体大小
fontWeight: 700, //字体粗细
},
},
grid配置项：图标离容器的距离
show:是否显示直角坐标系网格-----------值:true?false
left:图表离容器左侧的距离-----------------值:number?百分比
top:图表离容器顶部的距离-----------------值:number?百分比
right:图表离容器右侧的距离---------------值:number?百分比
bottom:图表离容器底部的距离------------值:number?百分比
backgroundColor:网格背景色-------------值:rgba或#000000
borderColor:网格的边框颜色--------------值:rgba或#000000
borderWidth:网格的边框线宽-------------值:number
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: '15%',
containLabel: true,
},
tootip：提示
show 显示与否（默认true）
trigger 触发类型（默认item）
axisPointer 坐标轴指示器配置项
showContent 是否显示提示框浮层（默认true）
alwaysShowContent 是否永远显示提示框（默认false,在移出可触发提示框区域后 一定时间 后隐藏）
triggerOn （提示框触发的条件）
showDelay （显示延迟，默认0）
hideDelay （隐藏延迟，默认100ms）
enterable （鼠标是否可进入提示框浮层中,默认false）
renderMode （浮层的渲染模式）
confine （是否将 tooltip 框限制在图表的区域内,移动端自适应）
transitionDuration （提示框浮层的移动动画过渡时间）
position （提示框浮层的位置）
formatter （提示框浮层内容格式器，支持字符串模板和回调函数两种形式。）
backgroundColor （提示框浮层的背景颜色）
borderColor （提示框浮层的边框颜色）
borderWidth （提示框浮层的边框宽）
padding （提示框浮层内边距）
textStyle （提示框浮层的文本样式）
extraCssText （额外附加到浮层的 css 样式）
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
//如果是柱状图，柱子有折叠的时候，鼠标悬停，值展示一个柱子的数值
formatter: function (params) {
// console.log(params)
let title = params[0].name;
if (title.length > 30) {
title = title.substring(0, 15) + '<br/>' + title.substring(15, 30) + '<br/>' + title.substring(30);
} else if (title.length > 15) {
title = title.substring(0, 15) + '<br/>' + title.substring(15);
}
let name = title + ' : ' + params[0].value;
return name;
},
},
或者参考下面
tooltip: {
show: true, // 是否显示提示框组件
trigger: 'axis', // 触发类型（'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；'none'，不触发。）
axisPointer: {
type: 'cross', // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
label: {
margin: 10, // label 距离轴的距离
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
lineHeight: '50', // 行高
padding = [5, 7, 5, 7], // 内边距，单位px
backgroundColor = 'auto',// 文本标签的背景颜色
},
animation: true, // 是否开启动画
animationDuration: 1000, // 初始动画时长
animationDurationUpdate: 200,// 数据更新动画的时长
},
showContent: true, // 是否显示提示框浮层，默认显示
alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
triggerOn: 'mousemove|click', // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
confine: true, // 是否将 tooltip 框限制在图表的区域内
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色
padding: 5, // 提示框浮层内边距，单位px
textStyle: {
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
lineHeight: '50', // 行高
},
formatter: function (params) {
var result = ''
var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#F1E67F"></span>' // 定义第一个数据前的圆点颜色
var dotHtml2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#2BA8F1"></span>' // 定义第二个数据前的圆点颜色
result += params[0].axisValue + "</br>" + dotHtml + ' 数据名称 ' + params[0].data + "</br>" + dotHtml2 + ' 数据名称 ' + params[1].data;
return result
}
}
xAxis：x轴
//当name值字数过多的时候，截取，只显示固定的几个字
formatter: function (val: string) {
let valList = '';
let n = 4;
for (var i = 0, l = val.length; i < l / n; i++) {
let a = val.slice((n * i), n * (i + 1));
valList = valList + a + '\n';
}
if (val.length > 4) {
return val.substring(0, 4) + "...";
// return valList
} else {
return val;
}
},
xAxis: {
show: true, // 是否显示x轴
position: 'top', // x轴的位置 top、bottom
type: 'category', // 坐标轴类型 value、category、time、log
name: '姓名', // 坐标轴名称
//x轴下方出现一行文字，可以用 nameGap，nameLocation,去显示，显示内容就是 name的值
nameGap: 40, // x轴name与横纵坐标轴线的间距
nameLocation: "middle", // x轴name处于y轴的什么位置
"nameTextStyle": {
"fontSize": 18,
"fontWeight": 550
},
nameRotate: 10, // 坐标轴名字旋转，角度值
inverse: false, // 是否是反向坐标轴
boundaryGap: ['20%', '20%'], // 坐标轴两边留白策略
splitNumber: 5, // 坐标轴的分割段数（预估值）
zlevel: 100, //x轴层级（相当于定位中z-index）
axisLine: {
show: true, // 是否显示坐标轴轴线
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [10, 15], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
shadowOffsetX: 0,//轴左右偏移的阴影
shadowOffsetY: -10,// 轴上下偏移的阴影
shadowColor: "#333",//阴影的颜色
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 时不绘制该图形
},
},
//当name值字数过多的时候，截取，只显示固定的几个字
formatter: function (val: string) {
let valList = '';
let n = 4;
for (var i = 0, l = val.length; i < l / n; i++) {
let a = val.slice((n * i), n * (i + 1));
valList = valList + a + '\n';
}
if (val.length > 4) {
return val.substring(0, 4) + "...";
// return valList
} else {
return val;
}
},
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轴
yAxis: {
show: true, // 是否显示 y 轴
position: 'top', // y 轴的位置（'top'，'bottom'）
type: 'category', // 坐标轴类型
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameRotate: 10, // 坐标轴名字旋转，角度值
inverse: false, // 是否是反向坐标轴
nameTextStyle: {
color: '#333', // 坐标轴名称的颜色
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)'
},
axisLine: {
show: true, // 是否显示坐标轴轴线
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [10, 15], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
shadowOffsetX: 0,//轴左右偏移的阴影
shadowOffsetY: -10,// 轴上下偏移的阴影
shadowColor: "#333",//阴影的颜色
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)'
},
},
}
legend：图表旁边的文字
legend: {
icon: 'Rect',
orient: 'horizontal',
itemWidth: 20,
itemHeight: 2,
textStyle: {
fontSize: 12, //字体大小
color: fontColor, //字体颜色
},
right: '50%', //距离右侧
top: "30%", //水平位置，【left\center\right\数字】
left: '8%',
align: "left", //字在图例的左边或右边【left/right】
orient: "vertical", //图例方向【horizontal/vertical】
icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
textStyle: {
color: "#8C8C8C",
},
height: 260, //设置高度，超出翻页
type: "scroll", //必须设置为scroll,才可以超出翻页
pageIconColor: "#000000", //激活的分页按钮颜色
pageIconInactiveColor: "#8c8c8c", //没激活的分页按钮颜色
},
toolbox 工具箱
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
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，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemSize: 16, // 工具箱图形宽度
featureImageIcon: {}, // 自定义图片icon
featureTitle: {
mark: '辅助线开关',
markUndo: '删除辅助线',
markClear: '清空辅助线',
dataZoom: '区域缩放',
dataZoomReset: '区域缩放后退',
dataView: '数据视图',
lineChart: '折线图切换',
barChart: '柱形图切换',
restore: '还原',
saveAsImage: '保存为图片',
},
},
series：
series下的label position的属性值
inside(自适应，柱状内部中央),top（柱状外的正上方）,bottom(柱状外的正下方)，left(柱状外的左边)，right(柱状外的右边)
坐标[x,y](以柱状的顶部为原点)
insideTop(柱状内部靠顶部)，insideBottom(柱状内部靠下方)，insideRight(柱状内部靠右边)，insideLeft(柱状内部靠左边)
series: [{
type: 'pie',
radius: ['10%', '40%'],
center: ['40%', '50%'],
// 数字在柱状图中显示的位置
label: {
show: true,
// position: 'top',
position: [2, -13],
color: '#ffb000',
},
//这个是饼状图或者环状图 指出的线
labelLine: {
normal: {
show: isshowline,
length: 10,
length2: 55,
lineStyle: {
color: "#fff"
},
}
},
data: chartData,
}]
dataZoom：区域缩放控制器（支持x轴y轴同时缩放）
//这个鼠标滚轮不能用，参考下面第二个例子
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)' // 手柄颜色
},
第二个例子
dataZoom: [
{
type: 'inside',
start: 0,
end: 10000,
// y: 800,
// backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
// dataBackgroundColor: '#eee', // 数据背景颜色
// fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
// handleColor: 'rgba(70,130,180,0.8)' // 手柄颜色
},
{
start: 0,
end: 10000,
// y: 800,
// backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
// dataBackgroundColor: '#eee', // 数据背景颜色
// fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
// handleColor: 'rgba(70,130,180,0.8)' // 手柄颜色
},
// y:20,
],
//第三个例子，x轴和y轴同时缩放
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 1,
end: 100
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 1,
end: 100
},
{
type: 'inside',
xAxisIndex: [0],
start: 1,
end: 100
},
{
type: 'inside',
yAxisIndex: [0],
start: 1,
end: 100
}
]
下面写一个例子：
data = [
{
name: '销售毛利',
value: 13211,
},
{
name: '销售回款',
value: 42111,
},
{
name: '销售金额',
value: 81711,
},
{
name: '销售费用',
value: 21232,
},
{
name: '测试',
value: 21232,
},
];
arrName = getArrayValue(data, 'name');
arrValue = getArrayValue(data, 'value');
sumValue = eval(arrValue.join('+'));
objData = array2obj(data, 'name');
optionData = getData(data);
function getArrayValue(array, key) {
var key = key || 'value';
var res = [];
if (array) {
array.forEach(function (t) {
res.push(t[key]);
});
}
return res;
}
function array2obj(array, key) {
var resObj = {};
for (var i = 0; i < array.length; i++) {
resObj[array[i][key]] = array[i];
}
return resObj;
}
function getData(data) {
var res = {
series: [],
yAxis: [],
};
for (let i = 0; i < data.length; i++) {
res.series.push({
name: '职员1',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
center: ['30%', '55%'],
label: {
show: false,
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
borderWidth: 5,
},
data: [
{
value: data[i].value,
name: data[i].name,
},
{
value: sumValue - data[i].value,
name: '',
itemStyle: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
},
tooltip: {
show: false,
},
hoverAnimation: false,
},
],
});
res.series.push({
name: '',
type: 'pie',
silent: true,
z: 1,
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
center: ['30%', '55%'],
label: {
show: false,
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
borderWidth: 5,
},
data: [
{
value: 7.5,
itemStyle: {
color: '#E3F0FF',
borderWidth: 0,
},
tooltip: {
show: false,
},
hoverAnimation: false,
},
{
value: 2.5,
name: '',
itemStyle: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
},
tooltip: {
show: false,
},
hoverAnimation: false,
},
],
});
// res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + '%');
res.yAxis.push(data[i].name +' '+ data[i].value);
}
return res;
}
option = {
backgroundColor: '#fff',
legend: {
show: true,
top: 'center',
left: '70%',
data: arrName,
itemWidth: 30,
itemHeight: 20,
width: 50,
padding: [0, 5],
itemGap: 25,
formatter: function (name) {
return '{title|' + name + '}\n{value|' + objData[name].value + '元}';
},
textStyle: {
rich: {
title: {
fontSize: 10,
lineHeight: 10,
color: 'rgba(0,0,0,.45)',
},
value: {
fontSize: 14,
lineHeight: 18,
color: 'rgba(0,0,0,.85)',
},
},
},
},
tooltip: {
show: true,
trigger: 'item',
formatter: '{a}<br>{b}:{c}({d}%)',
},
color: ['#FF8700', '#ffc300', '#00e473', '#009DFF'],
grid: {
top: '20%',
bottom: '48%',
left: '30%',
containLabel: false,
},
yAxis: [
{
type: 'category',
inverse: true,
zlevel:999,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
inside: true,
textStyle: {
// 这里是右上角四分之一的样式
color: '#f00',
fontSize: 10,
},
show: true,
},
data: optionData.yAxis,
},
],
xAxis: [
{
show: false,
},
],
series: optionData.series,
};
