Incubator-echarts: 想用插件弄个仪表盘放在手机上的，怎样可以弄成我想要的样子呢

[sweetyluo]

想用插件弄个仪表盘放在手机上的，怎样可以弄成我想要的样子呢，拿现有的改的话，能像图一样有个红色线吗？

[sweetyluo]

[mangoZT]

大概好像只能做成这样 指针好像没法直接换 那个区域好像也无法直接生成

[mangoZT]

5544 关于中心markarea区域 只能这样投机取巧做 无法直接设置 已问过大神

[sweetyluo]

这样已经非常不错了，具体是怎么做呢？请多多指教，小女不胜感激

[mangoZT]

markarea其实是另一个假的仪表盘 你多给一个数据系列 但不要给值即可 markline比较麻烦 需要坐下定位 其他刻度label什么的在API都有

[sweetyluo]

有相关的链接吗？指针和红线是变化的哟

[mangoZT]

仪表盘的指针肯定是动的，红线需要你自己定位哦 没有官方链接 我本地测试实现的

[sweetyluo]

加我QQ1034064188 发一下给我看看，谢谢你

[mangoZT]

`option = {

series : [
    {

        type: 'gauge',
        z: 3,
        min: 0,
        max: 180,
        splitNumber: 4,
        startAngle :180,
        endAngle :0,
        radius: '16%',
        axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
                width: 100,
                color:[[1,"#E064A1"]]
            }
        },
        axisTick: {            // 坐标轴小标记
            length: 0,        // 属性length控制线长
        },
        splitLine: {           // 分隔线
            length: 0,         // 属性length控制线长
        },
        axisLabel:{
            show:false  
        },

        itemStyle: {
            normal:{
                color:"#D4237A",
            }
        },
        title:{
          show:false  
        },
        detail:{
          show:false  
        },
        markLine:{
            data:[
                [
                    {
                        x: 485,
                        y: 380,
                        symbol:"rect",
                        lineStyle:{
                            normal:{
                                type:"solid",
                                width:8
                            }
                        }
                    },
                    {
                        x: 463,
                        y: 348,
                        symbol:"rect",
                        lineStyle:{
                            normal:{
                                type:"solid",
                                width:8
                            }
                        }
                    }
                ]
            ]
        },
        data:[]
    },
    {
        name: '速度',
        type: 'gauge',
        z: 3,
        min: 0,
        max: 180,
        splitNumber: 4,
        startAngle :180,
        endAngle :0,
        radius: '30%',
        axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
                width: 10,
                color:[[1,"#9C9C9C"]]
            }
        },
        axisTick: {            // 坐标轴小标记
            length: 0,        // 属性length控制线长
        },
        splitLine: {           // 分隔线
            length: 28,         // 属性length控制线长
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                width:5,
                color: '#9C9C9C'
            }
        },
        axisLabel:{
            show:false  
        },
        pointer:{
          length:"100%",
          width:6
        },
        itemStyle: {
            normal:{
                color:"#D4237A",
            }
        },
        title:{
          show:false  
        },
        detail:{
          show:false  
        },
        markLine:{
            data:[
                [
                    {
                        x: 485,
                        y: 380,
                        symbol:"rect",
                        lineStyle:{
                            normal:{
                                type:"solid",
                                width:8
                            }
                        }
                    },
                    {
                        x: 463,
                        y: 348,
                        symbol:"rect",
                        lineStyle:{
                            normal:{
                                type:"solid",
                                width:8
                            }
                        }
                    }
                ]
            ]
        },
        data:[{value: 40, name: ''}]
    }
]

};``` 在上班 你把这个放到官网例子中执行即可

[sweetyluo]

我放上去是这样子，红色线没有了，弧线也很粗

[mangoZT]

你要看看API 属性要做调整的 尤其是自适应这块

[sweetyluo]

粗细可以调，但是红色线是哪段代码呢？

[mangoZT]

第二段markline吧 第一段的可以去掉

[sweetyluo]

第二段markline我放在代码里了呀，为什么红线还是没有显示？可以跟我说说吗？红线怎么才能显示

[mangoZT]

如果没有删减代码的话 肯定是位置偏出去了 修改定位坐标

[sweetyluo]

找到了，谢谢你