echarts饼图制作

最新推荐文章于 2024-05-20 22:14:20 发布

=^_^=银爪

最新推荐文章于 2024-05-20 22:14:20 发布

阅读量99

点赞数

文章标签： echarts 前端 javascript

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

版权

效果图

<!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;"></div>

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

        //3.2 设置图表样式
        // 指定图表的配置项和数据
        var option = {
            //背景颜色
            //backgroundColor: '#2c343c',
            //标题
            // title: {
            //     text: '饼图',
            //     left: 'center',
            //     top: 20,
            //     textStyle: {
            //         color: '#ccc'
            //     }
            // },
            //鼠标移入提示
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            //设置每一个数据颜色
            color: ['#006cff', '#006c00', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#006cff'],
            //左下角指示器
            // visualMap: {
            //     show: true,
            //     min: 80,
            //     max: 600,
            //     inRange: {
            //         colorLightness: [0, 1]
            //     }
            // },
            //图表内容
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    //中间空心圆
                    radius: [10, 110],
                    center: ['50%', '50%'],
                    data: [
                        { value: 335, name: '湖北' },
                        { value: 110, name: '云南' },
                        { value: 160, name: '北京' },
                        { value: 180, name: '山东' },
                        { value: 180, name: '河北' },
                        { value: 160, name: '江苏' },
                        { value: 200, name: '浙江' },
                        { value: 280, name: '四川' }
                    ].sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    //文字颜色  默认显示当前数据自身颜色，如果设置就会覆盖
                    // label: {
                    //     color: 'rgba(255, 255, 255, 0.3)'
                    // },
                    //线条颜色
                    // labelLine: {
                    //     lineStyle: {
                    //         color: 'rgba(255, 255, 255, 0.3)'
                    //     },
                    //     smooth: 0.2,
                    //     length: 5,
                    //     length2: 10
                    // },
                    //内容颜色
                    // itemStyle: {
                    //     color: '#c235ff',
                    //     shadowBlur: 200,
                    //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                    // },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
        //3.3 加载图表
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>