首页 > 代码库 > CSDN开源夏令营 百度数据可视化实践 ECharts（3）

CSDN开源夏令营 百度数据可视化实践 ECharts（3）

2024-07-14 02:37:04   227人阅读

Echarts  仪表盘  
这里主要讲一讲series（仪表盘）的用法，驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据
功能丰富，可以做出很漂亮的东西来。

（1）首先讲一下仪表盘的基本属性
其中最常用的属性：
center 圆心坐标，支持绝对值(px)和百分比,百分比计算min(width,height)*50%,radius 半径大小，支持绝对值（px），百分比计算。
radius：半径属性，可以调控半径的大小，支持绝对路径和百分比。

（2）全部属性：

名称默认值描述
{Array} center[‘50%‘, ‘50%‘]圆心坐标，支持绝对值（px）和百分比，百分比计算min(width, height) * 50%
{number | Array}radius[0, ‘75%‘]半径，支持绝对值（px）和百分比，百分比计算比，min(width, height) / 2 * 75%， 
传数组实现环形图，[内半径，外半径]
{number}startAngle225开始角度, 饼图（90）、仪表盘（225），有效输入范围：[-360,360]
{number}endAngle-45结束角度,有效输入范围：[-360,360]，保证startAngle - endAngle为正值
{number} min0指定的最小值
{number} max100指定的最大值
{number}precision0小数精度，默认为0，无小数点
{number}splitNumber10分割段数，默认为5，为0时为线性渐变，calculable为true是默认均分100份
{Object} axisLine
{
    show: true,
    lineStyle: {
        color: [
            [0.2, ‘#228b22‘],
            [0.8, ‘#48b‘],
            [1, ‘#ff4500‘]
        ], 
        width: 30
    }
}
坐标轴线，默认显示 

属性show控制显示与否， 

属性lineStyle（详见lineStyle）控制线条样式， 

比较特殊的是这里的lineStyle.color是一个二维数组，用于把仪表盘轴线分成若干份， 

并且可以给每一份指定具体的颜色，格式为:[[百分比, 颜色值], [...]]
{Object} axisTick
{
    show: true, 
    splitNumber: 5, 
    length :8, 
    lineStyle: {
        color: ‘#eee‘,
        width: 1,
        type: ‘solid‘
    }
}
坐标轴小标记，默认显示 

属性show控制显示与否， 

属性lineStyle（详见lineStyle）控制线条样式， 

属性splitNumber控制每份split细分多少段 

属性length控制线长
{Object} axisLabel
{
    show: true,
    formatter: null,
    textStyle: {
        color: ‘auto‘
    }
}
坐标轴文本标签（详见axis.axislabel） 

属性formatter可以格式化文本标签， 

属性textStyle（详见textStyle）控制文本样式
{Object} splitLine
{
    show: true,
    length :30, 
    lineStyle: { 
        color: ‘#eee‘,
        width: 2,
        type: ‘solid‘
    }
}
主分隔线，默认显示 

属性show控制显示与否， 

属性length控制线长 

属性lineStyle（详见lineStyle）控制线条样式，
{Object} pointer
{
    length : ‘80%‘,
    width : 8,
    color : ‘auto‘
}
指针样式 
属性length控制线长，百分比相对的是仪表盘的外半径 
属性width控制指针最宽处， 
属性color控制指针颜色
{Object} title
{
    show : true,
    offsetCenter: [0, ‘-40%‘],
    textStyle: {
        color: ‘#333‘,
        fontSize : 15
    }
}
仪表盘标题 

属性show控制显示与否， 

属性offsetCenter用于标题定位，数组为横纵相对仪表盘圆心坐标偏移，支持百分比（相对外半径）， 

属性textStyle（详见textStyle）控制文本样式
{Object} detail
{
    show : true,
    backgroundColor: ‘rgba(0,0,0,0)‘,
    borderWidth: 0,
    borderColor: ‘#ccc‘,
    width: 100,
    height: 40,
    offsetCenter: [0, ‘40%‘],
    formatter: null,
    textStyle: {
        color: ‘auto‘,
        fontSize : 30
    }
}
仪表盘详情 

属性show控制显示与否， 
属性backgroundColor控制边框颜色， 
属性borderWidth控制边框线宽， 
属性borderColor控制边框颜色， 
属性width控制详情宽度， 
属性height控制详情高度， 
属性offsetCenter用于详情定位，数组为横纵相对仪表盘圆心坐标偏移，支持百分比（相对外半径）， 
属性formatter可以格式化文本， 
属性textStyle（详见textStyle）控制文本样式

（3）实例操作
实现用ECharts做出下面这个仪表盘：（MPH是英里每小时，km/h是公里每小时）下图063572换成当前的MPH值，实现很精美的仪表盘。


（5）
实现代码：

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <meta name="author" content="linzhifeng@baidu.com">
    <title>ECharts · Example</title>

    <link rel="shortcut icon" href="../asset/ico/favicon.png">

    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="../asset/css/bootstrap.css" rel="stylesheet">
    <link href="../asset/css/carousel.css" rel="stylesheet">
    <link href="../asset/css/echartsHome.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="../asset/js/esl/esl.js"></script>
    <script src="../asset/js/codemirror.js"></script>
    <script src="../asset/js/javascript.js"></script>

    <link href="../asset/css/codemirror.css" rel="stylesheet">
    <link href="../asset/css/monokai.css" rel="stylesheet">
</head>

<body>
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>


    <div class="container-fluid">
        <div class="row-fluid example">
            <div id="sidebar-code" class="col-md-4">
                <div class="well sidebar-nav">
                    <div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
                    <textarea id="code" name="code">
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',
			center:['50%','50%'],
			radius:'85%',
            min:0,
            max:120,
			startAngle:180,
			endAngle:-45,
            splitNumber:12,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.09, '#1e90ff'],[0.82, '#1e90ff'],[1, '#1e90ff']],
                    width: 0,
                    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,
					width:3
                }
            },
            splitLine: {           // 分隔线
                length :20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    width:3,
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            pointer: {           // 分隔线
                shadowColor : '#fff', //默认透明
                shadowBlur: 5,
				width:5
            },
            title : {
				show:true,
				offsetCenter:['-95%','30'],
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            detail : {
				show:true,
                offsetCenter: ['-100%', '40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    color: '#fff'
                }
            },
            data:[{value: 40, name: 'MPH'}]
        },
		{
            name:'内圈',
            type:'gauge',
			center:['50%','50%'],
			radius:'40%',
            min:0,
            max:180,
			startAngle:180,
			endAngle:-45,
            splitNumber:9,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.09, '#228b22'],[0.82, '#228b22'],[1, '#228b22']],
                    width: 0,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisLabel: {            // 坐标轴小标记
                textStyle: {       // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {           
				splitNumber:2,		// 坐标轴小标记
                length :15,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    width:3,
					color: '#00FFFF',
                    shadowColor : '#00FFFF', 
                    shadowBlur: 10
                }
            },
            splitLine: {           // 分隔线
                length :15,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    width:3,
                    color: '#00FFFF',
                    shadowColor : '#00FFFF', 
                    shadowBlur: 10
                }
            },
            pointer: {           // 分隔线
                shadowColor : '#fff', //默认透明
                shadowBlur: 5,
				width:5
            },
            title : {
				show:true,
				offsetCenter:['-95%','30'],
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 15,
                    fontStyle: 'italic',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            detail : {
				show:false,
                textStyle: {       				// 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    color: '#fff'
                }
            },
            data:[{value: 60, name: 'km/h'}]
        },
		{
            name:'内内圈',
            type:'gauge',
			center:['50%','50%'],
			radius:'7%',
			startAngle:360,
			endAngle:-360,
            axisLine: {            
                lineStyle: {       
                    color: [[0.09, '#00FFFF'],[0.82, '#00FFFF'],[1, '#00FFFF']],
                    width: 2,
                    shadowColor : '#fff', 
                    shadowBlur: 5
                }
            },
            axisLabel: { 
				show:false
            },
            axisTick: {
				show:false
            },
            splitLine: {           
				show:false
            },
            title : {
				show:false
            },
			 pointer: {
				show:false
            },
            detail : {
				show:false
            },
            data:[{value: 60, name: 'km/h'}]
        }
		
    ]
};

clearInterval(timeTicket);
timeTicket = setInterval(function (){
	var values=(Math.random()*100).toFixed(2) - 0;
    option.series[0].data[0].value = (values*0.6214).toFixed(2)-0;
    option.series[1].data[0].value =  (option.series[0].data[0].value)*3/2;
    myChart.setOption(option,true);
},2000)
                    </textarea>
              </div><!--/.well -->
            </div><!--/span-->
            <div id="graphic" class="col-md-8">
                <div id="main" class="main"></div>
                <div>
                    <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
                    <span id='wrong-message' style="color:red"></span>
                </div>
            </div><!--/span-->
        </div><!--/row-->
        
        </div><!--/.fluid-container-->

    <footer id="footer"></footer>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../asset/js/jquery.min.js"></script>
    <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
    <script src="../asset/js/bootstrap.min.js"></script>
    <script type="text/javascript">var timeTicket;</script>
    <script src="../asset/js/echartsExample.js"></script>
</body>
</html>
</span>

最终实现结果：


项目代码在上传在code中：
https://code.csdn.net/dashboard/index


联系
我们