echarts饼状图 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.min.js"></script>
</head>
<body style="background-color:#151414">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:900px;height: 300px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        
        var option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            top: '15%',
            left: 'center',
            textStyle:{
                color:"#ffffff"
            },
            formatter: function(name) {
                // 获取legend显示内容
                let data = option.series[0].data;

                let total = 0;
                let tarValue = 0;

                for (let i = 0, l = data.length; i < l; i++) {
                    total += data[i].value;
                    if (data[i].name == name) {
                        tarValue = data[i].value;
                    }
                }
                let p = (tarValue / total * 100).toFixed(2);
                return name + ' ' + ' ' +tarValue +' ' + p + '%';
            },
        },
        series: [
            {
                name: '',
                type: 'pie',
                width:'450px',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: "搜索引擎"},
                    { value: 735, name: "直接访问"},
                    { value: 580, name: "邮件营销"},
                    { value: 484, name: "联盟广告"},
                    { value: 300, name: "视频广告"},

     


                ]
            }
        ]
    };


        myChart.setOption(option);
    </script>
</body>
</html>

 

 posted on 2023-05-19 09:36  boye169  阅读(19)  评论(0)    收藏  举报