echarts 游标图

var z1_option = {
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },
    series: [{
        //类型
        type: 'gauge',
        //半径
        radius: 150,
        //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
        startAngle: 180,
        //结束角度。
        endAngle: 0,
        center: ['50%', '70%'],
        //仪表盘轴线相关配置。
        axisLine: {
            show:true,
            // 属性lineStyle控制线条样式
            lineStyle: {
                width: 60,
                color: [[0.0, 'lime'], [0.2, 'red'], [0.8, 'green'], [1, 'blue']],//这个颜色要根据从小到大的顺序来写，才是半圆形的，最大为1，如果第一个是1的话，再写一个颜色就成一个圆了，就达不到想要的效果
            }
        },
        //分隔线样式。
        splitLine: {
            show: false,
        },
        //刻度样式。
        axisTick: {
            show: false,
        },
        //刻度标签。
        axisLabel: {
            show:true,
            formatter: function(v){//在刻度盘上显示字，而不是刻度
                switch (v+''){
                    case '10': return '低';
                    case '50': return '中';
                    case '90': return '高';
                    default: return '';
                }
            },
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: '#333',
                fontSize: 20
            }
        },
        //仪表盘指针。这里可以设置指针的各种属性
        pointer: {
            show:true,
            length:'90%',
            width:20
        },
        //仪表盘标题。
        title: {
            show: true,
            offsetCenter: [0, '-40%'], // x, y，单位px
            textStyle: {
                color: '#hhh',
                fontSize: 30
            }
        },
        //仪表盘详情，用于显示数据。
        detail: {
            show: true,
            offsetCenter: [0, '-10%'],
            formatter: '{value}',
            textStyle: {
                fontSize: 30
            }
        },
        data://data控制指针，如果数是错的它也不显示，
            data.entity.seriesData//根据后台来控制的


    }]
};

//初始化
document.getElementById('z_1').removeAttribute("_echarts_instance_");
var  myChart1 = echarts.init(document.getElementById('z_1'), "macarons");
myChart1.setOption(z1_option);

//指针知道那个颜色区域，指针和数字以及文字就是什么颜色

//如图：