1.Echarts饼状图中间自定义显示内容(文字、图片)
实现这种效果主要是通过graphic中的对象属性type和style实现,type设置为‘text’,则style中可以设置文字内容,type设置为‘image’,则style中可以设置图片内容,以下是完整代码:
(1)创建div标签
<div id="box"></div>
(2)定义option
方案一:
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: ['第一部分','第二部分','第三部分','第四部分']
},
series : [],
};
方案二:
在formatter里写内容,rich里面写你需要的样式。
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:dataList
}
]
方案三:
var option = {
tooltip: {
show: false //隐藏鼠标悬浮提示文字
//trigger: 'item'
},
color: ['#61C4E6', '#F9F9F9'],
graphic: [
{ //设置饼状图内部文字
type: 'text',
left: 'center', //设置偏移量
top: 180,
z: 2,
zlevel: 100,
style: {
text: 文字内容,
x: 100,
y: 100,
textAlign: 'center',
fill: '#89D4ED',
width: 200,
height: 200,
textFont: 'bold 20px verdana'
}
},
{ //设置饼状图内部图片
type: 'image',
left: 100,
top: 208,
z: 2,
zlevel: 100,
style: {
image: 图片的url,
x: 100,
y: 100,
textAlign: 'center',
fill: '#ABAEB6',
width: 20,
height: 20,
textFont: 'bold 20px verdana',
color: 'red'
}
},
]
};
(3)渲染Echarts
var chart = echarts.init(document.getElementById('box')
chart.setOption(option)
2.Echarts横坐标底部显示的文字太长导致显示不全
我们可以将文字倾斜显示,设置interval属性将横轴信息全部显示
grid: { // 控制图的大小,调整下面这些值就可以,
x: 40,
x2: 100,
y2: 150 // y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
},
xAxis: [
{
name: "",
type: 'category',
data: accoutTypeName,
axisLabel:{
interval:0,//横轴信息全部显示
rotate:-30 //-30度角倾斜显示
}
}
],