echarts 仪表盘样式?

这是设计稿宽86px高75px截屏2024-11-08 16.51.27.png

这是写的仪表盘,设计稿太小了实在不知道怎么还原了,需要大佬出手一下

let data = 100;
let rate = '[表情][表情][表情][表情][表情]';
option = {

                tooltip : {
                    formatter: "{a} <br/>{b} : {c}"
                },
                series : [
                    {
                        name: '刻度',
                        type: 'gauge',
                        radius: '65%',
                        min: 0,
                        max: 100,
                        startAngle: 220,
                        endAngle: -40,
                        z:10,
                        splitNumber: 10,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: [
                                    [1, 'rgba(0,255,0,1)']
                                ]
                            }
                        }, //仪表盘轴线
                        
                        axisLabel: {
                            show: true,
                            color: '#f0f',
                            distance: 30
                        }, //刻度标签。
                        axisTick: {
                            show: true,
                            splitNumber: 15,
                            lineStyle: {
                                color: '#f0f',
                                width: 1
                            },
                            length: 8
                        }, //刻度样式
                        splitLine: {
                            show: true,
                            length: 20,
                            lineStyle: {
                                color: '#f0f'
                            },
                            
                        }, //分隔线样式
                        detail: {
                            show: false
                        },
                        pointer: {
                            show: false
                        }
                    },
                    {
                        name:'业务指标',
                        type:'gauge',
                        startAngle: 220,
                        endAngle: -40,
                        axisLine: { //仪表盘轴线样式
                            lineStyle: {
                                width: 20,
                                color: [[0.2, '#E31415'], [0.4, '#0E90FF'], [0.6, '#03B865'],[0.8, '#E31415'],[1, '#0E90FF']], 
                                opacity: 0.4, //盘的颜色变成透明
                                width: 15
                            }
                        },
                          axisLabel: {show: false},
                        splitLine: { //分割线样式,是大分割线
                            show: false,
                            length: 30,
                            width: 1, 
                        },
                        // 刻度线
                        axisTick: {
                            show: false,
                            length: 20,
                            splitNumber: 5,  // 每个分割线内的刻度线分为5份
                            lineStyle: {
                            //color: "auto",
                            width: 3,
                               }
                        },
                        data:[{value: 65}],

                        markPoint:{
                            symbol:'emptyCircle',
                            symbolSize:220,
                            data:[
                                //跟你的仪表盘的中心位置对应上,颜色可以和画板底色一样
                                {value: '80\nMfg' ,x:'center', y:'center', itemStyle:{color:'#5686FF'}}
                                ],
                            itemStyle:{
                                  normal:{
                                  label:{ 
                                  show: true,  
                                  color: '#0f0',//气泡中字体颜色
                                  fontSize: 12
                                      }
                                 }
                             },
                        },
                        
                    
                        detail: {               // 仪表盘详情,用于显示数据。(仪表盘的数值字体样式和显示位置)
                            show: false,             // 是否显示详情,默认 true。
                            // offsetCenter: [0,0],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
                            color: "#00f",          // 文字的颜色,默认 auto。
                            fontSize: 15,           // 文字的字体大小,默认 15。
                            formatter: "Mp",  // 格式化函数或者字符串
                          },
                        pointer: {              // 仪表盘指针。
                        show: true,             // 是否显示指针,默认 true。
                        length: "70%",          // 指针长度,可以是绝对数值,也可以是相对于半径的百分比,默认 80%。
                        width: 8,               // 指针宽度,默认 8。
                      },
                      itemStyle: {            // 仪表盘指针样式。
                      color: "#5686FF",          // 指针颜色,默认(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。
                      },
                    }

                ]
            }
// 随机数据
阅读 691
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏