ECharts-文字、格式、样式调整
微调样式
1.鼠标滑动图表上面有显示（tooltip）
图例
title: {
text: '大厅业务办件情况',
subtext: '',
},
//提示框取默认值，即鼠标移动到柱状图会显示内容（关键点）
tooltip: {
trigger: 'item'
}
这里涉及一个“trigger”值（axis和item）的知识点，参考文档
【1】https://blog.csdn.net/qq_42462993/article/details/125296566 （注意这里讲的的柱状、折线图）
饼图不要用“axis”
//提示框取默认值，即鼠标移动到柱状图会显示内容
tooltip: {
trigger: 'axis',
//触发类型；轴触发，
//axis则鼠标hover到一条柱状图显示全部数据，
//item则鼠标hover到折线点显示相应数据，
axisPointer: {
//坐标轴指示器，坐标轴触发有效，
type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
crossStyle: {
color: '#fff'
}
}
}
2.柱形图上方显示vaule值（label）
图例
series: [
{
name: '业务量',
type: 'bar',
data: dataList,
itemStyle: {
normal: {
label: {
show: true, //关键点开启显示
position: 'right', //top上方;left左侧;right右方显示
// textStyle: { //数值样式
// color: 'black',
// fontSize: 12
// }
}
}
}
},
]
3.饼图-中间文字、图层含百分比
图例
就是弄几个一模一样的 对象，其中的 label 样式不同
知识点：模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
相关代码
series: [
//饼中央文字
{
name: '',
type: 'pie',
radius: ['40%', '83%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center',
normal: {
show: true,
position: 'center',
color: '#4c4a4a',
formatter: '{active|今日总业务量}' + '\n\r' + '{total|' + zywl + '}',
rich: {
total: {
fontSize: 35,
fontFamily: "微软雅黑",
color: '#454c5c'
},
active: {
fontFamily: "微软雅黑",
fontSize: 16,
color: '#6c7a89',
lineHeight: 30,
},
}
}
},
labelLine: {
show: false
},
data: dataList
},
//echarts饼图内部显示百分比设置
{
name: '',
type: 'pie',
radius: ['40%', '83%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label:{
//echarts饼图内部显示百分比设置
normal:{
show:true,
position:'inner', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize : 10 //文字的字体大小
},
formatter:'{d}%' //显示%
}
},
labelLine: {
show: false
},
data: dataList
},
//饼图图形上的文本标签
{
name: '',
type: 'pie',
radius: ['40%', '83%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
//饼图图形上的文本标签
show: true,
position: "outside", //outside 外部显示 inside 内部显示
formatter: '{b}:{c}',
color: "#151414", //颜色
fontSize: 12 //字体大小
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: dataList
}
]
4.柱状图、折线图、饼图位置调整
参考文章
【1】https://www.cnblogs.com/kevinN/p/15173642.html
1.折线图和柱状图，通过grid属性调整。
grid:{
show:false,
top:'20%',
right:'5%',
bottom:'10%',
left:'10%'
},
其中数值可以是像素值，也可以是百分比。
2.饼图需要使用series中的center属性。
series: [
{
name:'名称',
type: 'pie',
radius: ['40%','70%']
center: ['30%','60%']//关键点
}]
（一）tooltip问题
tooltip：提示框
1.单对象内容过长(解决)
问题描述
正常示例图
问题示例图
解决方法
参考文献
【1】https://blog.csdn.net/xiaoxiannvh/article/details/126174412
【2】https://www.bbsmax.com/A/kmzLAGwNJG/
相关代码
tooltip: {
trigger: 'axis',
confine: true, // 限制tootip在容器内
appendToBody: true,//避免挡住轴内容
formatter:function (params) {
var newParamsName ='';
var title = '';
var titleLength = params[0].name.length;
var rowCount = 20;
var rowNumber = Math.ceil(titleLength / rowCount);
if(titleLength>rowCount){
for (var i = 0; i < rowNumber; i++) {
var tempStr = "";
var start = i * rowCount;
var end = start + rowCount;
if (i == rowNumber - 1) {
tempStr = params[0].name.substring(start, titleLength);
} else {
tempStr = params[0].name.substring(start, end) + "</br>";
}
newParamsName += tempStr;
}
}else {
newParamsName = params[0].name;
}
//返回小圆圈和后面的数量
return (newParamsName+"</br>"
+"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:"+params[0]['color']+"'></span>"+
+params[0]['value']);
},
},
效果
2.多对象内容过长(未尝试)
问题示例图
参考文献
【1】https://blog.csdn.net/qq_39364032/article/details/114651447
3.加不同单位
tooltip: {
trigger: 'axis',
formatter: function (params) {
var str = '';//声明一个变量用来存储数据
str += params[0].name +'</br>';
//图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
for(var i=0; i<params.length; i++){
if(params[i].seriesName.indexOf("占比")!=-1){
str += params[i].marker+ params[i].seriesName +': '+ params[i].data + '%' +'</br>';
}else {
str += params[i].marker+ params[i].seriesName +': '+ params[i].data + '笔' +'</br>';
}
}
return str;
}
},
（二）legend问题
legend：图例组件
1.文字过长需”换行“、”省略“操作(解决)
（1）换行操作（俏皮做法）
该换行实现操作，是从布局着手，“卡墙”操作
title: {
top:'3%',
text: '电子证照应用分析',
},
tooltip: {
trigger: 'axis'
},
legend: {
// orient: 'vertical',//（vertical--垂直显示,horizontal--水平显示）
left: '60%',//按百分比左右浮动，遇到最边缘位置会酌情换行，按需调整百分比，我这边是60%
data: ['开通', '签发', '材料关联', '结果关联']
},
如下图
（2）换行操作
解决方法
参考文献
【1】https://blog.csdn.net/A20190518/article/details/115767734?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-4-115767734-blog-116131609.235v29pc_relevant_default_base3&spm=1001.2101.3001.4242.3&utm_relevant_index=7
相关代码（以下代码也可以用于”X“轴、”Y“轴的文字显示-换行操作）
legend: {
data: ['蒸发量', '降水量', '平均温度'],
formatter: function (params) {
//超过十个字符就换行展示
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 2;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 开始截取的位置
var end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
},
省略操作
解决方法
相关代码
第一种方式：
legend: {
data: ['蒸发量', '降水量', '平均温度'],
formatter: function (name) {
return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
},
tooltip: {
show: true
}
},
第二种方式
legend: {
data: ['蒸发量', '降水量', '平均温度'],
formatter: function (value) {
//关键代码
let res = value
if (res.length > 5) {
//只显示前4位
res = res.substring(0, 4) + '..'
}
return res
},
tooltip: {
show: true
}
},
2.legend图例个数过多-实现多排、分页操作
一：实现”多排“操作
参考文献
【1】https://blog.csdn.net/liruiqing520/article/details/123256914
【2】https://www.freesion.com/article/8816953956/
关键点：
legend 变成List数组
图例一：（两排不需要对齐）
图例一：（两排需要对齐）
以上两种，看需求
就多了一个 样式配置
// 文字块背景色，一定要加上，否则对齐不会生效
backgroundColor: "transparent",
全代码：
option = {
tooltip: {
trigger: 'item'
},
legend:[
{
orient: 'horizontal',
icon: 'circle',
align: 'left',
bottom: '0',
itemWidth: 8,
itemHeight: 8,
y: '20',
x: 'center',
data: ['鼻翼煽动，口唇、指甲青紫', '胸闷', '憋气/憋醒'],
formatter: (name): any => {
return `{b|${
name}} `;
},
textStyle: {
color: '#999999',
fontSize: 12,
align: 'left',
// 文字块背景色，一定要加上，否则对齐不会生效
backgroundColor: "transparent",
rich: {
b: {
width: 200,
},
},
},
},
{
orient: 'horizontal',
icon: 'circle',
align: 'left',
bottom: '0',
itemWidth: 8,
itemHeight: 8,
y: '40',
x: 'center',
data: ['咳嗽或反复咳嗽', '气促', '没感觉/感觉良好'],
formatter: (name): any => {
return `{a|${
name}} `;
},
textStyle: {
color: '#999999',
fontSize: 12,
align: 'left',
// 文字块背景色，一定要加上，否则对齐不会生效
backgroundColor: "transparent",
rich: {
a: {
width: 200,
},
},
},
}
],
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{
value: 1048, name: '咳嗽或反复咳嗽' },
{
value: 735, name: '鼻翼煽动，口唇、指甲青紫' },
{
value: 580, name: '胸闷' },
{
value: 484, name: '憋气/憋醒' },
{
value: 300, name: '气促' },
{
value: 300, name: '没感觉/感觉良好' }
]
}
]
};
简单一点的就直接
legend: [{
data: ['鼻翼煽动，口唇、指甲青紫', '胸闷', '憋气/憋醒',],
icon: "roundRect",
x:'center',
y:'0%'
},{
data: ['咳嗽或反复咳嗽', '气促', '没感觉/感觉良好',],
icon: "roundRect",
x:'center',
y:'7%'
}],
一：实现”分页“操作 （未尝试）
参考文献
【1】https://www.wanjunshijie.com/note/echarts/4983.html
【2】https://www.cnblogs.com/jindao3691/p/16093592.html
（三）Echarts 主题化，统一风格
参考文献
【1】https://blog.csdn.net/m0_62064241/article/details/122520970?spm=1001.2014.3001.5506
步骤
json文件，需先注册主题（假设主题名称是 “vintage”）
$.getJSON(‘xxx/xxx/vintage.json’, function(themeJSON) {
echarts.registerTheme(‘vintage’, themeJSON);//需要注册
var chart = echarts.init(dom, ‘westeros’);
});
js文件，引入vintage.js文件后，可直接使用
var chart = echarts.init(dom, ‘westeros’);
一般来说用的是js版本的，下载好以后放入项目，并且引用(import ‘@/api/westeros’;)就可以用了
