echarts折线图动态多条线

echarts折线图配置项

由于工作中遇到的图表特别多，每次用过配置项总是想不起来，在这里记录一下，希望也可以帮到路过的你。话不多说我们上图：

左边的是设计稿，右边的是echarts的示例图，我们先找不同，需要重新配置的地方，首先是顶部的legend的icon，文字都要改，然后就是X轴的label要过滤换行，中间区域折线上点的样式，Y轴的刻度值区间不是从0开始，由于我的需求折线的条数是不确定的，需要做成动态，话不多说上代码，代码中配置项我都写了注释：

//以下是封装的折线图组件的js代码，只需要传入ref值和处理好格式series数组值就行props: {//传进来用来绑定ref的唯一值id: {type: String,},//传进来的数据series: {type: Array,default() {return [];},},},methods: {initAirtrends: function () {//这里就不多说，上篇文章有细说if (!document.getElementById('airtrends')) return;this.myChart = this.$echarts.init(document.getElementById('airtrends'));this.myChart.clear()this.setairtrendsoption();window.addEventListener("resize", () => {if (this.myChart) {this.myChart.resize();}});},setairtrendsoption() {let option = {legend: {//顶部每条折线的标识的配置项icon: "circle",   //    改变它的icon circle，rect ，roundRect，triangleitemWidth:8,  // 设置它的宽度itemHeight:8, // 设置它的高度itemGap:20, // 设置它的间距// orient: 'vertical',  //vertical是竖着显示 ，默认是横着// left: '70%',   //距离左边70%，也可用left,center,righty: '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);});},},},

然后在需要用到的页面引入组件注册后，使用！

//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)",},]),
},

好的，在这里我就是想记录关于折线图的所有东西，感恩你与我每一次以代码形式的遇见，分享使我们未来越来越好。

echarts折线图动态多条线相关推荐

echarts折线图动态修改折线颜色
需求选择每条线的颜色.粗细绘制折线图. 解决动态修改option中对应的样式属性即可.查看echarts官方文档,进行了如下修改. 修改一(明显有问题可跳过,仅做记录.) 效果一: 配置一: op ...
Echarts—折线图动态获取数据示例（java版本）
最终效果饼状图:饼状图示例,使劲点我!!! 柱状图:柱状图实例,使劲点我!!! 步骤:准备一个dom-->获取dom节点-->初始化-->绘制图表-->渲染数据 html代码 ...
Echarts 折线图实现一条折线显示不同颜色
在echarts中,如果想要实现折线图前半部分为蓝色,后半部分为红色,怎么处理呢? 这里介绍一种方法,通过markLine图表标线搭配visualMap觉映射组件配合实现,具体代码如下: const ...
vue中对echarts折线图设置基准线/警告线，可在输入框输入想要的值，并改变已有的基准线的值。
系列文章目录前端小白,来此做笔记,前端vue框架下的echart添加警戒线,可在输入框中去输入想要设置的数值,按保存键去实现.同时可对警戒线的上下进行颜色的区分.采用的后端动态数据写文章为了以后碰 ...
echarts折线图有两条虚线
itemStyle: {normal: {lineStyle: { //系列级个性化折线样式width: 2,type: 'dashed' // 虚线}} }
echarts折线图堆叠怎么设置_ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
echart 折线从左到右动画效果_echarts多条折线图动态分层的实现方法
1.关于Echarts 大家可以到这个网址看一下,还是比较详细的. 这个功能还是很强大的,对于喜欢做数据统计来说是美味的. 2.echarts多条折线图动态分层 var xData = param.x ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
Echarts折线图和地图（个人总结）
Echarts折线图和地图(个人总结) Echarts折线图和地图 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

echarts折线图动态多条线

echarts折线图配置项

echarts折线图动态多条线相关推荐

最新文章

热门文章