Echarts在线免费图表

 
            var icon1 = 'image://data:image/png;base64,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'
var icon2 = 'image://data:image/png;base64,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'
var icon3 = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAApCAYAAABHomvIAAAAAXNSR0IArs4c6QAABqRJREFUWAntWElsm0UUnvdm/t9blqapuya06YKqREWg9sIBKRFiEULqqb0h1EsjgUCiBzihutdWggNqRXupxKlKbhyAA1UD4oIEYmsjmtK9TUqz1HHsOP7/WZix9Tv/ZsduK8SB34eZefOWz2/mvZk3hPzHP3ga+JRSMHJigmYHN2LxgQ3lfbvF8HdE5nIgn1T/YwHM5XI4sf1tm+RJ0uYp21FlbAQkwZijxEKle/tzK+OHQTTia0RvC+ChsTH66Mb+Do6YaqSwGd2A7SoUiuO5IacZn3+uJYBmCQ+evNpRSvSkhbPckozfSLifEVgpVW4sTeRGeHguPF7T2KExRWfvzPQQWWFh4ScZU1spkYfFidzASjM9TQEeGrtiL1xL9QgLGvJJgJQUsosyZkupbCo5CLAdkCsup6RgE1ZqBoBklosT7w4VG/E0NGzAzd5Kr48TdBVFoGoLkTIrJUnE8Xg00PsOBZmnBKYJuLFL2qUqpS8/2rvkyfjbWIBmWRdv/90bF51SprLCcvuVyy2/orX6aKEA4UxTwqbjeLOMLY4f6y+H5yLpwQSE2XNhcMIFkBR2clLe2S44Y1S6kgrJ+h2kz1Ych4aBzHLeffSsivzpCMCRM7OZcEBUwTG2l7sqG1bc9piLHrCtoYrDIiCnlqa6jYP8OgMATZ6jbjHjZzB9SJIBpdyuMP2xxxJSxCa7I/LSZoc/vZf00wOpo/jg5YxwCoF/ICXLcsmbeg4p3UWAHNB/ZTMBpRMImQdF/tAB/QsBHhsYIPk6F2SfBXjPD6jIWIf24gqA1qC/Ohjj2pFTtzb5mU20EpDPKxndG1U+xGcQYVT3h/xyq32YI0p8IYX6fpW22kOCEi32KwrHXaXqXpbkJ47U8mN9iUdO3IqkCwS5uSE4ii8gwEmtrgE4Y1JtIIDHKMUjZhT+JJGIRG0L05nTXcdSB8i2yDrRE+AyPigAWD8Cfqj9H9gvnly4VQAHKeKbYboZC0l6w3Q1l096wVIHiAUVACgrkNLrHwtAJ+mj2jttXRgUwltE0Z4wGCFcxqkMBKA5uUbPkWp8VAEatI7Zb75PJWWnb1jvAsUBPdhXJ7TeSQAlr8exM24FABqeKftWNQ1VQR0eJwFwhoFKZps28imyP0JrlYDxsgKcwOoZdfZcYRUgmZyMJE3JZDxAhECkt4rN8AGJl1UiETlBknJr1Wk1zw22bkbvy4iy1qVr+yrCH8jGtVk3ldemSG1pZycfRmoHHaWxt169X+cjBlokKKIW4lhBVYJ5UDOJSme1PKh68NLx4UitwB0eETLKUeHvcUZaoWmXxMpSlq6E5bupW3VaFaA5VswN18+ENF3wj72+VOKy7j/wxi232obk5Ns4fhdV9C7Y17fqQSOUtGlgSVGVyzrNR/6ZXmKhf+fjDDWjKSkv6YW7HuZByxJYciPOGJo8UT3Da0GipfChFQHDFJ0LKzRjpeSPRJELcXNxNEXgKnDxedwcEr5AreDqZTqwokvb1SU2gsnBHyIAK255hlCIvY1IIS5or5zWt7flOMNVmrmRSLgIrvuxrl0CK2Tm9Q1Y8bK8H5ZHuuqsaih7DK99cmV9hacD+U+fx5skgR0eT7TFTqTwSvW6BWQzUaAPKpjXO+GyEuSi9vbNqEyNYjE6DVLc9c+bWHgpPzDrvUoEAB49+5M1tdgbPby52uMirPcretI+gFVAzv8MLy/JZHSVt7Fe5dX3oDF4bvSAq9NwpE7l1LmOVDYvH9tAbIJPZ/trYXC2rmCHZ88EtkwAoLGR3bZjKZxyLEhIJa1JRtSjNnDEshrPMWVdjitBde5b8oLDE44ANA88Noq8x+C1Fgh9u4QppuCOKSE9eqstElvaduK+WdY4cKkkX44rOwN70G/s1VO/ZRzVFXvlIspiwlJbpSIb1ipBKbW4SSVCiPsM449P86j0zQd9j7w6xI+jIUDDNHz6SgcppTv8ApG+LnK4lN1UKdsFtJTOJxatuMhthzO3wARGkrBfhwH3YqEv70Wtf870mwI0DMO5m0m6Lt39NF61jD7/Z5b1q/d2L8V5zuOL7EFvwmvN69Ou1N0Fyq3Yy4PH105r6/1snjq+fn9PoRk4o3NND/oND5+/mUzN8M4yi74K+Pka9atPblZH6dI72dJawDwdbQE0QqZ+eeOzv2x3GZNIVSJcy3iK/a15sEwncGWo0KfP2PberdsG6DdswI6e+5lNzfTSzi0JXOIMu4oAKzgtnQ1dInt7WY4dH9TPTrVXAr/s//1/ywP/ACz2qAp739wtAAAAAElFTkSuQmCC'

option = {
    backgroundColor: '#2c343c',

    title: {
        text: '累计安装设备',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#fff',
            fontSize: 24
        }
    },
    tooltip: {},
    legend: {
        orient: 'vertical',
        right: '10%',
        top: 'middle',
        itemWidth: 32,
          itemHeight: 32,
          itemGap: 20,
        data: [
            {
                name: '待维修',
                icon: icon1
            },
            {
                name: '维修中',
                icon: icon2
            },
            {
                name: '运行中',
                icon: icon3
            }
        ],
        textStyle: {
            color: '#fff'
        }
    },
    dataset: [
        {
            source: [
                ['状态', '待维修', '维修中', '运行中'],
                ['value', 34, 23, 236]
            ]
        }
    ],
    series: [{
            name: '内圆',
            type: 'pie',
            silent: true,
            clockWise: true,
            hoverAnimation: false,
            animationType: 'scale',
            radius: '8%',
            center: ['50%', '50%'],
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: 100,
                itemStyle: {
                    normal: {
                        color: {
                            colorStops: [{
                                offset: 0,
                                color: '#fff' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#cfcfcf' // 100% 处的颜色
                            }]
                        }
                    }
                }
            }]
        },

        {
            name: '设备状态',
            type: 'pie',
            radius: ['10%', '40%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
                show: false
            },
            lableLine: {
                show: false
            },
            datasetIndex: 0,
            seriesLayoutBy: 'row',
            color: [{
                    colorStops: [{
                      offset: 0,
                      color: '#FF7671'
                    }, {
                      offset: 1,
                      color: '#A14AFF'
                    }]
                }, {
                    colorStops: [{
                      offset: 0,
                      color: "#FFEA4F"
                    }, {
                      offset: 1,
                      color: '#F89212'
                    }]
                }, {
                    colorStops: [{
                      offset: 0,
                      color: "#A568FF"
                    }, {
                      offset: 1,
                      color: '#006CFF'
                }]
            }],
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function(idx) {
                return Math.random() * 200;
            }
        }

    ]
};