admin管理员组文章数量:1621472
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,
},
],
},
],
}
是不是都想看我实现的效果,那就满足你们,哈哈哈哈哈哈哈
版权声明:本文标题:Echarts——自定义仪表盘图表 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728833666a1175870.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论