Echarts——自定义仪表盘图表
我个人本身其实没有从事多久大数据可视化开发这方面，碰到那种没见过的图表都会很慌，然而怕什么来什么…
给大家看下给到我的设计图长什么样子
看到这个图表之后我就去echarts官网上面去找有没有，相必大家也猜到了，那必然是没有的，之后花了很长时间去写这个东西，就想着记录一下，后面工作用到了就不用麻烦了
废话不多说了，直接上代码
option = {
color: "#008000",
tooltip: {
// formatter: "{a} <br/>{b} : {c}%",
},
series: [
// 最外层蓝色
{
name: "gauge 0",
type: "gauge",
startAngle: 0,
endAngle: -360,
radius: "90%",
center: ["50%", "50%"],
axisLine: {
lineStyle: {
width: 16,
color: [[1, "#27a4c8"]],
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
},
pointer: {
show: false,
},
detail: {
show: false,
},
title: {
show: false,
},
data: [
{
value: 250,
name: "km/h",
},
],
},
// 底层黑色
{
name: "gauge 1",
type: "gauge",
startAngle: 0,
endAngle: -360,
z: 1,
radius: "76%",
center: ["50%", "50%"],
axisLine: {
lineStyle: {
width: 140,
color: [[1, "#000"]],
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
},
pointer: {
show: false,
},
detail: {
show: false,
},
title: {
show: false,
},
},
// 中间表盘
{
name: _this.settlementTable?.position_name || null, // 系列名称
type: "gauge", // 系列类型
min: 0, // 最小刻度
max: 1, // 最大刻度
startAngle: -160, // 仪表盘起始角度
endAngle: -20, //仪表盘结束角度
splitNumber: 10, // 刻度分割段数
radius: "77%", // 仪表盘半径
center: ["50%", "50%"], //仪表盘位置(圆心坐标)
// 仪表盘轴线(轮廓线)相关配置。
axisLine: {
show: true,
// 仪表盘轴线样式
lineStyle: {
color: [
[0.6, "#000"],
[0.7, "#feb852"],
[1.2, "#ff3912"],
],
},
},
// 分隔线样式
splitLine: {
show: true,
distance: -7, // 分隔线与轴线的距离
length: 18, // 分隔线线长。支持相对半径的百分比。
// 分割线样式
lineStyle: {
color: "#308138",
width: 2,
},
},
// 刻度样式
axisTick: {
show: true,
distance: -9,
length: 8,
lineStyle: {
color: "#308138",
width: 2,
},
splitNumber: 2, //分隔线之间分割的刻度数
},
// 刻度标签
axisLabel: {
show: true,
distance: 18,
fontSize: 11,
fontWeight: 600,
fontFamily: "Arial",
color: "#fff",
},
// 仪表盘指针
pointer: {
show: true,
// 仪表盘指针icon
// icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
icon: "path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z",
width: 8,
length: "50%", // 指针长度
// offsetCenter: [0, '-58%'],
itemStyle: {
color: "#e3b260",
shadowColor: "rgba(255, 0, 0)",
shadowBlur: 5,
shadowOffsetY: 2,
},
},
//表盘中指针的固定点
anchor: {
show: true,
showAbove: true, //固定点是否显示在指针上面
size: 15, // 固定点大小
icon: "circle", // 默认固定点icon 也可根据pointer自定义
},
// 仪表盘标题
title: {
color: "#fff",
fontSize: 14,
fontWeight: 800,
fontFamily: "Arial",
offsetCenter: [0, 35], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比
},
// 仪表盘详情，用于显示数据
detail: {
show: false,
},
data: [
{
value: _this.settlementTable?.real_data || null,
name: _this.settlementTable?.unit,
},
],
},
],
}
是不是都想看我实现的效果，那就满足你们，哈哈哈哈哈哈哈
