echarts副标题富⽂本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>副标题富⽂本标签</title>
</head>
<body>
<!--为 ECharts 准备⼀个具备⼤⼩（宽⾼）的DOM-->
<div id="main" ></div>
<script src="cdn.bootcdn/ajax/libs/echarts/4.8.0/echarts-enmon.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.ElementById('main'));
// 指定图表的配置项和数据
var option ={
title:{
text:'ECharts ⼊门⽰例',
show :true,
subtext:'{a|ni hao}{b|fu biao ti} ',textstyle
//  right:'right',
/
/  top:'top',
//  textStyle:{
//      fontSize:30,
//      fontWidth:'bold'
//  },
subtextStyle:{
color:'red',
// padding:10,
rich:{//副标题富⽂本标签
a:{
// width:150,  //设置⽂字宽度，⼀般不需要
padding:[10,40],//设置内边距，使⽂字看着像在中间
// height:150,//设置⽂字⾼度，⼀般不需要，不设置⾏⾼，⽂字也在中间
fontSize:30,
backgroundColor:'#rrr',
borderRadius:50,
fontWeight:'bold'
},
b:{
fontSize:10,
padding:[10,40],
borderRadius:50,
backgroundColor:'blue',
fontWeight:400
}
}
},
//    subtextStyle: {
//            label: {
//                normal:{
//    // 在⽂本中，可以对部分⽂本采⽤ rich 中定义样式。
//    // 在⽂本中，可以对部分⽂本采⽤ rich 中定义样式。
//    // 这⾥需要在⽂本中使⽤标记符号：
/
/    // `{styleName|text content text content}` 标记样式名。
//    // 注意，换⾏仍是使⽤ '\n'。
//    formatter: [
//        `{a|ni hao}`,
//        `{b|}这段⽤默认样式{x|这段⽤样式x}`
//    ].join('\n'),
//    rich: {
//        a: {
//            color: 'red',
//            lineHeight: 10
//        },
/
/        b: {
//            backgroundColor: 'red',
//            height: 40
//        },
//        x: {
//            fontSize: 18,
//            fontFamily: 'Microsoft YaHei',
//            borderColor: '#449933',
//            borderRadius: 4
//        }
//    }
/
/    }
// }
//    }
},
tooltip:{},
legend:{
data:['销量']
},
xAxis:{
data:["衬衫","⽺⽑衫","雪纺衫","裤⼦","⾼跟鞋","袜⼦"] },
yAxis:{},
series:[{
name:'销量',
type:'bar',
data:[5,20,36,10,10,20]
},
]
}
// 使⽤刚指定的配置项和数据显⽰图表。
myChart.setOption(option);
</script>
</body>
</html>

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