Echarts-我的仪表盘

最新推荐文章于 2024-07-02 20:15:09 发布
最新推荐文章于 2024-07-02 20:15:09 发布
阅读量420 收藏
点赞数
分类专栏： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37343255/article/details/103126094
版权

Echarts 图表
1、仪表盘
var dataArr = [{
value: 91,
name: ‘需量符合度’
}];
var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: ‘#5CF9FE’ // 0% 处的颜色
},
{
offset: 0.17,
color: ‘#468EFD’ // 100% 处的颜色
},
{
offset: 0.9,
color: ‘#468EFD’ // 100% 处的颜色
},
{
offset: 1,
color: ‘#5CF9FE’ // 100% 处的颜色
}
]);
var colorSet = [
[0.91, color],
[1, ‘#15337C’]
];
var rich = {
white: {
fontSize: 20,
color: ‘#fff’,
fontWeight: ‘500’,
padding: [-40, 0, 0, 0]
},
bule: {
fontSize: 30,
fontFamily: ‘DINBold’,
color: ‘#fff’,
fontWeight: ‘700’,
padding: [-30, 0, 0, 0],
},
radius: {
width: 40,
height: 20,
// lineHeight:80,
borderWidth: 1,
borderColor: ‘#0092F2’,
fontSize: 14,
color: ‘#fff’,
backgroundColor: ‘#1B215B’,
borderRadius: 20,
textAlign: ‘center’,
},
size: {
height: 150,
padding: [-80, 0, 0, 0]
}
};
var title = [{
text: "本月\n达标值 " + “95%”,
top: ‘70%’,
left: ‘25%’,
textStyle: {
fontSize: ‘16’,
color: ‘#ffffff’,
},
textAlign: ‘center’,
}, {
text: "上月\n达标值 " + “95%”,
top: ‘70%’,
left: ‘75%’,
textStyle: {
fontSize: ‘16’,
color: ‘#ffffff’,
align: ‘center’,
},
textAlign: ‘center’,
}];

        var centerLeft = ['25%', '50%'];
        var centerRight = ['75%', '50%'];

option = {

            title: title,
            //backgroundColor: '#0E1327',
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },

            series: [{ //内圆
                type: 'pie',
                radius: '65%',
                center: centerLeft,
                z: 0,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.RadialGradient(.5, .5, 1, [{
                            offset: 0,
                            color: 'rgba(17,24,43,0)'
                        },
                            {
                                offset: .5,
                                // color: '#1E2B57'
                                color: 'rgba(28,42,91,.6)'
                            },
                            {
                                offset: 1,
                                color: '#141C33',
                                // color:'rgba(17,24,43,0)'
                            }
                        ], false),
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                },
                hoverAnimation: false,
                label: {
                    show: false,
                },
                tooltip: {
                    show: false
                },
                data: [100],
            },
                {
                    type: 'gauge',
                    name: '外层辅助',
                    radius: '54%',
                    center: centerLeft,
                    startAngle: '225',
                    endAngle: '-45',
                    splitNumber: '100',
                    pointer: {
                        show: false
                    },
                    detail: {
                        show: false,
                    },
                    data: [{
                        value: 1
                    }],
                    // data: [{value: 1, name: 90}],
                    title: {
                        show: true,
                        offsetCenter: [0, 30],
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 20,
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: [
                                [1, '#00FFFF']
                            ],
                            width: 2,
                            opacity: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        length: 20,
                        lineStyle: {
                            color: '#051932',
                            width: 0,
                            type: 'solid',
                        },
                    },
                    axisLabel: {
                        show: false
                    }
                },
                {
                    type: 'gauge',
                    radius: '50%',
                    center: centerLeft,
                    startAngle: '225',
                    endAngle: '-45',
                    pointer: {
                        show: false
                    },
                    detail: {
                        formatter: function (value) {
                            var num = Math.round(value);
                            return '{bule|' + num + '}{white|%}' + '{size|' + '}\n{radius|达标}';
                        },
                        rich: rich,
                        offsetCenter: ['0%', "0%"],
                        fontSize: '10'
                    },
                    data: dataArr,
                    title: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colorSet,
                            width: 25,
                            // shadowBlur: 15,
                            // shadowColor: '#B0C4DE',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            opacity: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        length: 25,
                        lineStyle: {
                            color: '#00377a',
                            width: 2,
                            type: 'solid',
                        },
                    },
                    axisLabel: {
                        show: false
                    },
                },
                {
                    name: '灰色内圈', //刻度背景
                    type: 'gauge',
                    z: 2,
                    radius: '40%',
                    center: centerLeft,
                    startAngle: '225',
                    endAngle: '-45',
                    //center: ["50%", "75%"], //整体的位置设置
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [1, '#018DFF']
                            ],
                            width: 2,
                            opacity: 1, //刻度背景宽度
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    // data: [{
                    //     show: false,
                    //     value: '80'
                    // }], //作用不清楚
                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    detail: {
                        show: 0
                    }
                },
                {
                    name: "白色圈刻度",
                    type: "gauge",
                    radius: "40%",
                    center: centerLeft,
                    startAngle: 225, //刻度起始
                    endAngle: -45, //刻度结束
                    z: 4,
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        length: 16, //刻度节点线长度
                        lineStyle: {
                            width: 2,
                            color: 'rgba(1,244,255, 0.9)'
                        } //刻度节点线
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,0)',
                        fontSize: 12,
                    }, //刻度节点文字颜色
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            opacity: 0
                        }
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 0,
                        name: ""
                    }]
                },
                { //内圆
                    type: 'pie',
                    radius: '36%',
                    center: centerLeft,
                    z: 1,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.RadialGradient(.5, .5, .8, [{
                                offset: 0,
                                color: '#4978EC'
                            },
                                {
                                    offset: .5,
                                    color: '#1E2B57'
                                },
                                {
                                    offset: 1,
                                    color: '#141F3D'
                                }
                            ], false),
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                    },
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                    tooltip: {
                        show: false
                    },
                    data: [100],
                },


                { //内圆
                    type: 'pie',
                    radius: '65%',
                    center: centerRight,
                    z: 0,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.RadialGradient(.5, .5, 1, [{
                                offset: 0,
                                color: 'rgba(17,24,43,0)'
                            },
                                {
                                    offset: .5,
                                    // color: '#1E2B57'
                                    color: 'rgba(28,42,91,.6)'
                                },
                                {
                                    offset: 1,
                                    color: '#141C33',
                                    // color:'rgba(17,24,43,0)'
                                }
                            ], false),
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                    },
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                    tooltip: {
                        show: false
                    },
                    data: [100],
                },
                {
                    type: 'gauge',
                    name: '外层辅助',
                    radius: '54%',
                    center: centerRight,
                    startAngle: '225',
                    endAngle: '-45',
                    splitNumber: '100',
                    pointer: {
                        show: false
                    },
                    detail: {
                        show: false,
                    },
                    data: [{
                        value: 1
                    }],
                    // data: [{value: 1, name: 90}],
                    title: {
                        show: true,
                        offsetCenter: [0, 30],
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 20,
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: [
                                [1, '#00FFFF']
                            ],
                            width: 2,
                            opacity: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        length: 20,
                        lineStyle: {
                            color: '#051932',
                            width: 0,
                            type: 'solid',
                        },
                    },
                    axisLabel: {
                        show: false
                    }
                },
                {
                    type: 'gauge',
                    radius: '50%',
                    center: centerRight,
                    startAngle: '225',
                    endAngle: '-45',
                    pointer: {
                        show: false
                    },
                    detail: {
                        formatter: function (value) {
                            var num = Math.round(value);
                            return '{bule|' + num + '}{white|%}' + '{size|' + '}\n{radius|不达标}';
                        },
                        rich: rich,
                        offsetCenter: ['0%', "0%"],
                        fontSize: '10'
                    },
                    data: dataArr,
                    title: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colorSet,
                            width: 25,
                            // shadowBlur: 15,
                            // shadowColor: '#B0C4DE',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            opacity: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        length: 25,
                        lineStyle: {
                            color: '#00377a',
                            width: 2,
                            type: 'solid',
                        },
                    },
                    axisLabel: {
                        show: false
                    },
                },
                {
                    name: '灰色内圈', //刻度背景
                    type: 'gauge',
                    z: 2,
                    radius: '40%',
                    center: centerRight,
                    startAngle: '225',
                    endAngle: '-45',
                    //center: ["50%", "75%"], //整体的位置设置
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [1, '#018DFF']
                            ],
                            width: 2,
                            opacity: 1, //刻度背景宽度
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    // data: [{
                    //     show: false,
                    //     value: '80'
                    // }], //作用不清楚
                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    detail: {
                        show: 0
                    }
                },
                {
                    name: "白色圈刻度",
                    type: "gauge",
                    radius: "40%",
                    center: centerRight,
                    startAngle: 225, //刻度起始
                    endAngle: -45, //刻度结束
                    z: 4,
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        length: 16, //刻度节点线长度
                        lineStyle: {
                            width: 2,
                            color: 'rgba(1,244,255, 0.9)'
                        } //刻度节点线
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,0)',
                        fontSize: 12,
                    }, //刻度节点文字颜色
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            opacity: 0
                        }
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 0,
                        name: ""
                    }]
                },
                { //内圆
                    type: 'pie',
                    radius: '36%',
                    center: centerRight,
                    z: 1,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.RadialGradient(.5, .5, .8, [{
                                offset: 0,
                                color: '#4978EC'
                            },
                                {
                                    offset: .5,
                                    color: '#1E2B57'
                                },
                                {
                                    offset: 1,
                                    color: '#141F3D'
                                }
                            ], false),
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                    },
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                    tooltip: {
                        show: false
                    },
                    data: [100],
                },


            ]
        };

setInterval(function () {
//option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);

2、option = {
backgroundColor: ‘#1b1b1b’,
tooltip : {
show : true,
formatter: “{a}
{c} {b}”
},
series : [
{
name:‘温度’,
type:‘gauge’,
min:0,
max:40,
splitNumber:10,
radius: ‘50%’,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.09, ‘lime’],[0.82, ‘#1e90ff’],[1, ‘#ff4500’]],
width: 3,
shadowColor : ‘#fff’, //默认透明
shadowBlur: 10
}
},
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
fontWeight: ‘bolder’,
color: ‘#fff’,
shadowColor : ‘#fff’, //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: ‘auto’,
shadowColor : ‘#fff’, //默认透明
shadowBlur: 10
}
},
splitLine: { // 分隔线
length :25, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:3,
color: ‘#fff’,
shadowColor : ‘#fff’, //默认透明
shadowBlur: 10
}
},
pointer: { // 分隔线
shadowColor : ‘#fff’, //默认透明
shadowBlur: 5
},
title : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: ‘bolder’,
fontSize: 20,
fontStyle: ‘italic’,
color: ‘#fff’,
shadowColor : ‘#fff’, //默认透明
shadowBlur: 10
}
},
detail : {
backgroundColor: ‘rgba(30,144,255,0.8)’,
borderWidth: 1,
borderColor: ‘#fff’,
shadowColor : ‘#fff’, //默认透明
shadowBlur: 5,
offsetCenter: [0, ‘50%’], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: ‘bolder’,
color: ‘#fff’
}
},
data:[{value: 26, name: ‘℃’}]
}
]
};

setInterval(function (){
//option.series[0].data[0].value = (Math.random()*30).toFixed(2) - 0;
myChart.setOption(option);
},2000)

3、仪表盘
var dataArr = [{
value: 91,
name: ‘需量符合度’
}];
var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: ‘#5CF9FE’ // 0% 处的颜色
},
{
offset: 0.17,
color: ‘#468EFD’ // 100% 处的颜色
},
{
offset: 0.9,
color: ‘#468EFD’ // 100% 处的颜色
},
{
offset: 1,
color: ‘#5CF9FE’ // 100% 处的颜色
}
]);
var colorSet = [
[0.91, color],
[1, ‘#15337C’]
];
var rich = {
white: {
fontSize: 20,
color: ‘#fff’,
fontWeight: ‘500’,
padding: [-40, 0, 0, 0]
},
bule: {
fontSize: 30,
fontFamily: ‘DINBold’,
color: ‘#fff’,
fontWeight: ‘700’,
padding: [-30, 0, 0, 0],
},
radius: {
width: 60,
height: 24,
// lineHeight:80,
borderWidth: 1,
borderColor: ‘#0092F2’,
fontSize: 14,
color: ‘#fff’,
backgroundColor: ‘#1B215B’,
borderRadius: 20,
textAlign: ‘center’,
padding:2
},
size: {
height: 150,
padding: [-80, 0, 0, 0]
}
};
var title = [{
text: "本月\n达标值 " + “95%”,
top: ‘70%’,
left: ‘50%’,
textStyle: {
fontSize: ‘16’,
color: ‘#ffffff’,
lineHeight : 20
},
textAlign: ‘center’,
} ];

        var centerLeft = ['50%', '50%'];

option = {

            title: title,
            //backgroundColor: '#0E1327',
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{ //内圆
                type: 'pie',
                radius: '65%',
                center: centerLeft,
                z: 0,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.RadialGradient(.5, .5, 1, [{
                            offset: 0,
                            color: 'rgba(17,24,43,0)'
                        },
                            {
                                offset: .5,
                                // color: '#1E2B57'
                                color: 'rgba(28,42,91,.6)'
                            },
                            {
                                offset: 1,
                                color: '#141C33',
                                // color:'rgba(17,24,43,0)'
                            }
                        ], false),
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                },
                hoverAnimation: false,
                label: {
                    show: false,
                },
                tooltip: {
                    show: false
                },
                data: [100],
            },
                {
                    type: 'gauge',
                    name: '外层辅助',
                    radius: '54%',
                    center: centerLeft,
                    startAngle: '225',
                    endAngle: '-45',
                    splitNumber: '100',
                    pointer: {
                        show: false
                    },
                    detail: {
                        show: false,
                    },
                    data: [{
                        value: 1
                    }],
                    title: {
                        show: true,
                        offsetCenter: [0, 30],
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 20,
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: [
                                [1, '#00FFFF']
                            ],
                            width: 2,
                            opacity: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        length: 20,
                        lineStyle: {
                            color: '#051932',
                            width: 0,
                            type: 'solid',
                        },
                    },
                    axisLabel: {
                        show: false
                    }
                },
                {
                    type: 'gauge',
                    radius: '50%',
                    center: centerLeft,
                    startAngle: '225',
                    endAngle: '-45',
                    pointer: {
                        show: false
                    },
                    detail: {
                        formatter: function (value) {
                            var num = Math.round(value);
                            return '{bule|' + num + '}{white|%}' + '{size|' + '}\n{radius|达标}';
                        },
                        rich: rich,
                        offsetCenter: ['0%', "0%"],
                        fontSize: '10'
                    },
                    data: dataArr,
                    title: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colorSet,
                            width: 25,
                            // shadowBlur: 15,
                            // shadowColor: '#B0C4DE',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            opacity: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        length: 25,
                        lineStyle: {
                            color: '#00377a',
                            width: 2,
                            type: 'solid',
                        },
                    },
                    axisLabel: {
                        show: false
                    },
                },
                {
                    name: '灰色内圈', //刻度背景
                    type: 'gauge',
                    z: 2,
                    radius: '40%',
                    center: centerLeft,
                    startAngle: '225',
                    endAngle: '-45',
                    //center: ["50%", "75%"], //整体的位置设置
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [1, '#018DFF']
                            ],
                            width: 2,
                            opacity: 1, //刻度背景宽度
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    detail: {
                        show: 0
                    }
                },
                {
                    name: "白色圈刻度",
                    type: "gauge",
                    radius: "40%",
                    center: centerLeft,
                    startAngle: 225, //刻度起始
                    endAngle: -45, //刻度结束
                    z: 4,
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        length: 16, //刻度节点线长度
                        lineStyle: {
                            width: 2,
                            color: 'rgba(1,244,255, 0.9)'
                        } //刻度节点线
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,0)',
                        fontSize: 12,
                    }, //刻度节点文字颜色
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            opacity: 0
                        }
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 0,
                        name: ""
                    }]
                },
                { //内圆
                    type: 'pie',
                    radius: '36%',
                    center: centerLeft,
                    z: 1,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.RadialGradient(.5, .5, .8, [{
                                offset: 0,
                                color: '#4978EC'
                            },
                                {
                                    offset: .5,
                                    color: '#1E2B57'
                                },
                                {
                                    offset: 1,
                                    color: '#141F3D'
                                }
                            ], false),
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                    },
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                    tooltip: {
                        show: false
                    },
                    data: [100],
                } 
            ]
        };

setInterval(function () {
//option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);

人生得意须尽欢-至尊宝
关注
专栏目录
echarts 仪表盘 文字位置_Tableau Part 5 合并&符号地图&智能推荐&自定义形状&仪表盘高级应用...
weixin_31674039的博客
01-02 255
1.数据集合并导入数据有2个表，将两个表都拉入右侧区域通过“地区”把两个数据表联结起来，有4中联结方式内部：取两者的交集左侧：取两者的交集，并且保留左边表的内容右侧：取两者的交集，并且保留右侧表的内容完全外部：两表所有数据都保留2.超市销售情况符号地图想看各个国家的销售额是什么样的首先，如果数据中的地区和城市的数据类型默认是字符串的话，要转换！ 在工作表左侧，选中国家变量点击右键，选择地理角色，如...
echarts 仪表盘刻度在外面_ECharts仪表盘非常详细的案例_js教程,jquery教程,ES5教程,ES6教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上...
weixin_28705087的博客
02-06 1614
ECharts非常详细的仪表盘案例，注释非常详细，比看官方文档过瘾。下面是效果图：下面是相近的代码html容器：js代码：// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例var chart1 = echarts.init(document.getElementById("chart1"));var colorTemplate1 = [[0.2, "rgba...
Echarts-仪表盘
最新发布
m0_62785037的博客
07-02 477
Echarts-仪表盘案例
echarts仪表盘option_echarts仪表盘完整代码
weixin_39872624的博客
12-23 279
var option = {backgroundColor: '#00162a',title: [{x: "40%",y: "53%",text: '主干道平均车速:36km/h',textStyle: {fontWeight: 'normal',fontSize: 16,color: "#fff"},}],series: [{name: "",type: 'gauge',min: 0,max: ...
echarts 仪表盘 文字位置_商业仪表盘设计原则
weixin_34832809的博客
01-02 131
众所周知，图能展示出表格以及一些统计方法无法展示出来的东西。把数据可视化做成仪表盘，可通过视觉系统不可思议的力量来发现数据间存在着的关系和趋势。数据仪表盘应该怎样做？怎样算上一份合格的仪表盘？正好看到数据群里有人在读《商业仪表盘 可视化解决方案》一书，于是果断买来取经。本书包含3个部分：第一部分，基础知识。这部分涵盖了数据可视化的基础知识，并提供了可迅速掌握的基础元素，这些元素提供了探索和理解...
echarts 仪表盘文本下移_echarts----仪表盘学习（一）
weixin_36024829的博客
02-23 503
image.png三、代码演示单仪表盘案例style="width: 60%;height: 400px;top: 50px;left: 25%;border: 3px solid rgb(9, 241, 211);padding: 1%;background-color: rgb(240, 240, 124)">// 基于准备好的容器(这里的容器是id为chart1的div)，初始化ech...
echarts-5.4.3
03-02
此外，还有仪表盘、雷达图、树图等高级图表，适合复杂数据结构的展示。 3. **交互性**：ECharts 提供了丰富的交互功能，如鼠标悬停、点击、缩放、平移、数据区域缩放、数据项选择等，用户可以通过这些交互更好地...
echarts-5.4.3.zip
01-03
2. **大屏模板**：ECharts 支持大屏展示，适合制作各种仪表盘、看板等。开发者可以通过预设的模板或者自定义布局，结合多图表组合，构建出适应大屏幕的视觉效果，用于监控、分析业务数据。 3. **前端集成**：...
phantomjs 需要的 js 插件 echarts-convert.js
04-28
ECharts支持柱状图、折线图、饼图、散点图等多种图表类型，且支持地图、仪表盘等复杂组件。它基于矢量图形，使得图表在放大或缩小时仍能保持清晰。ECharts的配置选项(option)是JSON格式，包含了数据、样式、交互等...
echarts-gl.min.js
04-30
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达 图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、...
echarts操作盘中间显示内容、刻度线的修改.docx
01-20
echarts操作盘中间显示内容、刻度线的修改.docx
Echarts案例：整一个炫酷一点的仪表盘
03-21
使用Echarts仪表盘加极坐标实现一个炫酷的仪表盘，表盘渐变，边缘圆角，（备份的案例） 源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/PolarGauge
Echarts通过json从数据库获取实时数据实现动态仪表盘
05-19
发现Echarts 的仪表盘做的比hightcharts更漂亮，而且加载异步数据的方法更简单方便，所以用Echart做了仪表盘，并且采用jQuery的方法，可以大大精简代码语句，与大家分享，继续学习中。
echarts——仪表盘
小兔崽子的博客
01-20 3518
1.示例图 2.echarts配置 var option; var placeHolderStyle = { label: { show: false, }, labelLine: { show: false, }, color: 'rgba(0,0,0,0)', borderWidth: 0, }; option = { backgroundColor:"#000", title:{ te
echarts 仪表盘图
JunJiu0420的博客
05-15 434
【代码】echarts 仪表盘图。
ECharts仪表盘(详细示例——附有具体注释)
故里的博客
08-31 2726
ECharts仪表盘(详细示例——附有具体注释)
echarts实现指示器自定义显示内容（显示自己需要的格式）
Seven71111的博客
05-19 1565
实际前端业务页面开发中，比如柱形图，柱形图只需要画出 可用量 和 被用量，当鼠标放在图案上时，需要显示可用量、备用量、总量、其他描述等其他的信息。 展示效果如下：
echarts仪表盘刻度样式自定义
samll_redhat的博客
01-09 9711
echarts 默认的仪表盘样式： 修改后： 首先，需要在页面中放入一个image <img src="./img/123.png" id="linear-pic" style="display:none"/> 需要修改一下配置： 先把原本的背景颜色变成透明： axisLine: { lineStyle: { ...
grafana 安装 grafana-echarts-panel
08-17
6. 安装完成后，您可以在创建或编辑仪表盘时使用 Grafana-Echarts-Panel 来添加 Echarts 图表。 请注意，安装插件可能需要管理员权限。确保您拥有足够的权限来执行这些操作。此外，确保您的 Grafana 版本与插件兼容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值