echarts链接:http://gallery.echartsjs.com/editor.html?c=xHy2vIPzLQ

完整代码:

option = {
backgroundColor: 'black',
title: {
text: '标题',
x: 'center',
textStyle: {
fontWeight: 'normal',
color: 'white',
fontSize: 18
},
},
color: ['#f69846', '#00ffb4', '#44aff0', '#f6d54a', '#45dbf7',
'#ad46f3', '#f845f1', '#ff4343', '#ffa800', '#39E7FB', '#FAC901',
], //饼图颜色 tooltip: { //弹框
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
}, legend: {
orient: 'horizontal', //horizontal横向,vertical纵向
x: 'center',
y: 'bottom',
data: ['直接访问', '邮件营销', '联盟广告'],
textStyle: {
color: 'white'
}
},
series: [{
name: '访问总数',
type: 'pie',
selectedMode: 'single',
radius: [0, '50%'], //调整中间字的大小
center: ['50%', '50%'], //调整中间字的位置
avoidLabelOverlap: false,
color: 'black', //调整中间的背景
label: {
normal: {
show: true,
position: 'center',
formatter: function(argument) {
var html;
html = 1000;
return html;
},
textStyle: {
fontSize: 50,
color: '#0FF'
}
} },
data: [{
value: 1000,
name: '总数'
}, ]
}, {
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'], //调整饼图大小
center: ['50%', '50%'], //调整饼图位置
avoidLabelOverlap: true,
label: {
normal: {
show: true, //表示文字是否显示
textStyle: {
fontSize: 18
}
},
emphasis: {
show: true
}
},
labelLine: {
show: true //表示线是否显示
},
data: [{
value: 335,
name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 234,
name: '联盟广告'
},
]
}]
};

代码:

option = {
backgroundColor: 'black',
color: ['#f69846', '#4777f5', '#00ffb4', '#44aff0', '#f6d54a', '#45dbf7',
'#ad46f3', '#f845f1', '#ff4343', '#ffa800', '#39E7FB', '#FAC901',
], //饼图颜色
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center', //中间文字居中
formatter: function(argument) {
var html;
html = '50';
return html;
},
textStyle: {
fontSize: 23,
color: '#39CCCC'
}
} },
data: [{
value: 25,
name: '政治风险'
},
{
value: 25,
name: '廉政风险'
},
{
value: 25,
name: '渎职风险'
},
{
value: 25,
name: '绩效风险'
}
]
}]
};

echarts中间有字饼图Demo2的更多相关文章

  1. echarts中间有字饼图Demo1

    echarts链接:http://gallery.echartsjs.com/editor.html?c=xHy2vIPzLQ 代码: option = { backgroundColor: 'bla ...

  2. Echarts数据可视化series-pie饼图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  3. echarts画饼环状饼图相关参数配置

    今天做页面的时候用到了环状饼图,大家都知道echarts的API文档看起来实在费劲,折腾了半天才画出来我想要的饼图,把我用到的参数配置分享给大家,希望能帮到和我一样的对echarts不是那么熟悉的童鞋 ...

  4. 知识点4: 配置echarts折线图和饼图

    折线图 效果图 html <template> <div id="v11-charts3"></div> </template> j ...

  5. Echarts学习笔记之饼图

    注:ECHarts的相关文件请到ECharts官网下载,下载地址:http://echarts.baidu.com/download.html 1.前台 <div style="ali ...

  6. vue echarts 给双饼图添加点击事件

    在用 echarts 画旭双饼图( https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest )的时候,经常会伴随着点击事件 如果想要在 ...

  7. Asp.Net Core Razor页面中使用echarts展示图形

    Asp.Net Core Razor页面中使用echarts展示图形 要在Razor页面中使用echarts显示图形,主要问题点在于如何将数据传递给js文件. 1,下载安装echarts库文件 首先引 ...

  8. 易捷框架之EChart 的使用

    需要用到百度的报表控件 ,总结如下: 1,先引入开发包,以及主题包: <%@ include file="./common/echarts_header.jsp"%> ...

  9. 【小程序】---- 封装Echarts公共组件,遍历图表实现多个饼图

    一.问题描述: 在小程序的项目中,封装公共的饼图组件,并在需要的页面引入使用.要求一个页面中有多个饼图,动态渲染不同的数据. 二.效果实现: 1. 查看——小程序使用Echarts的方式 2. 封装饼 ...

随机推荐

  1. elasticsearch-java

    elastissearch的JAVA客户端 官网  java api文档  https://www.elastic.co/guide/en/elasticsearch/client/java-api/ ...

  2. 2 算法查找&排序问题

    一.查找 1.查找的概念: 2 顺序查找(linear search) 从头找到尾 def linear_search(li,val): for ind ,v in enumerate(li): if ...

  3. using关键字在C#中的3种用法

    using 关键字有两个主要用途:  (一).作为指令,用于为命名空间创建别名或导入其他命名空间中定义的类型.  (二).作为语句,用于定义一个范围,在此范围的末尾将释放对象. (一).作为指令 1. ...

  4. hadoop-1

    结合其他文章 http://weixiaolu.iteye.com/blog/1504898 https://www.cnblogs.com/dycg/p/3934394.html https://b ...

  5. oracle中去掉回车换行空格的方法详解

    函数: 1.translate语法:TRANSLATE(char, from, to)用法:返回将出现在from中的每个字符替换为to中的相应字符以后的字符串.            若from比to ...

  6. Linux 中的定时处理 cron服务

    cron服务 在LINUX中,周期执行的任务一般由cron这个守护进程来处理 当安装完操作系统后默认会安装此服务工具并且会自动启动crond,该进程会每分钟定期检查是否有要执行的任务,若有则执行. c ...

  7. U盘无法访问

    U盘无法访问 方法/步骤   首先,Win+R,打开“运行”窗口.   在打开的运行窗口中,输入cmd回车     这时会打开这样的一个窗口   这时输入chkdsk g: /f 需要说明的是,g这个 ...

  8. 转: JQuery this和$(this)的区别及获取$(this)子元素对象的方法

    1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的  $()  这 ...

  9. [Shell]Bash基本功能:多命令顺序执行与管道符

    /*----------------------------------------------------------------------------------------------- @黑 ...

  10. C# windows服务:创建Windows服务(Windows Services)的一般步骤

    C#创建Windows服务(Windows Services) Windows服务在Visual Studio 以前的版本中叫NT服务,在VS.net启用了新的名称.用Visual C# 创建Wind ...