Echarts绘制仪表盘出错应该如何修改

目标想达到如下图的效果：

img

但是实际编码时却是下图的效果：

img

下面是我的源码：

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>仪表盘title>
  <script src="../JS/echarts.js">script>
head>
<body>
<div style="width: 600px;height: 400px">div>
<script>
  var mCharts = echarts.init(document.querySelector("div"))
  var option = {
    series:[
      {
        type:'gauge',
        data:[
          {
            value:97,
            itemStyle:{
              color:'pink',
            }
          },
          {
            value:85,
            itemStyle:{
              color:'green'
            }
          }
        ],
        min:50
      }
    ]
  }
  mCharts.setOption(option)
script>
body>
html>

想问问应该要如何修改呢？


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>仪表盘</title>
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        <div style="width: 600px;height: 400px"></div>
        <script>
            var mCharts = echarts.init(document.querySelector("div"))
            var option = {
                series: [{
                    type: 'gauge',
                    data: [{
                            value: 97,
                            itemStyle: {
                                color: 'pink',
                            }
                        }
                    ],
                    detail: { // 仪表盘详情，用于显示数据。
                        show: true, // 是否显示详情,默认 true。
                        offsetCenter: [20,"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                        color: "auto", // 文字的颜色,默认 auto。
                        fontSize: 30, // 文字的字体大小,默认 15。
                        formatter: "{value}",
                    
                    },
                    min: 50
                },
                {
                    type: 'gauge',
                    data: [
                        {
                            value: 85,
                            itemStyle: {
                                color: 'green'
                            }
                        }
                    ],
                    detail: { // 仪表盘详情，用于显示数据。
                        show: true, // 是否显示详情,默认 true。
                        offsetCenter: [-20,"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                        color: "auto", // 文字的颜色,默认 auto。
                        fontSize: 30, // 文字的字体大小,默认 15。
                        formatter: "{value}",
                    
                    },
                    min: 50
                }]
            }
            mCharts.setOption(option)
        </script>
    </body>
</html>

img

给一个建议，很多仪表盘图标都是有很多 圆或者仪表盘嵌套做成的。

例如你这个，你可以在此仪表盘外面在套一个仪表盘，把外仪表盘的splitLine的length设置的大一点。这样就可以把splitLine的线延申到内仪表盘了，同时你要把外仪表盘的zlevel的层级设置的高于内仪表盘的层级。然后把外仪表盘的其他地方设置成透明，只留下这个splitLine。

我上面是个例子，具体你可以扩散一下思路，或者在查查API。

我记得data的obj中，是可以设置x值跟y值的