Echarts图表之圆形进度条(四)

Echarts图表之圆形进度条(四)

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Echarts图表</title>
        <!-- 引入echarts.min.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var e = 80;
            var option = {
                color: ['#2E7DFF', '#ccc'],
                backgroundColor: 'rgba(1,202,217,.2)',
                // 标题
                title: {
                    show: true,
                    text: e + '%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontSize: '15',
                        color: '#000',
                        fontWeight: 'normal'
                    }
                },
                // 提示框
                tooltip: {
                    trigger: 'item',
                    formatter: '{e}%',
                    show: false
                },
                // 图例不显示
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    show: false
                },
                series: {
                    naem: '',
                    // 类型:饼图
                    type: 'pie',
                    radius: ['35%', '45%'],
                    avoidLabelOverLap: true,
                    hoverAnimation: false,
                    // 标签不显示
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    // 标签线不显示
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                            value: e,
                            name: ''
                        },
                        {
                            value: 100 - e,
                            name: ''
                        }
                    ]
                }
            }
            myChart.setOption(option);
        </script>
    </body>
</html>

上一篇:让 div 的高度等于宽度,的小技巧


下一篇:Power Platform Center of Excellence (CoE) 部署完成&主要内容说明