echarts 仪表盘样式配置整理
项目里有仪表盘，整理下样式配置：
代码：
import { Pieces } from "./share/pieces";
/**
* 仪表盘
* 文档：https://echarts.apache.org/zh/option.html#series-gauge.axisLine
* demo：https://echarts.apache.org/examples/zh/editor.html?c=gauge-stage
*/
export class Dashboard {
constructor(myChart) {
myChart.setOption(this.getOptions());
this.doRandomStyle(myChart);
}
/**
* 设置随机样式
*/
doRandomStyle(myChart) {
let self = this;
setInterval(function () {
myChart.setOption({
series: [
{
data: [
{
value: +(Math.random() * 100).toFixed(2)
}
],
axisLine: {
lineStyle: {
color: self.getRandomRange(), // 颜色区间设置
}
}
}
]
});
}, 2000);
}
getOptions() {
return {
series: [
{
type: 'gauge',
center: [ 400, 400 ], // 的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
// center : ['50%', '50%'], // 支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
// radius: '55%', // 仪表盘半径
radius: 240, // 仪表盘半径
startAngle: 225, // 仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。默认 225
endAngle: -45, // 仪表盘结束角度。默认 -45
clockwise: true, // 仪表盘刻度是否是顺时针增长。 默认 true
splitNumber: 10, // 刻度的分割段数。
min: 0, // 最小的数据值，映射到 minAngle。
max: 120, // 最大的数据值，映射到 maxAngle。
axisLine: { // 仪表盘轴线相关配置。
show: true, // 是否显示仪表盘轴线。
roundCap: false, // 是否在两端显示成圆形。
lineStyle: { // 仪表盘轴线样式。 { color , width , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
width: 30,
color: this.getRandomRange(), // 颜色区间设置
}
},
pointer: { // 仪表盘指针。
show: true, // 是否显示指针。
showAbove: true, // 指针是否显示在标题和仪表盘详情上方。
// icon:'none', // ECharts 提供的标记类型包括 circle|rect|roundRect|triangle|diamond|pin|arrow|none，可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
offsetCenter: [ 0, 0 ], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
length: '60%', // 指针长度，可以是绝对数值，也可以是相对于半径的半分比。
width: 10, // 指针宽度。
itemStyle: { // 指针样式。{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
color: 'auto'
}
},
anchor: { // 表盘中指针的固定点。跟仪表盘指针配置差不多
show: true,
size: 10,
showAbove: true, // 固定点是否显示在指针上面。
icon: 'circle', // ECharts 提供的标记类型包括 circle|rect|roundRect|triangle|diamond|pin|arrow|none，可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
offsetCenter: [ 0, 0 ], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
itemStyle: { // 指针样式。{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
color: '#fff'
}
},
splitLine: { // 分隔线样式。
show: true, // 是否显示分隔线。
distance: -30, // 分隔线与轴线的距离。
length: 30, // 分隔线线长。支持相对半径的百分比。
lineStyle: { // { color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
color: '#fff',
width: 4
}
},
axisTick: { // 刻度样式。
show: true, // 是否显示刻度。
splitNumber: 5, // 分隔线之间分割的刻度数。默认 5
distance: -30, // 分隔线与轴线的距离。
length: 8, // 刻度线长。支持相对半径的百分比。
lineStyle: { // { color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
color: '#fff',
width: 2
}
},
axisLabel: {
show: true, // 是否轴线显示标签。
color: 'auto', // 文字的颜色。 默认 auto 归属区间颜色
fontStyle: 'normal', // 文字字体的风格。 normal|italic|oblique
fontWeight: 'bold', // 文字字体的粗细。 normal|bold|bolder|lighter
distance: 40, // 标签与刻度线的距离。
fontSize: 20, // 字体样式相关
// formatter: '{value} km/h', // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
// formatter: function (value) {
// return value + 'km/h';
// },
},
detail: { // 仪表盘详情，用于显示数据。
show: true, // 是否显示详情。
valueAnimation: true, // 是否开启标签的数字动画。
formatter: '{value} km/h', // 格式化函数或者字符串
color: 'auto', // 文本颜色，默认取数值所在的区间的颜色。
offsetCenter: [ 0, '40%' ], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
// 字体相关样式
},
data: [
{
value: 70,
itemStyle: { // 数据项的指针样式。
color: 'auto', // 图形的颜色。
borderWidth: 1, // 描边线宽。为 0 时无描边。
borderColor: '#eee',
}
}
],
}
]
};
}
/**
* 获取随机颜色区间配置
* @return [
* [ 0.3, '#67e0e3' ],
* [ 0.7, '#37a2da' ],
* [ 1, '#fd666d' ]
* ]
*/
getRandomRange() {
let arr = Pieces.getRandomPercentByCount(5);
let res = [];
let num = 0;
for (let i = 0; i < arr.length; i++) {
num += arr[i];
res.push([ num, Pieces.getColor() ]);
}
return res;
}
}
