如何用echarts构建一个仪表盘---可生成URL链接嵌入其他BI可视化工具中

最新推荐文章于 2023-12-05 10:50:11 发布

浮豹

最新推荐文章于 2023-12-05 10:50:11 发布

阅读量972

点赞数 1

本文链接：https://blog.csdn.net/weixin_41744624/article/details/104500942

版权

本文档介绍了如何使用Echarts创建一个仪表盘，并将其生成的URL嵌入到BI工具如Tableau中。首先从Echarts官网获取仪表盘模板代码，然后在前端工具（如Brackets）中嵌入并运行。接着，通过修改series部分的data和name属性来定制仪表盘显示的数据和名称。最后，通过修改尾部代码中生成的随机数据，以固定数值展示，并利用生成的仪表盘链接在其他可视化工具中使用。

摘要由CSDN通过智能技术生成

在上一篇讲解如何入门使用echarts：
https://blog.csdn.net/weixin_41744624/article/details/104480570
本篇我们来概述如何用echarts构建一个仪表盘，生成的仪表盘可以使用URL方式嵌套到我们使用的BI可视化工具中，如tableau等。
----文末附全代码----
…………………………………………………………………………

首先进入echarts万能的官方网站实例
在这里插入图片描述
在左边框可以选择仪表盘的大致样式

在本例中我们选择如下样式，点击进入就可以得到相应的展示主体框架代码。

将代码嵌套至我们的前端展示工具中
此处以brackets为例，将代码粘贴至红框位置

option = {
    backgroundColor: '#1b1b1b',
    tooltip: {
        formatter: '{a} <br/>{c} {b}'
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '速度',
            type: 'gauge',
            min: 0,
            max: 220,
            splitNumber: 11,
            radius: '50%',
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
                    width: 3,
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisLabel: {            // 坐标轴小标记
                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: 40, name: 'km/h'}]
        },
        {
            name: '转速',
            type: 'gauge',
            center: ['25%', '55%'],    // 默认全局居中
            radius: '30%',
            min: 0,
            max: 7,
            endAngle: 45,
            splitNumber: 7,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500']],
                    width: 2,
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisLabel: {            // 坐标轴小标记
                fontWeight: 'bolder',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
            },
            axisTick: {            // 坐标轴小标记
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            splitLine: {           // 分隔线
                length: 20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    width: 3,
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10