随笔- 310  文章- 1  评论- 0  阅读- 86066 
echarts饼状图
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!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 &lt; 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   boye169  阅读(12)  评论(0)  编辑  收藏  举报
相关博文：
·  echarts 折线图
·  echarts 仪表板
·  echarts饼图
·  echarts 饼状图入门使用
·  echarts柱状图
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
历史上的今天：
2022-05-19 typescript https上传文件
2022-05-19 typescript https请求
点击右上角即可分享
微信分享提示
SQL AI 助手