自己总结的echarts仪表盘


var echarts03 = echarts.init(document.getElementById('echarts3'))
	 
    var echarts03_option =  {
            series: [
		
                {
					center: [ '50%', '50%' ],
							 progress:{
       		 	show: true,
					roundCap: false, //是否圆角
                width: 40, // 宽度
                itemStyle: {
                            opacity: 1,
                            //右/下/左/上
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [{
                                    offset: 0,
                                    color: 'rgba(11,37,66,0)'
                                },
								{
                                    offset: 0.5,
                                    color: 'rgba(0,80,255,0.5)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,138,255,0.9)'
                                }]
                            )
                        }
      },
                  
                    type: "gauge",
                    center: ["50%", "60%"], 
                    radius: "95%", //仪表大小
                    // startAngle: 200, //开始角度
                    // endAngle: -20, //结束角度
                    min:'0',
                    max:'100',
                    data:[{value:70}],
                    axisLine: {
                        show: false,
                        lineStyle: { // 属性lineStyle控制线条样式
        //                     color: [
        //                        [
           
        //   ],
        //                           ],
                            // shadowColor:"#ccc",
                            // shadowBlur:25,
                            width: 0
                        }
                    },
                    splitLine: {
                        show: true,
						length: 17,
						lineStyle: {
							width: 2,
							color: '#fff', // 用颜色渐变函数不起作用
						},
                    },
                    axisTick: {
                        show: true,
  
						lineStyle: {
							color: '#fff', // 用颜色渐变函数不起作用
							width: 2,
						},
						length: 8,
                    },
                    axisLabel: {
                         formatter: function (value) {
                            return value + '%';
                        },
						distance:5,
						color: 'rgba(255, 255, 255, 1)',
						fontSize: 16,
						fontFamily: 'DIN-Bold'
                    },
	 detail: { // 仪表盘详情,用于显示数据。
                        show: false, // 是否显示详情。
                        valueAnimation: true, // 是否开启标签的数字动画。
                        formatter: '{value} km/h', // 格式化函数或者字符串
                        color: 'auto', // 文本颜色,默认取数值所在的区间的颜色。
                        offsetCenter: [ 0, '40%' ], // 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
                        // 字体相关样式
                    },
                    pointer: { //指针样式
                        length: '75%',
						 icon:'triangle', 
						width:24,
						offsetCenter: [ 0, 0], 
                         itemStyle: { // 指针样式。{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                            color: new echarts.graphic.LinearGradient(
                                0, 1, 0, 0,
                                [{
                                    offset: 0.6,
                                    color: 'rgba(100,200,228,0)'
                                },
								{
                                    offset: 0.6,
                                    color: 'rgba(255,255,255,1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255,255,255,1)'
                                }]
                            ),
							
                        }
                    },
             
             
                },

            ]
        };;
  			 echarts03_option && echarts03.setOption(echarts03_option)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值