vueecharts给饼图中间添加⽂字，并且添加多个样式最近根据设计要求写了⼀个统计图，以下是设计要求，要求中间⽂字分别是总数和汉字，样式分别不同
好吧具体的解决⽅案如下
⽅案⼀
{
type:'pie',
radius: ['50%', '70%'],
center: ['50%', '40%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
color:'#4c4a4a',
formatter: '{total|' + al +'}'+ '\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|' + al +'}'+ '\n\r' + '{active|共发布活动}'
⽅案⼆
al,//主标题⽂本
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="code.jquery/jquery-1.11.0.min.js"></script>
<!-- echarts 引⼊ -->
<script src="echarts.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="main" ></div>
<script>
var myChart=echarts.ElementById('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, ',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副标题⽂本样式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, ',
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},
fontweight默认值{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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。