echarts仪表盘相关配置

指定图表的配置项和数据

    var option = {
        
        backgroundColor: "#000",
        
        tooltip: {              // 本系列特定的 tooltip 设定。   
                show: true,
                formatter: "{b}:{c}%",
                backgroundColor: "rgba(50,50,50,0.7)",  // 提示框浮层的背景颜色。注意:series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
                borderColor: "#333",        // 提示框浮层的边框颜色。...
                borderWidth: 0,             // 提示框浮层的边框宽。...
                padding: 5,                 // 提示框浮层内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。...
                textStyle: {                // 提示框浮层的文本样式。...
                    // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
                },
        },
        
        series: [
            {
                name: "单仪表盘示例",     // 系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
                type: "gauge",          // 系列类型
                radius: "80%",          // 参数:number, string。 仪表盘半径,默认 75% ,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
                center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
                startAngle: 225,        // 仪表盘起始角度,默认 225。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。
                endAngle: -45,          // 仪表盘结束角度,默认 -45
                clockwise: true,        // 仪表盘刻度是否是顺时针增长,默认 true。
                min: 0,                 // 最小的数据值,默认 0 。映射到 minAngle。
                max: 100,               // 最大的数据值,默认 100 。映射到 maxAngle。
                splitNumber: 10,        // 仪表盘刻度的分割段数,默认 10。
                
                axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
                    show: true,             // 是否显示仪表盘轴线(轮廓线),默认 true。
                    lineStyle: {            // 仪表盘轴线样式。
                        color: colorTemplate1,  //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值:[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                        opacity: 1,                 //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
                        width: 30,                  //轴线宽度,默认 30。
                        shadowBlur: 20,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                        shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                    }
                },
                
                splitLine: {            // 分隔线样式。
                    show: true,             // 是否显示分隔线,默认 true。
                    length: 30,             // 分隔线线长。支持相对半径的百分比,默认 30。
                    lineStyle: {            // 分隔线样式。
                        color: "#eee",              //线的颜色,默认 #eee。
                        opacity: 1,                 //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
                        width: 2,                   //线度,默认 2。
                        type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
                        shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                        shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                    }
                },
                
                axisTick: {             // 刻度(线)样式。
                    show: true,             // 是否显示刻度(线),默认 true。
                    splitNumber: 5,         // 分隔线之间分割的刻度数,默认 5。
                    length: 8,              // 刻度线长。支持相对半径的百分比,默认 8。
                    lineStyle: {            // 刻度线样式。   
                        color: "#eee",              //线的颜色,默认 #eee。
                        opacity: 1,                 //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
                        width: 1,                   //线度,默认 1。
                        type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
                        shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                        shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                    },
                },
                        
                axisLabel: {            // 刻度标签。
                    show: true,             // 是否显示标签,默认 true。
                    distance: 5,            // 标签与刻度线的距离,默认 5。
                    color: "#fff",          // 文字的颜色,默认 #fff。
                    fontSize: 12,           // 文字的字体大小,默认 5。
                    formatter: "{value}",   // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
                },
                
                pointer: {              // 仪表盘指针。
                    show: true,             // 是否显示指针,默认 true。
                    length: "70%",          // 指针长度,可以是绝对数值,也可以是相对于半径的百分比,默认 80%。
                    width: 5,               // 指针宽度,默认 8。
                },
                
                itemStyle: {            // 仪表盘指针样式。
                    color: "auto",          // 指针颜色,默认(auto)取数值所在的区间的颜色
                    opacity: 1,             // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
                    borderWidth: 0,         // 描边线宽,默认 0。为 0 时无描边。
                    borderType: "solid",    // 柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'。
                    borderColor: "#000",    // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color,不支持回调函数。
                    shadowBlur: 10,         // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                    shadowColor: "#fff",    // 阴影颜色。支持的格式同color。
                },
                
                emphasis: {             // 高亮的 仪表盘指针样式
                    itemStyle: {
                        //高亮 和正常  两者具有同样的配置项,只是在不同状态下配置项的值不同。
                    }
                },
                
                title: {                // 仪表盘标题。
                    show: true,             // 是否显示标题,默认 true。
                    offsetCenter: [0,"20%"],//相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
                    color: "#fff",          // 文字的颜色,默认 #333。
                    fontSize: 20,           // 文字的字体大小,默认 15。
                },
                
                detail: {               // 仪表盘详情,用于显示数据。
                    show: true,             // 是否显示详情,默认 true。
                    offsetCenter: [0,"50%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
                    color: "auto",          // 文字的颜色,默认 auto。
                    fontSize: 30,           // 文字的字体大小,默认 15。
                    formatter: "{value}%",  // 格式化函数或者字符串
                },
                
                data: data1
            }
        ]
        
    };
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351