echarts环形图制作

最新推荐文章于 2024-07-30 16:49:30 发布

=^_^=银爪

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量254

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_65635437/article/details/131104820

版权

效果图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导包 -->
    <script src="./echarts.js"></script>
</head>

<body>
    <!-- 2.写HTML结构 -->
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;background-color: pink"></div>

    <script>
        /* 3.初始化配置 */
        //3.1 创建图表
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        //3.2 设置图表样式
        // 指定图表的配置项和数据
        var option = {
            series: [
                {
                    //设置圆环起始角度
                    startAngle: 180,
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    //偏移
                    center: ['48%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {
                            value: 100, itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#00fffb' }, // 0 起始颜色
                                        { offset: 1, color: '#0061ce' }  // 1 结束颜色
                                    ]
                                )
                            }
                        },
                        { value: 100, itemStyle: { color: '#12274d' } },
                        { value: 200, itemStyle: { color: 'transparent' } },
                    ]
                }
            ]
        };

        //3.3 加载图表
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>