vue echarts 给饼图中间添加文字 ，并且添加多个样式
最近根据设计要求写了一个统计图，以下是设计要求，要求中间文字分别是总数和汉字，样式分别不同
好吧具体的解决方案如下
方案一
series: [
{
type:'pie',
radius: ['50%', '70%'],
center: ['50%', '40%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
color:'#4c4a4a',
formatter: '{total|' + this.total +'}'+ '\n\r' + '{active|共发布活动}',
rich: {
total:{
fontSize: 35,
fontFamily : "微软雅黑",
color:'#454c5c'
},
active: {
fontFamily : "微软雅黑",
fontSize: 16,
color:'#6c7a89',
lineHeight:30,
},
}
},
emphasis: {//中间文字显示
show: true,
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: true
},
tooltip: {
show: false
}
},
data:this.pieDataList2
}
]
只要在formatter里这样写就可以啦，rich里面写你需要的样式即可
formatter: '{total|' + this.total +'}'+ '\n\r' + '{active|共发布活动}'
方案二
title: {
text:this.total,//主标题文本
subtext:'共发布活动',//副标题文本
left:'center',
top:'32%',
textStyle:{
fontSize: 38,
color:'#454c5c',
align:'center'
},
subtextStyle:{
fontFamily : "微软雅黑",
fontSize: 16,
color:'#6c7a89',
}
},
如下就是title的配置了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- jquery cdn引入 -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- echarts 引入 -->
<script src="echarts.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="main" style="width:500px;height:500px;"></div> <script>
var myChart=echarts.init(document.getElementById('main'));
//init初始化接口，返回ECharts实例，其中dom为图表所在节点 var option = {
//标题
title : {
show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
text: '主标题',//主标题文本，'\n'指定换行
link:'',//主标题文本超链接,默认值true
target: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
subtext: '副标题',//副标题文本，'\n'指定换行
sublink: '',//副标题文本超链接
subtarget: null,//指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
x:'center'//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
y: 'top',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
textAlign: null,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)',//标题背景颜色，默认'rgba(0,0,0,0)'透明
borderColor: '#ccc',//标题边框颜色,默认'#ccc'
borderWidth: 0,//标题边框线宽，单位px，默认为0（无边框）
padding: 5,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
itemGap: 10,//主副标题纵向间隔，单位px，默认为10
textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副标题文本样式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
z: 6,//二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
}, //提示框，鼠标悬浮交互时的信息提示
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
//图例，每个图表最多仅有一个图例
legend: {
orient: 'vertical',
left: 'left',
data: ['第一部分','第二部分','第三部分','第四部分']
},
// 系列列表,每个系列通过 type 决定自己的图表类型
series : [
{
name: '访问',
type: 'pie',
radius : '62%',
center: ['50%', '65%'],/
minAngle:'15',
data:[
{name:"第一部分",value:4},
{name:"第二部分",value:7},
{name:"第三部分",value:3},
{name:"第四部分",value:1},
],
itemStyle: {
normal:{
label:{
show:true,
formatter: "{b} :\n {c} \n ({d}%)",
position:"inner"
}
}
}
}
],
};
myChart.setOption(option);// 为echarts对象加载数据
</script>
</body>
</html>
vue echarts 给饼图中间添加文字 ，并且添加多个样式的更多相关文章
- Image合并添加文字内容
场景:将一个头像.二维码.文字信息添加到一张背景图片中,将这些信息合成一张图片. 代码已经测试验证.代码中图片自己随意找几张测试即可. 代码: import com.sun.image.codec.j ...
- Android GIS开发系列-- 入门季（6）GraphicsLayer添加文字与图片标签
一.GraphicsLayer添加图片 GraphicLayer添加图片Graphic,要用到PictureMarkerSymbol,也是样式的一种.添加代码如下: Drawable drawable ...
- chart.js图表库案例赏析，饼图添加文字
chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...
- Echarts学习记录——如何给x轴文字标签添加事件
Echarts学习记录——如何给x轴文字标签添加事件 关键属性 axisLabel下属性clickable:true 并给图表添加单击事件 根据返回值判断点击的是哪里 感觉自己的方法有点变扭,有更好办 ...
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
- Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo
前言 前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt. 本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口. Demo演示 ...
- three.js添加文字
添加文字需要用到fontLoader,测试貌似只能异步.在success中回调. 对于中文字体,需要将ttf格式转换为json格式或者是js格式之后才能使用,不过一般转换之后的文件比较大.建议使用Fo ...
- C#使用 DirectX SDK 9做视频播放器 并在视频画线添加文字 VMR9
视频图像处理系列 索引 VS2013下测试通过. 在百度中搜索关键字“DirectX SDk”,或者进入微软官网https://www.microsoft.com/en-us/download/det ...
- 如何在IamgeButton上面添加文字
如何在IamgeButton上面添加文字? 首先要知道,IamgeButton是不可以直接添加文字的.所以我们需要间接制作一个Button按钮 我的代码将会展示另外一个例子,与本文中的代码相似. 本文 ...
随机推荐
- PHP面试 PHP基础知识 三（运算符）
PHP运算符 PHP的运算符的错误控制符@ PHP支持一个错误运算符:@.当将其放在一个PHP表达式之前,该表达式可能产生的任何错误信息都将会被忽略掉. PHP运算符 运算符的优先级 着重记忆运算符 ...
- Vue 学习笔记之 —— 表单输入绑定
Vue 中文文档 https://cn.vuejs.org/ 不多说,直接上干货. v-model 指定,用来在input textarea 等表单元素上创建双向数据绑定,负责监听用户的输入事件,以及 ...
- 在VMware软件下创建CentOs虚拟机
1.创建新的虚拟机. 打开VMware软件,点击主页内创建新的虚拟机 2.进入新建虚拟机向导 点击典型,点击下一步 3.在下一步中单击稍后安装操作系统 点击下一步 4.选择操作系统类型 因为CentO ...
- [已解决]报错This event loop is already running
安装nest_asyncio pip install nest_asyncio 导入并调用 import nest_asyncio nest_asyncio.apply()
- python调用tushare获取股票日线实时行情数据
接口:daily 数据说明:交易日每天15点-16点之间.本接口是未复权行情,停牌期间不提供数据. 调取说明:基础积分每分钟内最多调取200次,每次4000条数据,相当于超过18年历史,具体请参阅本文 ...
- 37-Ubuntu-用户管理-02-查看用户信息
查看用户信息 序号 命令 作用 01 id 用户名 查看用户UID和GID信息 02 cat -n /etc/passwd 查看用户详细信息,参数-n显示行号 03 cat -n /etc/group ...
- pip3 常用操作
清华大学pip镜像 https://mirrors.tuna.tsinghua.edu.cn/help/pypi/ # 设置为默认 pip install pip -U pip config set ...
- leetcood学习笔记-67-二进制求和
题目描述: 第一次提交: class Solution: def addBinary(self, a: str, b: str) -> str: list_a,list_b=[],[] for ...
- Servlet - HTTP协议相关
1. 术语 : 请求 : 客户端根据用户所给的地址信息将数据发送给服务器的过程 响应 : 服务器将请求的处理结果发送给浏览器的过程 2. HTTP协议 : 超文本传输协议 ( Hyper Text T ...
- sublime快捷键汇总
Sublime Text 3 快捷键精华版 Ctrl+Shift+P:打开命令面板Ctrl+P:搜索项目中的文件Ctrl+G:跳转到第几行Ctrl+W:关闭当前打开文件Ctrl+Shift+W:关闭所 ...