7天带你搞定一个图表框架echarts（五）

仪表盘图表的基础用法

今天整理了echarts中仪表盘，话不多说。还是通过具体案例来讲解一下仪表盘的具体配置项，

    var myChart = echarts.init(document.getElementById('main'));
        var option = {
            //提示框组件
            //formatter表示提示框组件的显示内容格式 {a}表示系列名称，{b}表示类目值/数据名称/区域名称/系列名称
            //{c}表示数组，{d}只在在饼图、仪表盘、漏斗图中表示所占百分比
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            //工具栏组件
            //工具栏各工具配置项，添加了两个工具 restore：配置项还原，saveAsImage：保存为图片
            toolbox: {
                show: true,
                feature: {
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },

            series: [
                //type：当type的值为gauge时，表示一个漏斗图表
                //第一仪表盘
                {
                    name: '速度',
                    type: 'gauge',
                    //控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
                    z: 3,
                    //min，max表示最小的数据值和最大的数据值，会映射到 minAngle
                    min: 0,
                    max: 220,
                    //仪表盘刻度的分割段数
                    splitNumber: 11,
                    //仪表盘半径
                    radius: '50%',
                    //仪表盘轴线相关配置
                    axisLine: {
                        //仪表盘轴线样式
                        lineStyle: { // 属性lineStyle控制线条样式
                            width: 10,
                        }
                    },
                    //仪表盘刻度样式
                    axisTick: {
                        length: 15, //刻度线长。支持相对半径的百分比
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    //仪表盘分隔线样式
                    splitLine: { // 分隔线
                        length: 20, // 属性length控制线长
                        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    //仪表盘刻度标签
                    axisLabel: {
                        backgroundColor: 'auto',
                        //文字块的圆角
                        borderRadius: 15,
                        color: '#eee',
                        padding: 3,
                        //textShadowBlur：文字本身的阴影长度
                        textShadowBlur: 2,
                        //textShadowOffsetX：文字本身的阴影 X 偏移
                        textShadowOffsetX: 1,
                        //textShadowOffsetY：文字本身的阴影 Y 偏移
                        textShadowOffsetY: 1,
                        //textShadowColor：文字本身的阴影颜色
                        textShadowColor: '#222'
                    },
                    //仪表盘标题，显示data中name的属性。
                    title: {
                        // 其余属性默认使用全局文本样式
                        fontWeight: 'bolder',
                        fontSize: 20,
                        //文字字体的风格，可选参数：normal、italic、oblique
                        fontStyle: 'italic'
                    },
                    //仪表盘详情，用于当前仪表盘的数据
                    detail: {
                        //格式化函数或者字符串
                        formatter: function(value) {
                            value = (value + '').split('.');
                            value.length < 2 && (value.push('00'));
                            return ('00' + value[0]).slice(-2) +
                                '.' + (value[1] + '00').slice(0, 2);
                        },
                        fontWeight: 'bolder',
                        borderRadius: 3,
                        backgroundColor: '#444',
                        borderColor: '#aaa',
                        borderWidth: 2,
                        //文字块的背景阴影设置
                        shadowBlur: 5,
                        shadowColor: '#333',
                        shadowOffsetX: 0,
                        shadowOffsetY: 3,
                        //文字本身的描边
                        textBorderColor: '#000',
                        textBorderWidth: 2,
                        //文字本身的阴影
                        textShadowBlur: 2,
                        textShadowColor: '#fff',
                        textShadowOffsetX: 0,
                        textShadowOffsetY: 0,
                        fontFamily: 'Arial',
                        width: 100,
                        color: '#eee',
                        rich: {}
                    },
                    //传入数据，默认为40
                    data: [{
                        value: 40,
                        name: 'km/h'
                    }]
                },
                //第二个仪表盘
                {
                    name: '转速',
                    type: 'gauge',
                    //用于定位图表位置
                    center: ['20%', '55%'], // 默认全局居中
                    radius: '35%',
                    min: 0,
                    max: 7,
                    //仪表盘结束角度
                    endAngle: 45,
                    splitNumber: 7,
                    //仪表盘轴线相关配置
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    //仪表盘刻度样式
                    axisTick: { // 坐标轴小标记
                        length: 12, // 属性length控制线长
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    //仪表盘分隔线样式
                    splitLine: { // 分隔线
                        length: 20, // 属性length控制线长
                        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    //仪表盘指针
                    pointer: {
                        //指针宽度
                        width: 5,
                        //指针长度，可以是绝对数值，也可以是相对于半径的半分比。
                        length: '80%'
                    },
                    //仪表盘标题
                    title: {
                        //相对于仪表盘中心的偏移位置
                        offsetCenter: [0, '-30%'], // x, y，单位px
                    },
                    //仪表盘详情，用于显示当前仪表盘的数据
                    detail: {
                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    },
                    data: [{
                        value: 1.5,
                        name: 'x1000 r/min'
                    }]
                },
                //第三个仪表图
                {
                    name: '油表',
                    type: 'gauge',
                    center: ['77%', '50%'], // 默认全局居中
                    radius: '25%',
                    min: 0,
                    max: 2,
                    //仪表盘起始角度， 正右手侧为0度
                    startAngle: 135,
                    //仪表盘结束角度
                    endAngle: 45,
                    splitNumber: 2,
                    //仪表盘轴线相关配置
                    axisLine: {
                        lineStyle: { // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    //仪表盘刻度样式
                    axisTick: {
                        splitNumber: 5,
                        length: 10, // 属性length控制线长
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    //仪表盘刻度标签
                    axisLabel: {
                        //每个刻度的文本格式
                        formatter: function(v) {
                            switch (v + '') {
                                case '0':
                                    return 'E';
                                case '1':
                                    return 'Gas';
                                case '2':
                                    return 'F';
                            }
                        }
                    },
                    //仪表盘分隔线
                    splitLine: {
                        length: 15, // 属性length控制线长
                        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    //仪表盘指针
                    pointer: {
                        width: 2
                    },
                    //仪表图标题
                    title: {
                        show: false
                    },
                    //仪表盘详情，用于显示当前仪表盘的数据
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 0.5,
                        name: 'gas'
                    }]
                },
                //第四个仪表盘
                {
                    name: '水表',
                    type: 'gauge',
                    center: ['77%', '50%'], // 默认全局居中
                    radius: '25%',
                    min: 0,
                    max: 2,
                    startAngle: 315,
                    endAngle: 225,
                    splitNumber: 2,
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: { // 坐标轴小标记
                        show: false
                    },
                    axisLabel: {
                        formatter: function(v) {
                            switch (v + '') {
                                case '0':
                                    return 'H';
                                case '1':
                                    return 'Water';
                                case '2':
                                    return 'C';
                            }
                        }
                    },
                    splitLine: { // 分隔线
                        length: 15, // 属性length控制线长
                        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width: 2
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 0.5,
                        name: 'gas'
                    }]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option, true);
        setInterval(function() {
            //随机改变四个仪表盘中的数据
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
            option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
            option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
            //然后再指定的配置项和数据显示图表
            myChart.setOption(option, true);
        }, 2000);

看下列具体效果图，

在上述案例中，一共配置了四个仪表盘，通过 series组件中的center改变圆心的位置，对图表进行定位，使页面显示出现类似汽车表盘的效果。
在上述案例中用到的配置项有tooltip组件、toolbox组件、series组件，我们具体分析一下series组件的内容

1. type：当type的值为funnel时，表示一个漏斗图表
2. z：控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
3. min，max：表示最小的数据值和最大的数据值，会映射到 minAngle
4. splitNumber：表示仪表盘刻度的分割段数
5. radius：仪表盘半径
6. center：通过定位圆心来定位图表的位置
7. axisLine：仪表盘轴线相关配置，用于对轴线进行各种配置
   • lineStyle：仪表盘轴线样式，可以修改轴线的宽度和颜色
8. axisTick：仪表盘刻度样
   • length：刻度线长度，可以是数值和相对半径的百分比。刻度包含分割线，但是分隔线不包括刻度。
   • lineStyle：用于设置控制线条样式
9. splitLine：仪表盘分隔线样式
   • length：分隔线长度
   • lineStyle：控制线条样式
10. axisLabel：仪表盘刻度标签 ，每个分隔线后有一个刻度标签
11. title：仪表盘标题，显示data中name的属性
12. detail：仪表盘详情，用于当前仪表盘的数据
13. pointer：仪表盘指针。用于对指针进行样式配置
14. startAngle：仪表盘起始角度， 正右手侧为0度。默认值为225
15. endAngle：仪表盘结束角度。默认值为-45

可以通过startAngle和endAngle两个属性来控制仪表盘轴线的显示位置。