echarts中间有字饼图Demo2
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的更多相关文章
- echarts中间有字饼图Demo1
echarts链接:http://gallery.echartsjs.com/editor.html?c=xHy2vIPzLQ 代码: option = { backgroundColor: 'bla ...
- Echarts数据可视化series-pie饼图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- echarts画饼环状饼图相关参数配置
今天做页面的时候用到了环状饼图,大家都知道echarts的API文档看起来实在费劲,折腾了半天才画出来我想要的饼图,把我用到的参数配置分享给大家,希望能帮到和我一样的对echarts不是那么熟悉的童鞋 ...
- 知识点4: 配置echarts折线图和饼图
折线图 效果图 html <template> <div id="v11-charts3"></div> </template> j ...
- Echarts学习笔记之饼图
注:ECHarts的相关文件请到ECharts官网下载,下载地址:http://echarts.baidu.com/download.html 1.前台 <div style="ali ...
- vue echarts 给双饼图添加点击事件
在用 echarts 画旭双饼图( https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest )的时候,经常会伴随着点击事件 如果想要在 ...
- Asp.Net Core Razor页面中使用echarts展示图形
Asp.Net Core Razor页面中使用echarts展示图形 要在Razor页面中使用echarts显示图形,主要问题点在于如何将数据传递给js文件. 1,下载安装echarts库文件 首先引 ...
- 易捷框架之EChart 的使用
需要用到百度的报表控件 ,总结如下: 1,先引入开发包,以及主题包: <%@ include file="./common/echarts_header.jsp"%> ...
- 【小程序】---- 封装Echarts公共组件,遍历图表实现多个饼图
一.问题描述: 在小程序的项目中,封装公共的饼图组件,并在需要的页面引入使用.要求一个页面中有多个饼图,动态渲染不同的数据. 二.效果实现: 1. 查看——小程序使用Echarts的方式 2. 封装饼 ...
随机推荐
- Oracle函数使用
数据格式化截取: Trunc(data,[yyyy]) oracle的特有if判断: decode(sex, 0, '男', 1, '女') 分组排序:row_number() over(parti ...
- APP-9.1-百度应用-文字识别
1.创建应用-文字识别 https://console.bce.baidu.com/ai/#/ai/ocr/app/list 尽量勾选:文字识别.百度语音.图像设别.人脸识别.图像搜索 2.获取Acc ...
- datetime is not json serializable
python, datetime is not json serializable import datetime def json_serial(obj): """JS ...
- 经典论文翻译导读之《Google File System》(转)
[译者预读] GFS这三个字母无需过多修饰,<Google File System>的论文也早有译版.但是这不妨碍我们加点批注.重温经典,并结合上篇Haystack的文章,将GFS.TFS ...
- linux 一个读写锁的异常导致的故障
环境信息: WARNING: kernel version inconsistency between vmlinux and dumpfile KERNEL: vmlinux-47.90 DUMPF ...
- 【转】解决Eclipse中SVN版本信息不显示的问题
eclipse 中使用 svn 插件,原本正常,未作任何更改,最近几天突然eclipse 中查看文件时,文件后面的 版本号 . 文件的状态图标 等等都不见了.以为有插件冲突,卸载了好多其他的相关的插件 ...
- TypeScript语言学习笔记(2)
接口 // 在参数类型中定义约束 function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label ...
- App.js实现使用js开发app的应用,此文是中文文档
在阅读前,在此说明下,本人英文一直不好,所以该文档是借助翻译工具翻译的,阅读起来可能有点不好,请各位谅解,哪位大神有标准的中文文档请分享下 Github下载地址:https://github.com/ ...
- 转:HTML5页面如何在手机端浏览器调用相机、相册功能
HTML5页面如何在手机端浏览器调用相机.相册功能 开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file&q ...
- sqlalchemy 学习-- 多表操作
一对多:一对一 # one -- many class Students(Base): __tablename__ = "students" sid = Column(Intege ...