图例组件里,这么在测试1-测试7后台添加类似于副标题的内容,字体和前面字体不一样的
配置项如下
var option = {
title: { //标题组件
text: '总成交额',
//left:'50px',//标题的位置 默认是left,其余还有center、right属性
subtext: '2000000.00',
x: '16%',
y: 'center',
textStyle: {
color: "#436EEE",
fontSize: 17,
}
},
tooltip: { //提示框组件
trigger: 'item', //触发类型(饼状图片就是用这个)
formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
},
color: ['#854AE0', '#F22142', '#FACC33', '#5DC35B', '#1F8FFB', '#54C3C2', '#FD40FF'], //手动设置每个图例的颜色
legend: { //图例组件
//right:100, //图例组件离右边的距离
orient: 'horizontal', //布局 纵向布局 图例标记居文字的左边 vertical则反之
width: 40, //图行例组件的宽度,默认自适应
x: 400, //图例显示在右边
y: 'center', //图例在垂直方向上面显示居中
itemWidth: 10, //图例标记的图形宽度
itemHeight: 10, //图例标记的图形高度
data: ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7'],
textStyle: { //图例文字的样式
color: '#333', //文字颜色
fontSize: 18 //文字大小
}
},
series: [ //系列列表
{
name: '销售数据分析', //系列名称
type: 'pie', //类型 pie表示饼图
center: ['20%', '50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
radius: ['40%', '50%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
itemStyle: { //图形样式
normal: { //normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
label: { //饼图图形上的文本标签
show: false, //平常不显示
},
labelLine: { //标签的视觉引导线样式
show: false //平常不显示
}
},
/*emphasis : { //normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
label : { //饼图图形上的文本标签
show : true,
position : 'center',
textStyle : {
fontSize : '12',
fontWeight : 'bold',
color: '#333',
}
}
}*/
},
data: [{
value: 80,
name: '测试1'
},
{
value: 10,
name: '测试2'
},
{
value: 30,
name: '测试3'
},
{
value: 20,
name: '测试4'
},
{
value: 25,
name: '测试5'
},
{
value: 25,
name: '测试6'
},
{
value: 25,
name: '测试5'
},
]
}
]
};