echarts折线图动态多条线
echarts折线图配置项
由于工作中遇到的图表特别多，每次用过配置项总是想不起来，在这里记录一下，希望也可以帮到路过的你。话不多说我们上图：
左边的是设计稿，右边的是echarts的示例图，我们先找不同，需要重新配置的地方，首先是顶部的legend的icon，文字都要改，然后就是X轴的label要过滤换行，中间区域折线上点的样式，Y轴的刻度值区间不是从0开始，由于我的需求折线的条数是不确定的，需要做成动态，话不多说上代码，代码中配置项我都写了注释：
<template>
<div :ref="id" class="right"></div>
</template>
//以下是封装的折线图组件的js代码，只需要传入ref值和处理好格式series数组值就行
<script>
props: {
//传进来用来绑定ref的唯一值
id: {
type: String,
},
//传进来的数据
series: {
type: Array,
default() {
return [];
},
},
},
methods: {
initAirtrends: function (id) {//这里就不多说，上篇文章有细说
if (!document.getElementById('airtrends')) return;
this.myChart = this.$echarts.init(this.$refs[id]);
this.myChart.clear()
this.setairtrendsoption();
window.addEventListener("resize", () => {
if (this.myChart) {
this.myChart.resize();
}
});
},
setairtrendsoption() {
let option = {
legend: {//顶部每条折线的标识的配置项
icon: "circle", // 改变它的icon circle，rect ，roundRect，triangle
itemWidth:8, // 设置它的宽度
itemHeight:8, // 设置它的高度
itemGap:20, // 设置它的间距
// orient: 'vertical', //vertical是竖着显示 ，默认是横着
// left: '70%', //距离左边70%，也可用left,center,right
y: '1%', //距离顶部的距离，也可以用center
// textStyle:{ //icon后面的文字设置
// fontSize: 18,//字体大小
// color: '#ffffff'//字体颜色
// }
},
xAxis: {//X轴配置项
type: 'category',
data: this.xAxislist,//由于X轴也是动态的，我做了处理，看你需求，一般是写死的
boundaryGap: false,//数据点从边缘开始
axisLine: {
show:false,//不显示坐标轴线
},
axisTick:{
show:false,//不显示X轴坐标刻度
},
// axisLabel:{//X轴的label配置项，我没有用到
// formatter: value=> {
// if(this.value == 'today'){
// return text;
// }else{
// return value;
// }
// }
// }
},
grid:{//整个图例的大小，四个方向距离容器的距离，也可以用上下左右配置百分比
x:30,
x2:20,
y:40,
y2:30,
//containLabel: true
},
yAxis: {//Y轴配置项
type: 'value',
scale:true,//x轴刻度不从0开始，自动获取区间
//min:50,//设置最小区间，也可以设置max，如果设置了上面的scale就不生效了
},
series:this.series,//这是决定有几条线的数据，处理成你要的数据格式，也可以写死，那就是下面的写法
// [
// {
// name:'图一',//每一项数据的名字，与legend关联
// data: [150, 230, 224, 218, 135, 147, 260,110, 200, 124, 118, 235, 247, 160],//具体数据
// type: 'line',//每一个点用线连接
// },
// {
// name:'图二',
// data: [110, 200, 124, 118, 235, 247, 160,150, 230, 224, 218, 135, 147, 260],
// type: 'line'
// }
// ]
};
this.myChart.setOption(option);
},
},
watch: {
//深度监听传进来的数据，只要数据变化就刷新echarts图表
series: {
deep: true,
handler(newVal, oldValue) {
this.$nextTick(() => {
this.initQuanProgress(this.id);
});
},
},
},
<script>
然后在需要用到的页面引入组件注册后，使用！
//id随便给就行，只要不重复就行，series通过接口拿到数据后，处理成echarts图表所需要的数据格式
<line-chart :id=“linecharts” :series="series"></line-chart>
在这里我们折线图就配置完了，接下来记录下关于折线图另外的东西：
*1，在开发中我们有时候需要直接清楚图表的时候，可以使用这个方法
this.myChart.dispose();
2，如果后端返回的数据不全时，例如我们X轴有13个刻度，返回的数组只有10个，那我们每个值需要告诉echarts他们对应哪一个刻度值，这个时候哦我们可以这样配置
series：[
{
name:'图一',//每一项数据的名字，与legend关联
data: [ [ 2022.01.01 , 88],[ 2022.01.02 , 89],[ 2022.01.03 , 90] ],//数组里面还是数组，第一项是指定的X轴刻度，第二个是具体的值
type: 'line',//类型为线型
connectNulls: true//由于我们数据缺失，数据点就断开了，线就断了，这个属性就是即使断了让他们连接起来。
}
]
3，我们在开发中经常遇到，折线以下的区域，需要做渐变的效果需求，记录下这个配置，我们需要借助echarts一个特殊的方法this.$echarts.graphic.LinearGradient
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
//折线图颜色渐变
offset: 0,
color: "rgba(216, 228, 254)",
},
{
offset: 1,
color: "rgba(254,254,254)",
},
]
),
},
好的，在这里我就是想记录关于折线图的所有东西，感恩你与我每一次以代码形式的遇见，分享使我们未来越来越好。