ECharts 仪表盘样式修改

 

1.代码

  option = {
        title: {
        },
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
            {
                //类型
                type: 'gauge',
                //半径
                radius: 80,
             
                //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                startAngle: 210,
                //结束角度。
                endAngle: -30,
                center: ['50%', '60%'],
                //仪表盘轴线相关配置。
                axisLine: {
                    show: true,
                    // 属性lineStyle控制线条样式
                    lineStyle: {
                        width: 20,
                        //color: [[1, '#63869e']]
                        color: [[1, '#EDEFF2']]
                    }
                },
                //分隔线样式。
                splitLine: {
                    show: true,
                },
                //刻度样式。
                axisTick: {
                    show: true,
                },
                //刻度标签。
                axisLabel: {
                    show: true,
                },
                //仪表盘指针。
                pointer: {
                    //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                    show: true,
                    //指针长度
                    length: '90%',
                    //width: 0,
                },
                //仪表盘标题。
                title: {
                    show: true,
                    offsetCenter: [0, '-0%'], // x, y，单位px
                    textStyle: {
                        color: '#fff',
                        fontSize: 20
                    }
                },
                //仪表盘详情，用于显示数据。
                detail: {
                    show: true,
                    offsetCenter: [0, '60%'],
                    formatter: '{value}%',
                    textStyle: {
                        fontSize: 30,
                        color: '#169FFE',
                    }
                },
                data: [{
                    value: 0,
                    name: 'OEE'
                }]
            }]
    };
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById(“div的id”));
      var color = [[80 / 100, '#169FFE'], [1, '#EDEFF2']];
                    option.series[0].axisLine.lineStyle.color = color;
                    option.series[0].data[0].value = 80;
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true);