echarts仪表盘⽂字位置_echarts仪表盘相关配置
指定图表的配置项和数据
var option = {
backgroundColor: "#000",
tooltip: { // 本系列特定的 tooltip 设定。
show: true,
formatter: "{b}：{c}%",
backgroundColor: "rgba(50,50,50,0.7)", // 提⽰框浮层的背景颜⾊。注意：ltip 仅在 igger 为 'item' 时有效。
borderColor: "#333", // 提⽰框浮层的边框颜⾊。...
borderWidth: 0, // 提⽰框浮层的边框宽。...
padding: 5, // 提⽰框浮层内边距，单位px，默认各⽅向内边距为5，接受数组分别设定上右下左边距。...
textStyle: { // 提⽰框浮层的⽂本样式。...
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
},
},
series: [
{
name: "单仪表盘⽰例", // 系列名称,⽤于tooltip的显⽰，legend 的图例筛选，在 setOption 更新数据和配置项时⽤于指定对应的系列。
type: "gauge", // 系列类型
radius: "80%", // 参数:number, string。 仪表盘半径，默认 75% ，可以是相对于容器⾼宽中较⼩的⼀项的⼀半的百分⽐，也可以是绝对的数值。
center: ["50%", "55%"], // 仪表盘位置(圆⼼坐标)
startAngle: 225, // 仪表盘起始⾓度，默认 225。圆⼼ 正右⼿侧为0度，正上⽅为90度，正左⼿侧为180度。
endAngle: -45, // 仪表盘结束⾓度，默认 -45
clockwise: true, // 仪表盘刻度是否是顺时针增长，默认 true。
min: 0, // 最⼩的数据值，默认 0 。映射到 minAngle。
max: 100, // 最⼤的数据值，默认 100 。映射到 maxAngle。
splitNumber: 10, // 仪表盘刻度的分割段数，默认 10。
axisLine: { // 仪表盘轴线(轮廓线)相关配置。fontweight几百正常
show: true, // 是否显⽰仪表盘轴线(轮廓线)，默认 true。
lineStyle: { // 仪表盘轴线样式。
color: colorTemplate1, //仪表盘的轴线可以被分成不同颜⾊的多段。每段的 结束位置(范围是[0,1]) 和 颜⾊ 可以通过⼀个数组来表⽰。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
opacity: 1, //图形透明度。⽀持从 0 到 1 的数字，为 0 时不绘制该图形。
width: 30, //轴线宽度，默认 30。
shadowBlur: 20, //(发光效果)图形阴影的模糊⼤⼩。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY ⼀起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜⾊。⽀持的格式同color。
}
},
splitLine: { // 分隔线样式。
show: true, // 是否显⽰分隔线，默认 true。
length: 30, // 分隔线线长。⽀持相对半径的百分⽐，默认 30。
lineStyle: { // 分隔线样式。
color: "#eee", //线的颜⾊，默认 #eee。
opacity: 1, //图形透明度。⽀持从 0 到 1 的数字，为 0 时不绘制该图形。
width: 2, //线度，默认 2。
type: "solid", //线的类型，默认 solid。 此外还有 dashed,dotted
shadowBlur: 10, //(发光效果)图形阴影的模糊⼤⼩。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY ⼀起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜⾊。⽀持的格式同color。
}
},
axisTick: { // 刻度(线)样式。
show: true, // 是否显⽰刻度(线)，默认 true。
splitNumber: 5, // 分隔线之间分割的刻度数，默认 5。
length: 8, // 刻度线长。⽀持相对半径的百分⽐，默认 8。
lineStyle: { // 刻度线样式。
color: "#eee", //线的颜⾊，默认 #eee。
opacity: 1, //图形透明度。⽀持从 0 到 1 的数字，为 0 时不绘制该图形。
width: 1, //线度，默认 1。
type: "solid", //线的类型，默认 solid。 此外还有 dashed,dotted
shadowBlur: 10, //(发光效果)图形阴影的模糊⼤⼩。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY ⼀起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜⾊。⽀持的格式同color。
},
},
axisLabel: { // 刻度标签。
show: true, // 是否显⽰标签，默认 true。
distance: 5, // 标签与刻度线的距离，默认 5。
color: "#fff", // ⽂字的颜⾊，默认 #fff。
fontSize: 12, // ⽂字的字体⼤⼩，默认 5。
formatter: "{value}", // 刻度标签的内容格式器，⽀持字符串模板和回调函数两种形式。 ⽰例:// 使⽤字符串模板，模板变量为刻度默认标签 {value}，如:formatter: '{value} kg'; // 使⽤函数模板，函数参数分别为刻度数值，如formatter: function (value) {return value +
'km/h';}
},
pointer: { // 仪表盘指针。
show: true, // 是否显⽰指针，默认 true。
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分⽐，默认 80%。
width: 5, // 指针宽度，默认 8。
},
itemStyle: { // 仪表盘指针样式。
color: "auto", // 指针颜⾊，默认(auto)取数值所在的区间的颜⾊
opacity: 1, // 图形透明度。⽀持从 0 到 1 的数字，为 0 时不绘制该图形。
borderWidth: 0, // 描边线宽，默认 0。为 0 时⽆描边。
borderType: "solid", // 柱条的描边类型，默认为实线，⽀持 'solid', 'dashed', 'dotted'。
borderColor: "#000", // 图形的描边颜⾊，默认 "#000"。⽀持的颜⾊格式同 color，不⽀持回调函数。
shadowBlur: 10, // (发光效果)图形阴影的模糊⼤⼩。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY ⼀起设置图形的阴影效果。
shadowColor: "#fff", // 阴影颜⾊。⽀持的格式同color。
},
emphasis: { // ⾼亮的 仪表盘指针样式
itemStyle: {
//⾼亮 和正常 两者具有同样的配置项，只是在不同状态下配置项的值不同。
}
},
title: { // 仪表盘标题。
show: true, // 是否显⽰标题，默认 true。
offsetCenter: [0,"20%"],//相对于仪表盘中⼼的偏移位置，数组第⼀项是⽔平⽅向的偏移，第⼆项是垂直⽅向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分⽐。
color: "#fff", // ⽂字的颜⾊，默认 #333。
fontSize: 20, // ⽂字的字体⼤⼩，默认 15。
},
detail: { // 仪表盘详情，⽤于显⽰数据。
show: true, // 是否显⽰详情，默认 true。
offsetCenter: [0,"50%"],// 相对于仪表盘中⼼的偏移位置，数组第⼀项是⽔平⽅向的偏移，第⼆项是垂直⽅向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分⽐。
color: "auto", // ⽂字的颜⾊，默认 auto。
fontSize: 30, // ⽂字的字体⼤⼩，默认 15。
formatter: "{value}%", // 格式化函数或者字符串
},
data: data1
}
]
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。