整理了一下在echarts中插入简单文本的三种方法：
1.title（echarts title属性设置：https://www.jianshu.com/p/27bbc7895295）
2.lengend (echarts lengend属性设置：https://www.jianshu.com/p/79c8acffeb53)
3.graphic
1.title定义文字，效果如下图所示：
（这里将数字和“发布活动”分别用标题和副标题，达到样式效果）
参考链接：https://blog.csdn.net/weixin_42566993/article/details/108695543
（如果需要主标题副标题在同一行，可参考链接：https://blog.csdn.net/m0_37378152/article/details/116746634）
上全部代码（复制到空页面即可）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main" style="width: 600px ;height: 400px;"></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'))
var titleNum = 15
var option = {
//标题
title: {
text:titleNum,//主标题文本
subtext:'共发布活动',//副标题文本
left:'center',
top:'54%',
textStyle:{
fontSize: 38,
color:'#454c5c',
align:'center'
},
subtextStyle:{
fontFamily : "微软雅黑",
fontSize: 16,
color:'#6c7a89',
}
},
//提示框，鼠标悬浮交互时的信息提示
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
//图例，每个图表最多仅有一个图例
legend: {
orient: 'vertical',
left: 'left',
data: ['第一部分','第二部分','第三部分','第四部分']
},
// 系列列表,每个系列通过 type 决定自己的图表类型
series : [
{
name: '访问',
type: 'pie',
radius : ['40%','70%'],
center: ['50%', '65%'],
minAngle:'15',
data:[
{name:"第一部分",value:4},
{name:"第二部分",value:7},
{name:"第三部分",value:3},
{name:"第四部分",value:1},
],
itemStyle: {
normal:{
label:{
show:true,
formatter: "{b} :\n {c} \n ({d}%)",
position:"inner"
}
}
}
}
]
}
myChart.setOption(option);// 为echarts对象加载数据
</script>
2.legend定义图例文字，效果如下图所示：
参考链接：http://www.manongjc.com/article/33170.html
（还看到一个讲的不错的，也可以看看：https://www.cnblogs.com/alantao/p/9396582.html）
上全部代码（复制到空页面即可）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main" style="width: 600px ;height: 400px;"></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'))
var data = [
{value:40, name:'货币'},
{value:20, name:'股票'},
{value:40, name:'债券'}
]
var option = {
tooltip: {
trigger: 'item',
// formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
icon:'circle',
left:'50%',
y: 'center',
itemGap:30,
itemWidth:8,
padding:10,
textStyle:{
fontSize: 10
},
align:'left',
data: [
{
name:'货币',
},
{
name:'股票',
},{
name:'债券',
}
],
formatter: function(name){
var total = 0;
var target;
for (var i = 0, l = data.length; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
target = data[i].value;
}
}
var arr = [
'{a|'+name+' :}{b|'+((target/total)*100).toFixed(2)+'%}'
]
return arr.join('\n')
},
textStyle:{
rich:{
a:{
fontSize:20,
align:'left',
padding:[0,0,0,10]
},
b:{
fontSize:20,
align:'right',
padding:[0,0,0,10],
lineHeight:25
}
}
},
backgroundColor: "rgba(0,0,0,.05)"
},
series: [
{
name: '访问来源',
type: 'pie',
radius: [50, 80],
center: ['20%', '50%'],
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
data: [
{
value: 40,
name: '货币',
itemStyle: { normal: { color: "#5877F0" } }
},
{
value: 20,
name: '股票',
itemStyle: { normal: { color: "#AA9FFD" } }
},
{
value: 40,
name: '债券',
itemStyle: { normal: { color: "#F96481" } }
}
]
}
]
}
myChart.setOption(option);
</script>
如果要实现多个legend可以参考这个：https://blog.csdn.net/Zhooson/article/details/90239664
3.graphic定义文字
graphic功能比较强大，不止文字，可以看文档：https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-3u872dym.html
graphic: {
type:'text',
left: 10,
top: '70%',
style:{
text:'成交量: ' + data.cjl,
},
},
也可以看看这个：ECharts自定义富文本：https://blog.csdn.net/weixin_39844901/article/details/111760507
原创，转载请声明