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. VB-串口通信详解

    转载:https://blog.csdn.net/dongyue786/article/details/8177047 MSComm 控件通过串行端口传输和接收数据,为应用程序提供串行通讯功能.MSC ...

  2. html 自定义属性的获取和应用

    在html 中,我们可以给元素设置自定义属性,格式:  data-属性="属性值",可以设置一个,也可以设置多个 1.获取元素属性的常规方法:直接获取元素,然后使用getAttri ...

  3. cxVerticalGrid赋值是实时更新

    procedure TForm1.cxVerticalGrid1Edited(Sender: TObject; ARowProperties: TcxCustomEditorRowProperties ...

  4. 运行vue项目--安装vue脚手架vue cli

    第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...

  5. 【原创】思科和锐捷组建多VLAN交换网络(隧道模式Trunk)

    组建简单交换网络设计与实施 [利用思科仿真与锐捷实践] 本文目录 第一部分 预备知识 第二部分 设计与仿真 需求分析 整体设计 PT仿真 第三部分 施工部署 console配置 连通测试 第一部分 预 ...

  6. web前端基础知识!

    [HTML文档的基本结构和语法][基本结构]: <HTML> HTML 文件开始 <HEAD> HTML 文件的头部开始 <title> 网页的标题</tit ...

  7. python批量操作Linux服务器脚本,ssh密码登录(执行命令、上传、下载)(一)

     -*-          paramiko.util.log_to_file(         ssh = paramiko.SSHClient()          ssh.set_missing ...

  8. C++之 模板Template的使用

    转自https://www.cnblogs.com/cynchanpin/p/7127897.html 1.在c++Template中非常多地方都用到了typename与class这两个关键字,并且好 ...

  9. C#中让WebBrowser运行Javascript脚本

    C#中可以让Webbrowser运行Javascript脚本来实现各种自动化操作,比如点击网页上的按钮,输入用户名密码等等.代码也很简单: >>>>>>>&g ...

  10. Numpy知识(二)

    ndarray的简单数学计算就和普通的a+b,a-b,a*b,a/b等类似. 关于ndarray的切片: arr[n]:寻找第n个元素(针对一维)arr[n:m]:从下标为n元素开始,截取到下标为m- ...