echarts的水球图

前些年有写水球图代码，这次又有类似工作，这里记录一下笔记：
1.需要单独安装，安装参考npm库中的插件说明，注意有echarts的版本对应关系。
2.水球图的data，官网默认时0-1，代表比例。且默认数据是没有名称的。这里可以用json形式。下面列一下配置。
3.数据注意做一下排序，小的在图中的前面，数据的后面。

{
    "backgroundColor": "transparent",
    "title": {
        "show": false
    },
    "legend": {
        "left": 5,
        "top": 23,
        "orient": "horizontal",
        "type": "scroll",
        "pageIconColor": "#eee",
        "pageIconInactiveColor": "#fff",
        "pageTextStyle": {
            "color": "white"
        },
        "textStyle": {
            "width": "50",
            "overflow": "truncate",
            "ellipsis": "..."
        }
    },
    "grid": {
        "left": 5,
        "right": 10,
        "bottom": 5,
        "top": 30,
        "containLabel": true
    },
    "dataZoom": [],
    "toolbox": {
        "feature": {
            "saveAsImage": {
                "backgroundColor": "rgba(211,211,211,0.5)"
            },
            "myTool": {
                "show": true,
                "title": "图形切换",
                "icon": "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAe5JREFUSEu9lVFS2zAQhv+VMQ/AQ46QngA/AslM3RM0N2huUC5AooQLhBtwA8wJCDNppo/uDegJ2oeGB5RoGSlxEHIcC6ZBbx6v9tv9d1dL2PGht/iPz2Ri7NVU5qH3tgNOZDOOxHcCd5jot+uUGE0GbtRCX+GnfKgCVgL22wMJpi4zpHrUGXL513cSnV52hGAJ4E7N9GCTTRmQyEZ8JG4IfP806ZvLtSduDc8BdNVMpz6kBIjbwzE0rtW0d13r2TEosvEhrwBWFgChkfsB2EyYm2raNxnZ8wJYFjRTP3q2U+rOXvsynf9b5L4kRgE1192i8GuAiZ41PYRKY+0ZX9WMv7gQKxXptMhiDYhbw9zVzxhGEY6rMmHWHSJKmDn3IdbXSokXgElt0ksLhzZC0Pp7q2QMI+2osLEyrXwtAcvWzFxAXQ22/d9vDTJNYjSfXIw/CADATctEF58NuxD4FpKJP5RliYxDr8hWtkMxJsIxM34RcVZZcK/7NhZ5Y5uuIZyFDl9lm6Jq0BLZ2DuKElOwELls9AvdKQ2aubzbp2IV3k4fO3cmCHT3NLkYBMoS/ly7k2wXDrivZnxbWiaJbEQH9FkQJBj36pFl2MJxQzaFF3QOohSEP+4vYnxi5kxpHr1rZW6S5v8v/ZAC1Ng8A1GQPCif4QbWAAAAAElFTkSuQmCC"
            }
        },
        "right": 10,
        "show": true
    },
    "tooltip": {
        "confine": true
    },
    "series": [
        {
            "name": "",
            "type": "liquidFill",
            "data": [
                {
                    "name": "美国",
                    "value": 0.5,
                    "index": 2
                },
                {
                    "name": "日本2",
                    "value": 0.4,
                    "index": 4
                },
                {
                    "name": "俄罗斯",
                    "value": 0.2,
                    "index": 1
                },
                {
                    "name": "日本",
                    "value": 0.2,
                    "index": 3
                },
                {
                    "name": "中国",
                    "value": 0.1,
                    "index": 0
                }
            ]
        }
    ]
}

echarts水球图的插件链接：
https://www.npmjs.com/package/echarts-liquidfill