当前位置： 文江博客话题详情

仪表盘：如何导入自己的数据，而不是随机的数据？

发布于 2022-01-06 03:00:25 字数 38 浏览 975 评论 12

请问如何在仪表图中导入自己的数据，并且这些数据都随时间而变化。

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（12）

醉生梦死 2022-01-08 04:59:52

非常感谢！

回复
飘过的浮云 2022-01-08 04:59:45

如果数据是已知的，例如： [[0.1,7196.0,323.0,-8.0], [0.2,7191.0,324.0,-9.0], [0.4,7196.0,323.0,-7.0], [0.3,7192.0,326.0,-8.0], [0.0,7195.0,329.0,-6.0], [0.2,7193.0,324.0,-5.0]] 四个数分别对应四个仪表盘的数据，这样该怎么写呢？

回复
情痴 2022-01-08 04:59:15

好了！非常感谢大佬相助！

回复
月牙弯弯 2022-01-08 04:58:03

回复
It is my pleasure, good-bye and good luck.

回复
可是我不能没有你 2022-01-08 04:40:08

以下案例，按楼主的要求，同时显示4个表盘。供参考。

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>ECharts Gauge 表盘</title>
    <script type="text/javascript" src= "http://echarts.baidu.com/dist/echarts.js"></script>  
    </head>

    <body>
        <table>
        <tr>
        <td><div id="main1" style="width: 600px;height:400px;">1</div></td>
        <td><div id="main2" style="width: 600px;height:400px;">2</div></td>
        </tr>
    	<tr>
        <td><div id="main3" style="width: 600px;height:400px;">3</div></td>
        <td><div id="main4" style="width: 600px;height:400px;">4</div></td>
        </tr>
        </table>
        <script type="text/javascript">
		
			var dat = [8,10,12,14]
			var arr = new Array();    //为4个表盘创建虚拟数据 data。      
       		for(var i=0;i<20;i++){           
           	arr[i]=new Array(i);    
          	for(var j=0;j<4;j++){      
             arr[i][j]=dat[j]+i*4;
       			}
	   } 
	var index = 0; //共享下标
	
        var myChart1 = echarts.init(document.getElementById('main1'));
	var myChart2 = echarts.init(document.getElementById('main2'));
	var myChart3 = echarts.init(document.getElementById('main3'));
	var myChart4 = echarts.init(document.getElementById('main4'));

var option1 = {
            title: {
                text: '预期指标', 
            },
            toolbox: {  
                show: true,
                feature: {
                    restore: {  
                        show: true
                    },
                    saveAsImage: { 
                        show: true
                    }
                }
            },
            tooltip: { //弹窗组件
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: '预期指标',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                data: [{value: 8, name: '完成率'}]
            }]

            };
			
var option2 = {
            title: {
                text: '业务指标',  
            },
            toolbox: {  
                show: true,
                feature: {
                    restore: {  
                        show: true
                    },
                    saveAsImage: { 
                        show: true
                    }
                }
            },
            tooltip: {  
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: '业务指标',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                data: [{value: 10, name: '完成率'}]
            }]

            };

var option3 = {
            title: {
                text: '完成指标',  
            },
            toolbox: { 
                show: true,
                feature: {
                    restore: {  
                        show: true
                    },
                    saveAsImage: { 
                        show: true
                    }
                }
            },
            tooltip: {  
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: '完成指标',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                data: [{value: 12, name: '完成率'}]
            }]

            };

var option4 = {
            title: {
                text: '估算指标',  
            },
            toolbox: {  
                show: true,
                feature: {
                    restore: {  
                        show: true
                    },
                    saveAsImage: { 
                        show: true
                    }
                }
            },
            tooltip: {  
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: '估算指标',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                data: [{value: 14, name: '完成率'}]
            }]

            };


			myChart1.setOption(option1);
			myChart2.setOption(option2);
			myChart3.setOption(option3);
            myChart4.setOption(option4);

            setInterval(function(){
                option1.series[0].data[0].value = arr[ index % arr.length][0];
				index++;
                myChart1.setOption(option1, true);

            }, 2000);
			
			 setInterval(function(){
                option2.series[0].data[0].value = arr[ index % arr.length][1];
				myChart2.setOption(option2, true);
            }, 2000);
			
			 setInterval(function(){
                option3.series[0].data[0].value = arr[ index % arr.length][2];
				myChart3.setOption(option3, true);
            }, 2000);
			
			 setInterval(function(){
                option4.series[0].data[0].value = arr[ index % arr.length][3];
				myChart4.setOption(option4, true);
            }, 2000);
        </script>
    </body>

</html>

 

回复
傾城如夢未必闌珊 2022-01-08 04:10:15

回复
@tcxu : 谢谢！如果数组是四维的，比如date=[[1,2,3,4],[2,3,4,5]],这样还需要做哪些修改呢？

回复
陌若浮生 2022-01-08 03:57:28

回复
也就是有四个仪表盘

回复
浮生未歇 2022-01-08 03:57:16

回复
可参考：多仪表盘个性化。那里同时显示 4 个表盘。 https://echarts.baidu.com/echarts2/doc/example/gauge4.html https://echarts.baidu.com/echarts2/doc/example/gauge5.html

回复
葬花如无物 2022-01-08 03:57:14

回复
如果要同样大小、同种类型的表盘，可以在同一网页设置4个<div></div>元素，以分别显示4个表盘。 即， <body> <div id="main1" style="width: 600px;height:400px;"></div> <div id="main2" ...<div id="main4" ... </body>

回复
眼眸 2022-01-08 00:33:59

回复
@tcxu : 是的，我参考的就是实例中的那两个例子；但是option以外的框架与一个仪表盘的有什么变化呢？谢谢

回复
看透却不说透 2022-01-07 23:14:36

你自己的数据是什么样的？
比如，自己的数据是：在 [ 10% - 21% ] 的范围内变化，每 2 秒钟增加 或 减少 1% 。那就应当写成类似以下的样子。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>ECharts Gauge 表盘</title>
    <script type="text/javascript" src= "http://echarts.baidu.com/dist/echarts.js"></script>  
    </head>

    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
            title: {
                text: '业务指标', //标题文本内容
            },
            toolbox: { //可视化的工具箱
                show: true,
                feature: {
                    restore: { //重置
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    }
                }
            },
            tooltip: { //弹窗组件
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: '业务指标',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                data: [{value: 45, name: '完成率'}]
            }]

            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            data= [10,11,12,13,14,15,16,17,18,19,20,21,20,19,18,17,16,15,14,13,12,11];
	    index=0;
            setInterval(function(){//将自己的值赋予 option.series[ 0 ].data[ 0 ].value
                option.series[0].data[0].value = data[index++%data.length];
                myChart.setOption(option, true);
            }, 2000);
        </script>
    </body>

</html>

回复
葬花如无物 2022-01-07 15:17:08

如果数据是已知的，例如： [[0.1,7196.0,323.0,-8.0], [0.2,7191.0,324.0,-9.0], [0.4,7196.0,323.0,-7.0], [0.3,7192.0,326.0,-8.0], [0.0,7195.0,329.0,-6.0], [0.2,7193.0,324.0,-5.0]] , 案例初步代码如下，有待继续改进。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>ECharts Gauge 表盘</title>
    <script type="text/javascript" src= "http://echarts.baidu.com/dist/echarts.js"></script>  
    </head>

    <body>
        <table>
        <tr>
        <td><div id="main1" style="width: 600px;height:400px;"></div></td>
        <td><div id="main2" style="width: 600px;height:400px;"></div></td>
        </tr>
    	<tr>
        <td><div id="main3" style="width: 600px;height:400px;"></div></td>
        <td><div id="main4" style="width: 600px;height:400px;"></div></td>
        </tr>
        </table>
        <script type="text/javascript">
		
			var arr = [[0.1, 7196.0,323.0,-8.0], 
						[0.2, 7191.0,324.0,-9.0], 
						[0.4, 7196.0, 323.0,-7.0], 
						[0.3, 7192.0,326.0,-8.0], 
						[0.0, 7195.0,329.0,-6.0], 
						[0.2, 7193.0,324.0,-5.0]]; 
	var index = 0; //共享下标
	
    var myChart1 = echarts.init(document.getElementById('main1'));
	var myChart2 = echarts.init(document.getElementById('main2'));
	var myChart3 = echarts.init(document.getElementById('main3'));
	var myChart4 = echarts.init(document.getElementById('main4'));

var option1 = {
            title: {
                text: '表盘 I', 
            },
            toolbox: {  
                show: true,
                feature: {
                    restore: {  
                        show: true
                    },
                    saveAsImage: { 
                        show: true
                    }
                }
            },
            tooltip: { //弹窗组件
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: '表盘 I',
                type: 'gauge',
				min: 0.0,
            	max: 0.5,
                detail: {formatter:'{value}'},
                data: [{value: 0.1, name: '表盘 I'}]
            }]

            };
			
var option2 = {
            title: {
                text: '表盘 II',  
            },
            toolbox: {  
                show: true,
                feature: {
                    restore: {  
                        show: true
                    },
                    saveAsImage: { 
                        show: true
                    }
                }
            },
            tooltip: {  
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: '表盘 II',
                type: 'gauge',
				min: 7190.0,
            	max: 7200.0,
                detail: {formatter:'{value}'},
                data: [{value: 7196.0, name: '表盘 II'}]
            }]

            };

var option3 = {
            title: {
                text: '表盘 III',  
            },
            toolbox: { 
                show: true,
                feature: {
                    restore: {  
                        show: true
                    },
                    saveAsImage: { 
                        show: true
                    }
                }
            },
            tooltip: {  
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: '表盘 III',
                type: 'gauge',
                min: 300.0,
            	max: 340.0,
                detail: {formatter:'{value}'},
                data: [{value: 323.0, name: '表盘 III'}]
			 }]
            };

var option4 = {
            title: {
                text: '表盘 IV',  
            },
            toolbox: {  
                show: true,
                feature: {
                    restore: {  
                        show: true
                    },
                    saveAsImage: { 
                        show: true
                    }
                }
            },
            tooltip: {  
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: '表盘 IV',
                type: 'gauge',
                min: -10.0,
            	max: 0.0,
                detail: {formatter:'{value}'},
                data: [{value: -8.0, name: '表盘 IV'}]
            }]

            };


			myChart1.setOption(option1);
			myChart2.setOption(option2);
			myChart3.setOption(option3);
            myChart4.setOption(option4);

            setInterval(function(){
                option1.series[0].data[0].value = arr[ index % arr.length][0];
				index++;
                myChart1.setOption(option1, true);

            }, 2000);
			
			 setInterval(function(){
                option2.series[0].data[0].value = arr[ index % arr.length][1];
				myChart2.setOption(option2, true);
            }, 2000);
			
			 setInterval(function(){
                option3.series[0].data[0].value = arr[ index % arr.length][2];
				myChart3.setOption(option3, true);
            }, 2000);
			
			 setInterval(function(){
                option4.series[0].data[0].value = arr[ index % arr.length][3];
				myChart4.setOption(option4, true);
            }, 2000);
        </script>
    </body>

</html>

 

回复
~没有更多了~

关于作者

别再吹冷风

暂无简介

0 文章
0 评论
379 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

小瓶盖

文章 0 评论 0

wxsp_Ukbq8xGR

文章 0 评论 0

1638627670

文章 0 评论 0

仅一夜美梦

文章 0 评论 0

夜访吸血鬼

文章 0 评论 0

近卫軍团

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文