Echarts实现简单饼状图效果

Echarts实现简单饼状图效果
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>

<h1>简单饼状图图案例</h1>
<hr>

<div id="container" style="max-width:760px;height:600px;margin: 0px auto;">

</div>

<!--引入echarts库-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0/echarts.min.js"></script>

<script>


    let myChart = echarts.init(document.getElementById('container'));

    // 数据数组，name 为数据项名称，value 为数据项值json
    let data = [{

        "name": "Music",
        "value": 179049

    }, {
        "name": "Entertainment",
        "value": 127674
    }, {
        "name": "Comedy",
        "value": 87818
    }, {
        "name": "Film",
        "value": 73293
    }, {
        "name": "Animation",
        "value": 73293
    }, {
        "name": "Sports",
        "value": 67329
    }, {
        "name": "Gadgets",
        "value": 59817
    }, {
        "name": "Games",
        "value": 59817
    }, {
        "name": "Blogs",
        "value": 48890
    }, {
        "name": "People",
        "value": 48890
    }];


    //准备设置的内容
    option = {
        // 提示信息
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        // legend就是Echarts图表中对图形的解释部分
        legend: {
            //设置图例的朝向  垂直显示；horizontal // 水平显示
            orient: 'vertical',
            left: 'left',
           //设置文本样式为黑色
            textStyle: {color: 'balck'}
        },

        //当用户点击相关文字时，浏览器就会自动将焦点转移到该标签相关的表单控件上
        label: {
            normal: {
                //文字改变样式
                textStyle: {
                    color: 'red'  // 改变标示文字的颜色
                }
            }
        },

        //饼状图
        series: [
            {
                name: '谷粒影音视频分类统计分析',
                type: 'pie',// 设置图表类型为饼图
                radius: '60%',// 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                center: ['50%', '60%'],// 数据数组，name 为数据项名称，value 为数据项值
                data: data,

                //设置饼状图扇形区域样式
                itemStyle: {
                    //设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                    emphasis: {
                        //  阴影渐变范围控制
                        shadowBlur: 10,
                        //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ],
        color: ["#ae5039", "#65c294", "#d9d6c3", "#339933", "#FF6666", "#9999FF", "#FFFF00", "#FF9933", "#FFDEAD", "#FF00FF"]
    };
    //准备Echarts代码  setOption设置当前对象的属性
    myChart.setOption(option);

</script>
</body>
</html>
运行效果：