06饼图2-echarts

StudiousTiger

已于 2023-06-12 07:32:16 修改

阅读量115

点赞数

分类专栏： Tiger の echarts 文章标签： javascript css html html5 css3

于 2020-08-07 10:49:42 首次发布

本文链接：https://blog.csdn.net/m0_45067620/article/details/107857447

版权

Tiger の echarts 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./JS_tools/echarts.js"></script>
</head>
<style>
    .chart {
        width: 600px;
        height: 450px;
        background-color: rgb(134, 134, 134);
        margin: 30px auto;
    }
</style>

<body>
    <div class="chart" id="chart"></div>
    <script>
        (function () {
            var myChart = echarts.init(document.getElementById("chart"));
            var option = {
                //   color: [
                //     "#006cff",
                //     "#60cda0",
                //     "#ed8884",
                //     "#ff9f7f",
                //     "#0096ff",
                //     "#9fe6b8"
                //   ],
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    bottom: "0%",
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        color: "rgba(255,255,255,.5)",
                        fontSize: "12"
                    }
                },
                series: [
                    {
                        name: "地区分布",
                        type: "pie",
                        // 这个radius可以修改饼形图的大小
                        // radius 第一个值是内圆的半径 第二个值是外圆的半径
                        radius: ["10%", "70%"],
                        center: ["50%", "50%"],
                        roseType: "radius",
                        // 图形的文字标签
                        label: {
                            fontSize: 10
                        },
                        // 链接图形和文字的线条
                        labelLine: {
                            // length 链接图形的线条
                            length: 6,
                            // length2 链接文字的线条
                            length2: 8
                        },
                        data: [
                            { value: 20, name: "云南" },
                            { value: 26, name: "北京" },
                            { value: 24, name: "山东" },
                            { value: 25, name: "河北" },
                            { value: 20, name: "江苏" },
                            { value: 25, name: "浙江" }
                        ]
                    }
                ]
            };
            myChart.setOption(option);
            // echarts的点击事件的回调函数
            myChart.on('click', (params) => {
                console.log(params)
            });
            // 监听浏览器缩放，图表对象调用缩放resize函数
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        })();
    </script>
</body>

</html>

效果图：
在这里插入图片描述

StudiousTiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06饼图2-echarts

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./JS_tools/echarts.js"&
复制链接

扫一扫

专栏目录