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. 封装饼 ...
随机推荐
- java web项目使用IDEA打成war包
步骤: 1.点击 File -->Project Structure...如下图: 2.出现如下界面后点击 Artifacts--> 绿色加号-->Web Application:A ...
- vue 踩坑-事件修饰符
(1).stop // 阻止事件继续传播 即阻止冒泡过程 (2).prevent //阻止默认事件发生 即event.preventdefault(): 实例: 阻止了a标签的默认刷新 (3).cap ...
- 跨域(一)——CORS机制
Ajax是严格遵守同源策略的,既不能从另一个域读取数据,也不能发送数据到另一个域.但是,W3C的新标准中CORS(Cross Origin Resource Sharing)推进浏览器支持这样的跨域方 ...
- Ftp命令使用
FTP> ? 显示 ftp 命令说明.? 与 help 相同. 格式:? [command] 说明:[command] 指定需要帮助的命令名称.如果没有指定 command,ftp将显示全部命 ...
- unity 获取网络时间
http://cgi.im.qq.com/cgi-bin/cgi_svrtime public int year, mouth, day, hour, min, sec; public string ...
- unity 向量赋值 传引用?传值?
unity中,Vector2.Vector3之间的任意赋值都是传值 Vector2 v1; ,); v1=v2; v2.x=; Debug.Log(v1);//output: (2.0, 2.0) D ...
- 【357】sorted 函数高级用法
参考:Python 内置函数sorted()在高级用法 - Brad1994 - 博客园 sorted 函数主要实现的就是对于可迭代对象进行排序,对于一维数据排序很好理解与实现,直接调用即可,本文主要 ...
- Linux find命令使用方法
Linux中find命令用来在指定目录下查找文件.通过组合不同参数可以在linux系统中快速查找需要的文件或目录. find命令语法 格式:find pathname -options [ -pr ...
- Android Bug:Error:com.android.dex.DexException: Multiple dex files define Landroid/support/design/widget/CoordinatorLayout$LayoutParams;
项目编译通过,运行时出现异常: Error:com.android.dex.DexException: Multiple dex files define Landroid/support/desig ...
- Spring格式化注解
Spring Framework 3.0发布了.这里我们介绍其中的一个:用于格式化的注解.简介 Spring 3 提供了两个可以用于格式化数字.日期和时间的注解@NumberFormat和@DateT ...