title:标题
主标题和副标题
title: {
text: '主标题',
subtext: '副标题',
top: 10,
left: 10
},
也可以多个标题
title: [ {
text:'标题1',
left:20,
show:false//是否显示标题
},
{
text:'这是一个长长的标题,可以换行\n哈哈',//标题文本,支持换行
left:20,
top:40,
textStyle:{//文本样式
color:'skyblue',
fontSize:20,
}
}],
legend
legend: {
orient: 'vertical',//图例方向
icon: 'circle',//
type:'scroll',//图例过多时可滚动,默认plain
itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度
itemGap: 15, // 设置间距
left: 'right',//图例组件离容器左侧的距离,可为像素值,百分比,center等
//top:'40%',//图例组件离容器上侧的距离,同上
bottom:'10%',//百分比或像素值,right相同
show:true,//是否显示图例
width:120,//图例组件的宽度。默认自适应。
height:200,//图例组件的高度。默认自适应。
padding: [5, 10],
formatter: function (name) {
let data = option.series[0].data
let total = 0
let tarValue
for (let i = 0; i < data.length; i++) {
total += data[i].value
if (data[i].name === name) {
tarValue = data[i].value
}
}
let v = tarValue
return name+v+'元'
},
textStyle: {
fontWeight: 400,
fontSize: 14,
color: '#606266',
},
},
或
legend: {
orient: 'vertical',
icon: 'circle',
itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度
itemGap: 15, // 设置间距
left: '45%',
textStyle: {
fontWeight: 400,
fontSize: 14,
color: '#606266',
rich: {
one: {
fontSize: 14,
fontWeight: 400,
fontFamily: 'Microsoft YaHei-Regular, Microsoft YaHei',
width: 110,
color: '#606266',
padding: [0, 0, 0, 4],
},
two: {
fontSize: 14,
fontWeight: 400,
color: '#606266',
},
},
},
},
formatter: function (name) {
let data = option.series[0].data
let total = 0
let tarValue
for (let i = 0; i < data.length; i++) {
total += data[i].value
if (data[i].name === name) {
tarValue = data[i].value
}
}
// 数量
let v = tarValue
// 百分比
let p = Math.round((tarValue / total) * 100)
return `{one|${name}} {two|${number_format(v, 0)}元}`
},
