zoukankan      html  css  js  c++  java
  • 仪表盘

    目前一个图表项目需要用echarts画一个简易仪表盘,找了半天,没有找到想要的,经过修改最后画了出来


    代码如下:

    //仪表板
            option = {
    			series: [
    				{
    			        name: '1刻度',
    			        type: 'gauge',
    			        // radius: '45%',
    			        // center: ['50%', '50%'],
    			        // startAngle: 212,
    			        // endAngle: -32,
    			        axisLine: {
    			            lineStyle: {
    			                1,
    			                color:[[1,'#3a9cf9']]
    			            },
    			        },
    			        splitLine: {
    						show: false,
    			        },
    			        axisLabel: {
    			            show:false
    			        },
    			        axisTick:{
    			            show:false
    			        },
    			        detail:{
    			            show:false
    			        },
    			        pointer:{
    						show: false
    			        }
    			    },
    				{
    					name: '2刻度',
    					type: 'gauge',//仪表盘
    					radius: '100%',//仪表盘半径
    					center: ['50%', '50%'],//仪表盘位置
    					splitNumber: 6,
    					// startAngle:208,//起始角度
    					// endAngle: -28,//结束角度
    					// data: [{value: 10, name: ''}],
    					axisLine: {
    						lineStyle: {//仪表盘轴线相关配置。
    							color: [ //表盘颜色
    								[ 0.16, "#78243E" ],//0-50%处的颜色
    								[ 0.33, "#ca3947" ],//51%-70%处的颜色
    								[ 0.5, "#3a9cf9" ],//70%-90%处的颜色
    								[ 0.8,"#3a9cf9" ],//90%-100%处的颜色
    								[ 0.9,"#3a9cf9" ],//90%-100%处的颜色
    								[ 1,"#3a9cf9" ]//90%-100%处的颜色
    							],
    							width : 1//表盘宽度
    						}
    					},
    					splitLine: {//分隔线样式相关
    							length: 4,//分割线的长度
    							lineStyle: {
    									1,
    									color:'auto'
    							}
    					},
    					axisLabel: {//大刻度标签。
    						show: false,
    					},
    					axisTick:{//小刻度相关
    							show:false
    					},
    					detail: {//仪表盘详情数据相关
    						show: false,
    						textStyle: {
    							color: '#5bdbff',
    							fontSize:8,
    							offsetCenter: [0,'80%']
    						}
    					},
    					itemStyle:{//指针样式
    						normal: {
    							lineStyle: {
    								shadowColor : 'rgba(0,0,0,0.4)',
    							}
    						}
    					},
    					pointer:{//指针长度与宽度
    							 2,
    							length: '66%',
    							color : 'auto'
    					},
    					data: [{
    							value: 3.1
    					}]
    			    }
            	]
        	};
    
            var chart= echarts.init(document.getElementById('option'));
         chart.setOption(InOptionCH4, true);

     



  • 相关阅读:
    开发工具 之 PowerDesigner 应用积累
    PowerDesigner 之 PDM建模
    开发工具 之 PowerDesigner
    LCD 和 LED 的区别?
    图像色彩空间YUV和RGB的差别
    ubuntu使用中的一些问题
    FFMPEG-数据结构解释(AVCodecContext,AVStream,AVFormatContext)
    Winform的多线程问题
    C#子线程更新UI控件的方法总结
    malloc(0)的问题
  • 原文地址:https://www.cnblogs.com/double405/p/10457838.html
Copyright © 2011-2022 走看看