ecomfe / echarts-liquidfill

Liquid Fill Chart for Apache ECharts
https://ecomfe.github.io/echarts-liquidfill/example/
BSD 3-Clause "New" or "Revised" License
1.47k stars 620 forks source link

特定图形初次渲染时,波浪带有一个明显的轮廓线 #114

Open lumengxin opened 4 years ago

lumengxin commented 4 years ago

请问有人遇到过这个问题吗?

特定图形初次渲染时,波浪带有明显的轮廓线。将生成的option赋值到echarts官网中又没问题。 water-line

option={
  "tooltip": {
    "trigger": "item",
    "show": true
  },
  "wtext": {
    "unit1": {
      "text": "",
      "color": "",
      "fontSize": 28,
      "fontWeight": false,
      "fontStyle": false,
      "textDecoration": false
    },
    "num": {
      "text": 300,
      "color": "",
      "fontSize": 28,
      "fontWeight": false,
      "fontStyle": false,
      "textDecoration": false
    },
    "unit2": {
      "text": "",
      "color": "",
      "fontSize": 28,
      "fontWeight": false,
      "fontStyle": false,
      "textDecoration": false
    },
    "showLabel": true
  },
  "series": [
    {
      "type": "gauge",
      "radius": "95%",
      "startAngle": "0",
      "endAngle": "-359.99",
      "splitNumber": 20,
      "min": 0,
      "max": 100,
      "center": [
        "50%",
        "50%"
      ],
      "pointer": {
        "show": false
      },
      "axisLine": {
        "show": true,
        "lineStyle": {
          "color": "#005675",
          "width": 5
        }
      },
      "axisTick": {
        "show": false
      },
      "splitLine": {
        "show": true,
        "length": 4,
        "lineStyle": {
          "width": 4,
          "color": "#005675"
        }
      },
      "axisLabel": {
        "show": false
      }
    },
    {
      "type": "gauge",
      "name": "",
      "radius": "90%",
      "startAngle": "0",
      "endAngle": "-359.99",
      "splitNumber": "200",
      "center": [
        "50%",
        "50%"
      ],
      "pointer": {
        "show": false
      },
      "title": {
        "show": false
      },
      "detail": {
        "show": false
      },
      "data": [
        {
          "value": 95,
          "name": ""
        }
      ],
      "axisLine": {
        "lineStyle": {
          "width": 20,
          "opacity": 0
        }
      },
      "axisTick": {
        "show": false
      },
      "splitLine": {
        "show": true,
        "length": 13,
        "lineStyle": {
          "color": "#005675",
          "width": 1,
          "type": "solid"
        }
      },
      "axisLabel": {
        "show": false
      }
    },
    {
      "name": "浏览器个数",
      "type": "liquidFill",
      "radius": "80%",
      "data": [
        "0.3000",
        "0.3000",
        "0.3000",
        "0.3000"
      ],
      "color": [
        {
          "type": "linear",
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "colorStops": [
            {
              "offset": 0,
              "color": "rgba(109, 61, 72, 0.3)"
            },
            {
              "offset": 1,
              "color": "rgba(56, 30, 69, 0.1)"
            }
          ],
          "global": false
        }
      ],
      "outline": {
        "borderDistance": 10,
        "itemStyle": {
          "borderColor": "rgba(82, 138, 255, 0.3)",
          "borderWidth": 2,
          "shadowBlur": 20
        }
      },
      "label": {
        "normal": {
          "formatter": ""
        }
      }
    },
    {
      "name": "浏览器个数",
      "type": "pie",
      "radius": [
        "79%",
        "81%"
      ],
      "labelLine": {
        "show": false
      },
      "hoverAnimation": false,
      "data": [
        {
          "value": 300,
          "show": true,
          "roundCap": true,
          "barWidth": 10,
          "itemStyle": {
            "shadowBlur": 0,
            "borderWidth": 3,
            "normal": {
              "color": {
                "type": "linear",
                "x": 0,
                "y": 0,
                "x2": 0,
                "y2": 1,
                "colorStops": [
                  {
                    "offset": 0,
                    "color": "rgba(255, 141, 83, 1)"
                  },
                  {
                    "offset": 1,
                    "color": "rgba(255, 45, 119, 1)"
                  }
                ]
              },
              "barBorderRadius": 10,
              "shadowBlur": 0,
              "borderWidth": 3,
              "borderColor": {
                "type": "linear",
                "x": 0,
                "y": 0,
                "x2": 0,
                "y2": 1,
                "colorStops": [
                  {
                    "offset": 0,
                    "color": "rgba(255, 141, 83, 1)"
                  },
                  {
                    "offset": 1,
                    "color": "rgba(255, 45, 119, 1)"
                  }
                ]
              }
            }
          }
        },
        {
          "value": 0,
          "show": false,
          "tooltip": {
            "show": false
          },
          "itemStyle": {
            "normal": {
              "barBorderRadius": 300,
              "color": "rgba(204,204,204,0)"
            }
          }
        }
      ],
      "value": 50
    }
  ]
}