echarts-环形图

最新推荐文章于 2024-09-04 19:52:59 发布

Mengzy007

最新推荐文章于 2024-09-04 19:52:59 发布

阅读量3.6k

点赞数

分类专栏： echarts 文章标签： echarts环形图

本文链接：https://blog.csdn.net/Mengzy007/article/details/78053281

版权

echarts 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts.js案例一</title>
    <script type="text/javascript" src='lib/echarts/dist/echarts.js'></script>
</head>
<body>
    <div id="chart" style="width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
    // 初始化图表标签
    var myChart = echarts.init(document.getElementById('chart'));
    var placeHolderStyle = {
        normal: {
            label: {
                show: false,
                position: "center"
            },
            labelLine: {
                show: false
            },
            color: "#dedede",
            borderColor: "#dedede",
            borderWidth: 0
        },
        emphasis: {
            color: "#dedede",
            borderColor: "#dedede",
            borderWidth: 0
        }
    };
    var options = {
        backgroundColor: '#000',
        color: ['#fc7a26', 'green', '#ffa127', '#fff', "#ffcd26"],
        series: [{
            name: '值',
            type: 'pie',
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [199, 200],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'outside'
                    },
                    labelLine: {
                        show: true,
                        length: 100,
                        smooth: 0.5
                    },
                    borderWidth: 5,
                    shadowBlur: 40,
                    borderColor: "#fc7a26",
                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                }
            },
            data: [{
                value: 7,
                name: '70%'
            }, {
                value: 3,
                name: '',
                itemStyle: placeHolderStyle
            }]
        }, {
            name: '白',
            type: 'pie',
            clockWise: false,
            radius: [180, 180],
            hoverAnimation: false,
            data: [{
                value: 1
            }]
        }, {
            name: '值',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            radius: [159, 160],
            itemStyle: {
                normal: {
                    label: {
                        show: true
                    },
                    labelLine: {
                        show: true,
                        length: 100,
                        smooth: 0.5
                    },
                    borderWidth: 5,
                    shadowBlur: 40,
                    borderColor: "#ffa127",
                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                }
            },
            data: [{
                value: 6,
                name: '60%'
            }, {
                value: 4,
                name: '',
                itemStyle: placeHolderStyle
            }]
        }, {
            name: '白',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: [140, 140],
            data: [{
                value: 1
            }]
        }, {
            name: '值',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            radius: [119, 120],
            itemStyle: {
                normal: {
                    label: {
                        show: true
                    },
                    labelLine: {
                        show: true,
                        length: 100,
                        smooth: 0.5
                    },
                    borderWidth: 5,
                    shadowBlur: 40,
                    borderColor: "#ffcd26",
                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                }
            },
            data: [{
                value: 4,
                name: '40%'
            }, {
                value: 6,
                name: '',
                itemStyle: placeHolderStyle
            }]
        }, {
            type: 'pie',
            color: ['#fc7a26', '#ffa127', "#ffcd26"],
            data: [{
                value: '',
                name: '不喜欢'
            }, {
                value: '',
                name: '喜欢'
            }, {
                value: '',
                name: '跳过'
            }]
        }, {
            name: '白',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            radius: [100, 100],
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: 1,
                label: {
                    normal: {
                        formatter: '投票人数',
                        textStyle: {
                            color: '#666666',
                            fontSize: 26
                        }
                    }
                }
            }, {
                tooltip: {
                    show: false
                },
                label: {
                    normal: {
                        formatter: '\n1200',
                        textStyle: {
                            color: '#666666',
                            fontSize: 26
                        }
                    }
                }
            }]
        }]
    };
    myChart.setOption(options);
</script>
</html>