Echarts之圆饼图用法

最新推荐文章于 2025-05-13 15:55:06 发布

噢噢怪

最新推荐文章于 2025-05-13 15:55:06 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端js 文章标签： js

本文链接：https://blog.youkuaiyun.com/liuziming112/article/details/105008978

前端js 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用Echarts库创建圆饼图，包括设置CSS样式、HTML布局以及核心JS代码的编写，帮助读者掌握Echarts图表的实战技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts之圆饼图用法

css代码

 #chartone {
            float: left;
            margin-left: -50px;
            height: 159px;
            width: 300px;
        }

html代码

  <div id="chartone"></div>

js代码

 <script>
        // 饼状图
        var myChart = echarts.init(document.getElementById('chartone'));
        //init初始化接口，返回ECharts实例，其中dom为图表所在节点
        option = {
        //改变图表样式
            legend: {
                orient: 'vertical',
                right: 10,
                top: 40,
                // 设置icon大小
                itemWidth: 9,
                data: [{
                    name: '入侵目标',
                    textStyle: {
                        fontSize: 12,
                        color: 'white'
                    },
                    icon: 'circle'
                }, {
                    name: '备案目标',
                    textStyle: {
                        fontSize: 12,
                        color: 'white'
                    },
                    icon: 'circle'
                }],
            },
            //饼状图样式
            series: [
                {
                    // 鼠标经过不放大
                    hoverAnimation: false,
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '15',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: 335, name: '入侵目标', itemStyle: {
                                color: '#6dcff6'
                            }
                        },
                        {
                            value: 310, name: '备案目标', itemStyle: {
                                color: '#0e6de9'
                            }
                        },
                    ]
                }
            ]
        };
        myChart.setOption(option);// 为echarts对象加载数据
    </script>