EChart 学习笔记三：饼图以及环形图

最新推荐文章于 2024-04-22 15:36:45 发布

前端菜鸟来报道

最新推荐文章于 2024-04-22 15:36:45 发布

阅读量698

点赞数

分类专栏： EChart 文章标签：前端

本文链接：https://blog.csdn.net/WQearl/article/details/106628561

版权

EChart 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

饼图不像是柱状图，饼图不需要X、Y轴的数据，这个只是一维数据。直接上效果图：

具体代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>饼图以及环形图示例</title>
    <!-- 引入 echarts.js -->
    <script src="../EChart/echarts.js"></script>
</head>

<body>
    <div id="PieChart" style="width: 600px;height:400px;"></div>
    <div id="CircleChart" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        var PieCharts = echarts.init(document.getElementById('PieChart'));
        PieCharts.setOption({
            series: [
                {
                    name: '访问来源',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data: [          // 数据数组，name 为数据项名称，value 为数据项值
                        { value: 235, name: '视频广告' },
                        { value: 274, name: '联盟广告' },
                        { value: 310, name: '邮件营销' },
                        { value: 335, name: '直接访问' },
                        { value: 400, name: '搜索引擎' }
                    ]
                }
            ]
        })




        var CircleCharts = echarts.init(document.getElementById('CircleChart'));
        CircleCharts.setOption({
            title: {
                text: "环形图",
                right: '45%'

            },
            legend: {
                x: '80%',
                y: '10px',
                orient: 'Vertical', //图例列表的布局朝向。
                data: ['视频广告', '联盟广告', '邮件营销', '直接访问', '搜索引擎']   //是一个数组对象
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [
                {
                    color: ['#7A8B8B', '#B4CDCD', '#68838B', '#4A708B', '#00688B', '#8B008B', 'CDB5CD', '#FFE1FF', '#8968CD', '#CD96CD',
                        '#CD00CD', '#FF82AB', '#CD8C95', '#8B0A50', '#8B0000', '#CDC9A5', '#8B8970', '#FFDEAD', '#CDAF95', '#DA70D6', '#FF7F50', '#7CCD7C',
                        '#F4A460', '#6B8E23', '#006400', '#4682B4', '#000000', '#FFF5EE', '#CAFF70', '#DDA0DD'],

                    name: "环形图",
                    type: 'pie',
                    radius: ['50%', '70%'],  //饼图的半径，第一个为内半径，第二个为外半径
                    label: {
                        //不显示提示信息
                        normal: {
                            show: false,
                            position: 'center'//提示文字显示在中间
                        },

                        //高亮的样式
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20'
                            }
                        }
                    },
                    data: [        //数据Data是一个数组对象
                        { value: 235, name: '视频广告' },
                        { value: 274, name: '联盟广告' },
                        { value: 310, name: '邮件营销' },
                        { value: 335, name: '直接访问' },
                        { value: 400, name: '搜索引擎' }
                    ]
                }
            ]
        })
    </script>
</body>

</html>

高亮样式：

// 高亮样式。
emphasis: {
    itemStyle: {
        // 高亮时点的颜色
        color: 'red'
    },
    label: {
        show: true,
        // 高亮时标签的文字
        formatter: '高亮时显示的标签内容'
    }
},

此篇文章涉及原文：

https://www.runoob.com/echarts/echarts-pie.html

https://blog.csdn.net/qq_35713752/article/details/93493220

前端菜鸟来报道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EChart 学习笔记三：饼图以及环形图

饼图不像是柱状图，饼图不需要X、Y轴的数据，这个只是一维数据。直接上效果图：具体代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>饼图以及环形图示例</title>  &l...
复制链接

扫一扫