Echarts.js 主标题与副标题在同一行，这个功能现在的API还不支持，但是我们可以使用另外一个API来实现此效果。
先看图片:
我是用的是textStyle中的rich配置，/zh/option.html#title.textStyle.rich 这是官方的文档。
下面这是我写的代码，你可以参考一下：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><!-- <script src="echarts.js"></script> --><!-- <script src="/npm/echarts@5.2.2/dist/echarts.min.js"></script> --><script src="js/echarts.min.js"></script><!-- <script type="text/javascript" src="/gallery/vendors/echarts/echarts-all-3.js"></script> --></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="titleDiv" style="width: 500px;height:500px;"></div><!-- <div id="main" style="width: 600px;height:400px;"></div> --><script type="text/javascript">let titleChart = echarts.init(document.getElementById("titleDiv"));let titleOption = {title: {text: "{icon|▶} {text|标题1} {text2|标题2}",left: 70,textStyle: {rich: {text: {width: 20,height: 20,fontSize: 25,fontweight: "30",// backgroundColor: {//// image: require('/img/1.png')//// image: '/img/title_icon.png'// }},icon: {width: 20,height: 20,fontSize: 20,color: "rgb(60,93,140)",// backgroundColor: {//// image: require('/img/1.png')//// image: '/img/title_icon.png'// }},text2: {width: 20,height: 20,fontSize: 20,color: "rgb(60,93,140)",fontweight: "30",// backgroundColor: {//// image: require('/img/1.png')//// image: '/img/title_icon.png'// }}}}},// title: {//text: "频段图"// },// legend: {//data: ['GHz'],// },radar: {indicator: [{name: "2.4GHz频段",max: 100,color: "#000"}, {name: "400M频段",max: 100,color: "#000"}, {name: "5.8GHZ频段",max: 100,color: "#000"}, {name: "其他频段",max: 100,color: "#000"}, {name: "900M频段",max: 100,color: "#000"}, ],splitArea: {areaStyle: {color: ['rgba(1,1,1,0)', 'rgba(29,112,174,.3)', 'rgba(1,1,1,0)'],shadowColor: 'rgba(0, 0, 0, 0.2)',shadowBlur: 10}},splitLine: {lineStyle: {color: "rgb(109,183,221)",width: 2,}},splitNumber: 3, //3个分割线axisLine: {lineStyle: {color: "rgb(109,183,221)",}},},series: [{// name: "频段图",type: "radar",animation: false,data: [{value: [95, 69, 100, 35, 85],itemStyle: {normal: {color: "rgb(101,201,209)"}},// areaStyle: {//color: "rgba(122,200,216,0.9)"// },areaStyle: {color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [{color: 'rgba(122,200,216, 0.1)',offset: 0}, {color: 'rgba(122,200,216, 0.9)',offset: 1}])},lineStyle: {color: "rgba(147,207,220,0)"},}],}]}titleChart.setOption(titleOption);// setTimeout(() => {//document.getElementById("img").src = myChart.getDataURL();// }, 2000)</script></body></html>
Echarts.js 主标题与副标题在同一行 主标题前后加图片 icon 标题的文字样式不一样 大小 颜色不一样
