Echarts饼图 配置、样式详解 一、图线划分，板块间隙，文字边距样式等

最新推荐文章于 2024-07-05 08:30:00 发布
最新推荐文章于 2024-07-05 08:30:00 发布
阅读量5.6k 收藏 5
点赞数 1
分类专栏： EChart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/freedomVenly/article/details/87256448
版权

在这里插入图片描述

效果图：

在这里插入图片描述

代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body{
        background: #30313F;
    }
    </style>
    <script src="js/echarts.min.js"></script>
</head>
<body>

    <div style="height:500px;">
        <div id="ec1" style="height: 98%;padding: 15px;"></div>
    </div>


    <script>
        var dom = document.getElementById("ec1");
        var myChart = echarts.init(dom);
        option1 = null;

        option1 = {
            tooltip: {
                trigger: 'item',
                formatter: " {b}：{c} "
            },
            color:['#FFFF00','#FFCC00','#CC9900','#996600','#993300','#CC6633'],    //环形颜色
            series: [

                {
                    name: '来源',
                    type: 'pie',
                    radius: ['30%', '50%'],     //饼图大小
                    labelLine: {
                        normal: {
                            length: 35,     //折线
                            length2: 150    //文字下面的线
                        }

                    },
                    label: {
                        normal: {
                            formatter: '{c|{c}}   {b|{b}}  \n\n',   //显示文字样式

                            borderWidth: 20,
                            borderRadius: 4,
                            padding: [0, -120],     //文字和图的边距，也可以通过这个调整文字和引导线位置
                            rich: {
                                // a: {
                                //     color: '#333',
                                //     fontSize: 33,
                                //     lineHeight: 20
                                // },
                                b: {			//name的样式
                                    fontSize: 20,	
                                    lineHeight: 20,
                                    color: '#CDCDD0'
                                },
                                c: {				//value的样式
                                    fontSize: 30,
                                    lineHeight: 20,
                                    color: '#fff'
                                }
                            }
                        }
                    },
                    data: [
                        {value: 11, name: '数据1'},   //value ->C  name ->B
                        {value: 15, name: '数据2'},
                        {value: 7, name: '数据3'},
                        {value: 4, name: '数据4'},
                        {value: 3, name: '数据5'},
                    ],
                    itemStyle: {        //饼图按块划分时是否需要用线隔开，  不需要注释即可
                        normal: {
                            borderWidth: 2,
                            borderColor: '#2C2D3B'
                        }
                    }
                }
            ]
        };
        if (option1 && typeof option1 === "object") {
            myChart.setOption(option1, true);
        }
    </script>
</body>
</html>
freedom_文
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts饼图各个板块之间间的空隙怎么来
AIGC大前端小王子
11-25 1万+
本文主要介绍echarts饼图各个板块之间间的空隙怎么实现 关键代码 "itemStyle": { "normal": { "borderWidth": 1, // 间距的宽度 "borderColor": '#fff', //背景色 } }, 代码层级 效果图
echarts设置饼状图的标示线以及标示文字样式
m0_53136368的博客
08-02 5387
echarts设置饼状图的标示线圆点以及标示文字样式
ECharts饼图技巧：打造断开的环形图
最新发布
No_Name_Cao_Ni_Mei的博客
07-05 500
通过上述步骤，我们可以实现一个具有断开效果的环形图。这种图表不仅可以提供传统饼图的所有功能，还可以通过断开部分扇区来吸引观众的注意力或展示更多的数据信息。
echarts饼图 饼图分隔线、图例的位置、图例的类型、图例后面带数据
热门推荐
makemoreefforts的博客
08-18 1万+
先看下实现之后的效果： 饼图的分隔线：实际上是通过给边框宽度和边框色实现的 series:[ itemStyle:{ // 间隔 borderWidth:2, borderColor:'#000' } ] 注意：上图并没有分隔线 是因为图例是环形（环形是通过给图例的color设置透明色和borderWidth实现的） 图例也使用了borderColor（会继承饼图的） 所以当饼图设置了borderCol
echarts pie饼图中间显示总数 pie饼图类型之间设置白缝隙
zhengshaofeng1的专栏
05-26 1万+
效果图 默认显示总数 鼠标悬停时显示对应的数值 let option = { title: { zlevel: 0, text: ['{name|订单数}', '{value|' + this.orderSum + '}'].join('\n'), top: '35%', left: '24%', textAlign: '
echerts饼图分割操作
m0_49014420的博客
04-22 347
echerts饼图分割操作
Echarts饼图5.0（圆弧分段有间隔）
努力的nana
06-08 861
【代码】Echarts饼图3.0（圆弧分段有间隔）
echarts饼图各个板块之间的空隙如何实现
01-22
本文主要介绍echarts饼图各个板块之间间的空隙怎么实现 关键代码 itemStyle: { normal: { borderWidth: 1, // 间距的宽度 borderColor: '#fff', //背景色 } }, 代码层级 效果图 到此这篇关于echarts饼图各个...
echarts饼图扇区添加点击事件的实例
08-29
ECharts是一款由百度开发的开源JavaScript图表库，它提供了丰富的图表类型，如柱状图、折线图、饼图等，并且支持自定义交互和动画效果。饼图是用于展示各部分占比的数据图表，每个扇区代表一个数据项，通过颜色和...
echarts饼图自动切换代码
08-28
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持在网页上动态渲染大型数据集。在这个项目中，"echarts饼图自动切换代码" 说明了作者...
Echarts渐变、饼图中间间隔的实现
云中客的博客
01-10 1938
总结一下最近在Echarts中遇到的问题并找出的解决方法。 一、Echarts渐变的写法 import echarts from 'echarts' color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FF5502' }, { ...
ECharts柱状图和饼图实现案例
10-26
使用ECharts+Java实现的完整案例，包括实现柱状图和饼图，代码完整，有数据库文件，数据库为Oracle
echarts实现透明间隙
qq_44560147的博客
06-27 2918
echarts实现透明 间隙
echarts饼图扇形之间设置间距
榴莲不好吃的专栏
12-19 3773
查看文档以及网上查找，都是将边框颜色设置成和背景色一样，但是当背景是图片的时候就不适用了，试了很多方式都不理想，没办法只能从数据上下手了，最终效果如下图，思路：将list中的数据每一条后面插入一条数据，数量根据总量计算，颜色为透明，处理如下。以上为临时解决方案，如有更好的方法，可以一起交流下。// 插入一条新的颜色透明的数据用来占位。// 计算插入的数据的值。// 原始数据和颜色。
ECharts 饼图实现自定义标签包含图标icon（圆形图标，矩形图标）
旭东怪的博客
10-22 4615
1 原始效果图 2 实现代码 <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.
Echarts可视化教程（四）——饼状图的绘制
fh8uuc的博客
10-21 4385
饼状图的核心特点是能够展示数据的比例情况，通过不同的颜色在圆中的面积大小，可以一眼看出各个数据的分布情况。嵌套圆环图有两组数据，一组是内层的数据，一组是外层的数据，外层数据是对内层数据的细化，内层的一项可以在外层对应一项或者几项。我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！之间补充代码（有两处），这段代码画出来的是一个饼状图，你补充的代码需要保证内层是一个标准饼状图，它的半径是。
echarts----带分割块的圆环图
CH-EN.的博客
08-19 2496
效果展示 组件封装 基本思路 首先我们知道，使用echarts作图，必须有个dom，作为图片显示的位置；图表显示的时候，我们可以通过grid下的一些配置来控制图表显示的位置，所以，如上图，就可以理解为是一个能显示占比的环形饼图、一个能分隔的分隔环（仪表盘）、最外圈的外圈图（当然也可以是个背景图）三部分组成。 template部分 <div class="pie"> <div :id="ID"></div> </div> da..
echarts修改分割线样式
Misnice的博客
01-28 6362
xAxis: { splitLine:{ show: ture, // 是否显示x轴分割线 interval: 'auto', // 坐标轴分隔线的显示间隔 lineStyle: { color: ['#ccc'], // 分隔线颜色。 width: 1, // 分隔线线宽 type: 'dashed', // 线的类型 opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 }
Echarts模板（一）：南丁格尔玫瑰图
Jzkuan的博客
04-28 9140
本人刚参加完市场调查大赛，在这个过程中为了画图试过很多软件，相比于Tableau的所见即所得，虽然操作简单，但步骤繁琐，最后我选择使用Echarts画图，它不仅操作简单，而且图像美观，只需要一点点代码基础就能实现。接下来，我向大家分享以下我用到的几个图的模板代码，你在使用的时候均可通过以下代码进行修改，由于本人没有学过JS，不对的地方还请大家多多指教 option = { textS...
echarts 饼图板块间隙
01-03
在echarts中，可以通过设置series中的itemStyle属性来调整饼图板块之间的间隙。具体来说，可以使用emphasis属性来设置鼠标悬停时的样式，通过设置emphasis中的emphasis.itemStyle属性来调整板块之间的间隙。 以下是一个示例代码，展示了如何设置饼图板块之间的间隙： ```javascript option = { series: [ { type: 'pie', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], itemStyle: { emphasis: { itemStyle: { borderWidth: 2, borderColor: '#fff', gap: 5 // 设置板块之间的间隙大小 } } } } ] }; ``` 通过设置emphasis.itemStyle中的gap属性，可以调整板块之间的间隙大小。在上述示例中，gap被设置为5，表示板块之间的间隙为5个像素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值