echarts 仪表盘

####1:echarts 后面仪表盘三分钟上手示例

  • 引入相关的文件
<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-1.11.3.js"></script>
  • 原始默认显示如下

图片.png

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>三分钟上手之仪表盘</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-1.11.3.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'));
			// 指定图表的配置项和数据
			myChart.setOption({
				tooltip: {
					formatter: "{a} <br/>{b} : {c}%"
				},
				toolbox: {
					feature: {
						restore: {},
						saveAsImage: {}
					}
				},
				series: [{
					name: '业务指标',
					type: 'gauge',
					detail: { formatter: '{value}%' },
					data: [{ value: 50, name: '完成率' }]
				}]
			});

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

</html>

###2:相关修改

  • 需求一:把总体的背景色改为黑色
    首先,把总体的背景色改为黑色,显得比较高大上添加属性:backgroundColor: '#12cf96',
    图片.png
    效果如下
    图片.png

  • 需求二:仪表盘刻度颜色

在series里面添加代码,让 红色在0-20 ,80-100是绿色

axisLine: {            // 坐标轴线  
                     lineStyle: {       // 属性lineStyle控制线条样式  
                         color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
                                }  
                            },   

图片.png

图片.png

原文作者:祈澈姑娘
关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页