EChart创建圆形空心圈饼图

空城.依旧

已于 2023-10-29 08:27:40 修改

阅读量2.2k

点赞数

分类专栏： echarts 文章标签：饼图 echarts

于 2019-04-29 08:42:20 首次发布

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原文地址：EChart创建圆形空心圈饼图 - 人人编程网

关于EChart的使用就不再赘述，直接上代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>ECharts3 学习</title>

<script src="../../public/js/echarts3/echarts.js"></script>

</head>

<body>

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({

tooltip: {

trigger: 'item',

formatter: "{a} <br/>{b}: {c} ({d}%)"

},

legend: {

orient: 'vertical',

x: 'left',

data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

},

series: [

{

name:'访问来源',

type:'pie',

radius: ['50%', '70%'],

avoidLabelOverlap: false,

label: {

normal: {

show: false,

position: 'center'

},

emphasis: {

show: true,

textStyle: {

fontSize: '30',

fontWeight: 'bold'

}

},

labelLine: {

normal: {

show: true

}

},

data:[

{value:335, name:'直接访问'},

{value:310, name:'邮件营销'},

{value:234, name:'联盟广告'},

{value:135, name:'视频广告'},

{value:1548, name:'搜索引擎'}

]

}

]

});

</script>

</body>

</html>

效果如下图：

EChart创建圆形空心圈饼图

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

空城.依旧

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
EChart创建圆形空心圈饼图

本文将使用 EChart 创建圆形空心圈饼图。
复制链接

扫一扫

专栏目录

echarts 饼图空心圆点击时中间跟边框都出现数据

clearlove7_2018的博客

05-13

802

先看效果 var myChart = echarts.init(document.getElementById("originEchars")); var option; option = { tooltip: { show: false, trigger: 'item' }, legend: { b...

第二节Echarts空心饼图

zjltianxin的博客

11-02

471

效果图。

1 条评论您还未登录，请先登录后发表或查看评论

封装通用 ECharts 图表组件（三）：环形图实现

最新发布

m0_54340021的博客

05-28

805

本文详细介绍了封装ECharts环形图组件的步骤和优势。环形图作为一种展示占比关系的有效图表，具有视觉上的吸引力。封装组件不仅可以提高代码复用率，简化维护工作，还能增强组件的灵活性。文章通过实例代码，展示了从引入依赖、创建Vue组件、定义数据、配置计算属性到样式定义的完整流程。计算属性pieOption是核心，它负责生成图表的颜色、网格、提示框和系列等配置。最终，封装后的组件能够在Vue项目中轻松复用，提升开发和维护效率。希望本文能帮助读者深入理解并实现自定义的ECharts组件。

echarts画一个简单的饼图中间是空的环有两种颜色一种是底色一种是百分比的颜色

qq_27806371的博客

08-24

591

【代码】echarts画一个简单的饼图中间是空的环有两种颜色一种是底色一种是百分比的颜色。

echarts的legend展示为空心圆

xzy__007的博客

12-07

287

复制代码去Echarts的示例里粘贴进去即可看到效果效果图 option = { title: { text: 'Stacked Line' }, tooltip: { trigger: 'axis' }, legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Se...

ECharts实现折现图的拐点为空心圆圈

笋笋的博客

10-25

8335

echart的折线图的拐点实现空心圆

使用vue+echart完成百分比图，空心饼图

来了波，兄嘚

09-10

3287

使用echart完成百分比图效果图：上代码：安装依赖： npm install echarts --save import echarts from “echarts”; <template> <div> <div id="demo"></div> </div> </template> <script> export default { data() { return { op

PHP中使用GD库创建圆形饼图的例子

10-25

本例中，我们将探讨如何使用GD库在PHP中创建一个圆形饼图，也就是扇形统计图。首先，创建画布是创建任何图像的第一步。在PHP中，`imagecreatetruecolor()`函数用于在内存中创建一个新的真彩色图像，它接受两个参数...

echarts 3d饼图资源

05-12

它提供了丰富的图表类型，包括柱状图、折线图、饼图等，并且支持交互功能和多种自定义选项，使得开发者能够创建出美观且功能强大的数据展示效果。在本资源中，重点是 ECharts 的 3D 饼图。 3D 饼图是 ECharts 提供...

echarts饼图各个板块之间的空隙如何实现

01-22

本文主要介绍echarts饼图各个板块之间间的空隙怎么实现关键代码 itemStyle: { normal: { borderWidth: 1, // 间距的宽度 borderColor: '#fff', //背景色 } }, 代码层级效果图到此这篇关于echarts饼图各个...

QT QChart QPieSeries 空心饼图中显示文字

09-13

通过以上步骤，我们就能够在QT应用中创建一个空心饼图，并在其中心显示当前选中切片的百分比。这在数据可视化的场景中非常有用，能直观地向用户展示数据的比例关系。在实际开发中，可以结合信号和槽机制，动态更新...

EChart相关demo，饼图，粒子效果.rar

08-04

【echarts 饼图引导线末端新增圆点】

qq_27574717的博客

07-13

1201

echarts 引导线末端圆点样式

Echarts中间空心饼状图

weixin_40295491的博客

11-29

6837

Echarts中间空心饼状图记录下写Echarts留下的记录，都是直接照搬的Echarts官网上的素材官网：https://www.echartsjs.com/examples/zh/index.html <template> <div id="zdry-chart"></div> </template> <script> ...

vue echarts 镂空饼图配置

paidaboluo的博客

08-31

1258

vue echarts 镂空饼图配置

echarts_饼状图-空心

qq_38260470的博客

04-07

210

【代码】echarts_饼状图-空心。

echarts 饼图引导线尾部画圆入坑

vue中实现在线预览word文档

05-27

1598

看网上的例子，改了下，得知只有用formatter才能画圆，然后通过padding改变位置，然后并没调整好，最后设置lineHeight调整好了，还有圆设置的背景颜色要和item一样，所以不能写死，要用for循环来设置data的label，按索引设置颜色 const color = [ { colorStops: [ { color: '#9874FF', offset: 0 }, { color: '#6053F5', offset: 1 } .

echarts 饼图中间画圈＋文字

山东理工1134

04-02

4135

echarts

echart画一个饼图

03-31

抱歉，作为AI语言模型，我没有可视化功能。但我可以提供以下代码供您参考： ``` // 引入 ECharts 主模块 var echarts = require('echarts'); // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('myChart')); // 配置项 var option = { title: { text: '饼图', subtext: '示例', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['数据1', '数据2', '数据3', '数据4', '数据5'] }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 335, name: '数据1'}, {value: 310, name: '数据2'}, {value: 234, name: '数据3'}, {value: 135, name: '数据4'}, {value: 1548, name: '数据5'} ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ```

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交