echarts仪表盘配置说明及示例

半兽人 发表于: 2020-01-07   最后更新时间: 2020-01-07  

例子一

仪表盘

let inputValue = parseInt(Math.random() * 100);
myChart.setOption({
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },
    series: [{
        name: '1刻度',
        type: 'gauge',
        radius: '35%',
        center: ['50%', '50%'],
        startAngle: 220,
        endAngle: -40,
        axisLine: {
            lineStyle: {
                width:2,
                color:[[1,'#8c929d']]
            }
        },
        splitLine: {
            length: 0,
            lineStyle:{
                color:'#8c929d',
                width:2
            }
        },
        axisLabel: {
            show:false
        },
        axisTick:{
            show:false
        },
        detail:{
            show:false
        },
        pointer:{
            show:false
        }

    },{
        name: '2刻度',
        type: 'gauge',
        radius: '45%',
        center: ['50%', '50%'],
        startAngle: 212,
        endAngle: -32,
        axisLine: {
            lineStyle: {
                width:2,
                color:[[1,'#8c929d']]
            },
        },
        splitLine: {
            length: 0,
            lineStyle:{
                color:'#8c929d',
                width:2
            }
        },
        axisLabel: {
            show:false
        },
        axisTick:{
            show:false
        },
        detail:{
            show:false
        },
        pointer:{
            show:false
        }

    },{
        name: '3刻度',
        type: 'gauge',//仪表盘
        radius: '55%',//仪表盘半径
        center: ['50%', '50%'],//仪表盘位置
        startAngle:208,//起始角度
        endAngle: -28,//结束角度
        data: [{value: inputValue, name: ''}],
        axisLine: {
            lineStyle: {//仪表盘轴线相关配置。
                width:2,
                color:[[1,'#8c929d']]
            }
        },
        splitLine: {//分隔线样式相关
            length: 40,//分割线的长度
            lineStyle: {
                width:1,
                color:'#b0b3b8'
            }
        },
        axisLabel: {//大刻度标签。
            distance: -70,//数字刻度距离
            textStyle: {//数字刻度样式
                color: '#fff',
                fontSize:18,
            },
            data: [{value: inputValue, name: ''}],
            formatter:function(param){
                if ((param % 10)==0) {
                    return param
                }
            }
        },
        axisTick:{//小刻度相关
            show:false
        },
        detail: {//仪表盘详情数据相关
            textStyle: {
                color: '#5bdbff',
                fontSize:46,
                offsetCenter: [0,'80%']
           }
        },
        itemStyle:{//指针样式
            normal:{
                color:'#1ed133'
            }
        },
        pointer:{//指针长度与宽度
            width:8,
            length:'85%'
        },
        data: [{
            value:inputValue
        }]
    },{
        name: '4线',
        type: 'gauge',
        radius: '100%',
        center: ['50%', '50%'],
        startAngle: 190,
        endAngle: -10,
        axisLine: {
            lineStyle: {
                width:2,
                color:[[1,'#3d80f5']]
            },
        },
        splitLine: {
            length: -6,
            lineStyle:{
                opacity:0
            }
        },
        axisLabel: {
            show:false
        },
        axisTick:{
            splitNumber:1,
            lineStyle:{
                opacity:0,
            }
        },
        detail:{
            show:false
        },
        pointer:{
            show:false
        }

    }]
})

例二

仪表盘

1、外面那个外弧的实现 用两个表盘来实现
2、表盘颜色的渐变(外表盘的)

代码如下:

var option = {
         series: [
             {
                 type: "gauge",
                 center: ["50%", "45%"], // 仪表位置
                 radius: "80%",          // 仪表大小
                 startAngle: 200,        // 开始角度
                 endAngle: -20,          // 结束角度
                 axisLine: {
                     show: false,
                     lineStyle: {       // 属性lineStyle控制线条样式
                         color: [
                             [ 0.5,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                 offset: 1,
                                 color: "#E75F25" // 50% 处的颜色
                             }, {
                                 offset: 0.8,
                                 color: "#D9452C" // 40% 处的颜色
                             }], false) ], // 100% 处的颜色
                              [ 0.7,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                 offset: 1,
                                 color: "#FFC539" // 70% 处的颜色
                             }, {
                                 offset: 0.8,
                                 color: "#FE951E" // 66% 处的颜色
                             }, {
                                 offset: 0,
                                 color: "#E75F25" // 50% 处的颜色
                             }], false) ],
                              [ 0.9,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                 offset: 1,
                                 color: "#C7DD6B" // 90% 处的颜色
                             }, {
                                 offset: 0.8,
                                 color: "#FEEC49" // 86% 处的颜色
                             }, {
                                 offset: 0,
                                 color: "#FFC539" // 70% 处的颜色
                             }], false) ],
                             [1,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
                                 offset: 0.2,
                                 color: "#1CAD52" // 92% 处的颜色
                             }, {
                                 offset: 0,
                                 color: "#C7DD6B" // 90% 处的颜色
                             }], false) ]
                         ],
                         width: 10
                     }
                 },
                 splitLine: { 
                     show: false
                 },
                 axisTick: {
                     show: false
                 },
                 axisLabel: {
                     show: false
                 },
                 pointer : { //指针样式
                     length: '45%'
                 },
                 detail: {
                     show: false
                 }
             },
             {
                 type : "gauge",
                 center: ["50%", "45%"], // 默认全局居中
                 radius : "70%",
                 startAngle: 200,
                 endAngle: -20,
                 axisLine : {
                     show : true,
                     lineStyle : { // 属性lineStyle控制线条样式
                         color : [ //表盘颜色
                             [ 0.5, "#DA462C" ],//0-50%处的颜色
                             [ 0.7, "#FF9618" ],//51%-70%处的颜色
                             [ 0.9, "#FFED44" ],//70%-90%处的颜色
                             [ 1,"#20AE51" ]//90%-100%处的颜色
                         ],
                         width : 30//表盘宽度
                     }
                 },
                 splitLine : { //分割线样式(及10、20等长线样式)
                     length : 30,
                     lineStyle : { // 属性lineStyle控制线条样式
                         width : 2
                     }
                 },
                 axisTick : { //刻度线样式(及短线样式)
                      length : 20
                 },
                 axisLabel : { //文字样式(及“10”、“20”等文字样式)
                     color : "black",
                     distance : 5 //文字离表盘的距离
                 },
                 detail: {
                     formatter : "{score|{value}%}",
                     offsetCenter: [0, "40%"],
                     backgroundColor: '#FFEC45',
                     height:30,
                     rich : {
                         score : {
                             color : "white",
                             fontFamily : "微软雅黑",
                             fontSize : 32
                         }
                     }
                 },
                 data: [{
                     value: 56,
                     label: {
                         textStyle: {
                             fontSize: 12
                         }
                     }
                 }]
             }
         ]
     };
myChart.setOption(option);


您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: 到头了!
下一条: 已经是最后了!