记录一个需求吧，也希望有人能给出其它更好的方法。
1.根据请求到的数据动态渲染echarts图形；
2.有3个接口，第1个接口返回2个图形数据，其它各返回1个，共渲染出4个echarts图形；
预览.gif
（第1个图是有多条数据渲染，第2个图中数据仅有几条并且数据为0时，第3个图中是没有数据情况下的形态！）
时间点和数据的数量要保持一致，否则数据默认是从第1时间点默认排列
template公共部分
标签公共组件.png
data: {
return {
dataLIst: [] // 初始一个存放数据的数组
}
}
第1个接口返回2个图形数据
返回2个数据的接口.png
返回1个数据的接口
返回1个数据的接口.png
拿到的数据与绘制echarts所需格式不同，分别调用了转换数据格式的方法
this.dataFormat()
数据格式转换.png
转换为所需的格式后调用绘制echarts的准备方法
this.initChartLine()
对于在绘制图形时，对图形大小、颜色、参数的设置都可以在下面进行设置，有部分注释仅供参考
绘制图形1.png
绘制图形2.png
绘制图形3.png
因为我是共用的一个页面的标签，所以设置了不同id来进行获取，页面根据参数进行了遍历。按照上面的步骤，echarts就应该绘制出来了！
说一下我的数据格式转换的前后不同，高亮部分是请求到的数据格式，而echarts要使用的是注释部分的格式，需对其进行转换。
格式数据转换.png
let result = [];
for (let v of items1) {
let values = v.value;
if (values.length && Array.isArray(values)) {
for (let i of values) {
const existenceIndex = result.findIndex(item => item.name === i.name);
if (result[existenceIndex]) {
result[existenceIndex].data.push(i.value);
} else {
result.push({
name: i.name,
data: [i.value]
});
}
}
}
}
下面说一下图形中线条颜色的修改
每条数据中的参数设置，可修改线颜色
series: [
{
name:'近七日收益',
type:'line',
areaStyle: {
normal: {
color: '#091e3b' //改变区域颜色
}
},
itemStyle: {
normal: {
color: '#8cd5c2', //改变折线点的颜色
lineStyle: {
color: '#8cd5c2' //改变折线颜色
}
}
},
stack: '总量',
data:["91","29","93","64","105"]
}
]
1.默认echarts提供的颜色，最多是11种
image.png
2.这个是图例较多时的例子，通过注释掉type:scroll这句，可以看到右侧的图例中，颜色出现重复的情况
image.png
3.这里我们使用hsl定义颜色
先看下hsl的定义及设置
image.png
4.先设置一个简单的colorList,查看一下色调、饱和度、亮度的值对颜色的影响
image.png
5.我们就是通过程序，自动调整色调、饱和度、亮度这三个值，然后实现不同颜色的显示。当饱和度、亮度大于80或小于30会偏亮或偏暗，所以这里饱和度、亮度的取值在30到80之间
从运行结果可以看出，颜色已经不重复了
image.png
在测试过程中遇到一个问题如图：
数据太多重叠.png
由于返回的数据类型太多，导致文字与图形重叠，本想将echarts模块的高度设置为自适应，我页面有多个不同的echarts，而且相对应右边有element的消息列表也要设为动态，整个页面出来以后，大小混乱，最后无奈在grid中添加top的高度，同样数据不能太多，否则图形会挤压的无法观看
grid: {
top: result.length + 12+ '%', // result是返回数据类型的数组
left: '4%',
right: '4%',
bottom: '6%',
containLabel: true
}
希望可以给出更好的方法或建议！
网友评论