Implement an Echarts chart in the pie chart indicator line, more intuitive and clear to see the statistical effect. Write a full demo:

<! DOCTYPEhtml>
<html>

    <head>
        <meta charset="utf-8">
        <title>Five minutes of hand pie</title>
        <! Echarts.js -->
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>

    <body>
        <! -- Prepare a Dom with size (width and height) for ECharts
        <div id="main" style="width: 300px; height:300px;"></div>
        <script type="text/javascript">
            // Initializes the echarts instance based on the prepared DOM
            var myChart = echarts.init(document.getElementById('main'));
            // Specify the chart configuration items and data
            myChart.setOption({
                tooltip: {
                    trigger: 'item'.formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical'.x: 'right'.y: 'bottom'.data: ['online'.'offline']},series: [{
                    name: 'Access source'.type: 'pie'.radius: ['50%'.'70%'].avoidLabelOverlap: false.data: [{value: 12.name: 'online'.itemStyle: { color: '#005eff'}}, {value: 3.name: 'offline'.itemStyle: { color: '#ff9194'}},]}]});</script>
    </body>
</html>
Copy the code

The effect is as follows: