在echarts官网中有一些markPoint的一些基本用法，但是如果有其他的需求的的话，需要找好多的资料，也不一定可以找到合适的解决方法，基于本次的需求，将一些我遇到的问题记录在这里，方便查找
需求
- 需要展示每一条线的名字
- 在官网的例子中，是给每一个点增加标注的，所以我们需要先把数据处理好
例如：数据结构是
[{"code":1,"desc":"很久没有在高峰期坐地铁了很久没有在高峰期坐地铁了很久没有在高峰期坐地铁了很久没有在高峰期坐地铁了很久没有在高峰期坐地铁了很久没有在高峰期坐地铁了很久没有在高峰期坐地铁了很久没有在高峰期坐地铁了","points":[{"code":2,"name":null,"strategy":null,"showdate":"10/13","percentage":90,"assistpercentage":0,"creatorname":"华榕","iscontinue":false},{"code":23,"name":null,"strategy":null,"showdate":"10/18","percentage":80,"assistpercentage":0,"creatorname":"华榕","iscontinue":false},{"code":25,"name":null,"strategy":null,"showdate":"10/19","percentage":80,"assistpercentage":0,"creatorname":"华榕","iscontinue":false}]},{"code":2,"description":"其中一步","points":[{"code":12,"name":null,"strategy":null,"showdate":"12/16","percentage":100,"assistpercentage":0,"creatorname":"磊子","iscontinue":false}]}]
/**
* 这里每一个point就是一个点，一个对象就是一条线，所以第一条线有两个点，第二条线有一个点；
* 先创建一个数组放这两条线
*/
this.chartsData.markPointArr.push({
// 这个是文本所在的坐标点，x:x坐标点，100：y坐标点，这里需要100是因为我们要展示在最上方，但是不能写超出100的值，因为我们的纵坐标最高的点就是100
coord: [x, 100],
name: item.description, // 这个是需要在图标上方现实的每条线的文字
length: item.points.length // 每条线有几个点，用来之后的计算
})
- 在图标组件中进行配置
为了在图标上方展示，我们需要增大图标容器的高度
<!-- 传进来需要的高度 -->
<div :id="id" :style="{ height: height, width: width }"/>
但是不管设置多高的容器，echarts的图标都是在最上方，所以我们首先要把图标往下挪动
grid: {
left: "2%",
right: "2%",
top: '30%', // 主要就是这个属性
containLabel: true,
},
- 紧接着就操作数据
const markPoint = this.categoryData.markPointArr.map(item => {
return {
coord: item.coord, // 每句话的位置
name: this.handleText(item.name, Math.ceil(item.width[0] / 9)),
label: {
show: true
},
width: item.width
}
})
// 这里的handleText是为了让文本折行，因为我们想要让每个文本都和折线对应，并且超出一定的行数让他以点点的形式展现
handleText(params, size){
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = size;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 计算行数，向上取整
//判断是否需要换行
if (paramsNameNumber > provideNumber) {
//循环得到每行的显示内容，p代表行
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);
newParamsName += tempStr;// 最终拼成的字符串
} else {
// 每一次拼接字符串并换行
if(p == 8) {
tempStr = params.substring(start, end) + '...'
newParamsName += tempStr;// 最终拼成的字符串
break
} else {
tempStr = params.substring(start, end) + "\n"
newParamsName += tempStr;// 最终拼成的字符串
}
}
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
return newParamsName
}
- 数据都处理好之后，就可以设置起的的属性了，例如itemStyle，label等等
