解决ECharts两条条折线图数据一样时，拐点处数据重合（设置ECharts两条折线图拐点处数据一上一下）

解决办法：在series里选择一条数据，给其label的position赋值为“top”或“bottom”，与另一个进行区分。

示例代码如下：

option = {backgroundColor: '#080b30',title: {text: '',textStyle: {align: 'center',color: '#fff',fontSize: 20,},top: '5%',left: 'center',},tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(0, 255, 233,0)'}, {offset: 0.5,color: 'rgba(255, 255, 255,1)',}, {offset: 1,color: 'rgba(0, 255, 233,0)'}],global: false}},},},grid: {top: '15%',left: '5%',right: '5%',bottom: '15%',// containLabel: true},xAxis: [{type: 'category',axisLine: {show: true},splitArea: {// show: true,color: '#f00',lineStyle: {color: '#f00'},},axisLabel: {color: '#fff'},splitLine: {show: false},boundaryGap: false,data: ['A', 'B', 'C', 'D', 'E', 'F'],}],yAxis: [{type: 'value',min: 0,// max: 140,splitNumber: 4,splitLine: {show: true,lineStyle: {color: 'rgba(255,255,255,0.1)'}},axisLine: {show: false,},axisLabel: {show: false,margin: 20,textStyle: {color: '#d1e6eb',},},axisTick: {show: false,},}],series: [{name: '注册总量',type: 'line',// smooth: true, //是否平滑showAllSymbol: true,// symbol: 'image://./static/images/guang-circle.png',symbol: 'circle',// symbolSize: 25,lineStyle: {normal: {color: "#6c50f3",shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 5,shadowOffsetX: 5,},},label: {show: true,position: 'top',textStyle: {color: '#6c50f3',}},tooltip: {show: false},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(108,80,243,0.3)'},{offset: 1,color: 'rgba(108,80,243,0)'}], false),shadowColor: 'rgba(108,80,243, 0.9)',shadowBlur: 20}},data: [281.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]},{name: '注册总量',type: 'line',// smooth: true, //是否平滑showAllSymbol: true,// symbol: 'image://./static/images/guang-circle.png',symbol: 'circle',// symbolSize: 25,lineStyle: {normal: {color: "#00ca95",shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 5,shadowOffsetX: 5,},},label: {show: true,position: 'top',textStyle: {color: '#00ca95',}},tooltip: {show: false},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(0,202,149,0.3)'},{offset: 1,color: 'rgba(0,202,149,0)'}], false),shadowColor: 'rgba(0,202,149, 0.9)',shadowBlur: 20}},data: [280.84, 204.97, 333.79, 282.55, 397.35, 213.02, ],},]
};

示例结果如下（当两条折线图拐点的数据大小很相似的时候，其数据就会发生重合现象，因为两条折线图的position都为top）：

此时我们可以将其中一条折线图的数据显示在下方（将其中一条折线图的position设置为bottom，例如“注册总量”这条线）。

部分代码如下：

label:{show: true,position: 'bottom', // 设置拐点处数字出现的位置textStyle: {color: '#00ca95',}
},

结果如下：

这样就可以很好的进行区分。

解决ECharts两条条折线图数据一样时，拐点处数据重合（设置ECharts两条折线图拐点处数据一上一下）相关推荐

echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）
本篇博文是记录一下我在开发过程中遇到的一个问题,那就是对于南丁格尔玫瑰图(或者饼图)如何根据百分比大小进行排列,可以很直观的看出数据高低. 首先给大家展示一下官方的样式,具体代码可以去官网上查看:ht ...
python xlwings追加数据_Python学习随笔：使用xlwings设置和操作excel多行多列数据以及设置数据字体颜色填充色对齐方式的方法...
一.关于整行整列数据读写的问题在<Python学习随笔:使用xlwings读取和操作Excel文件>介绍了一次读写整行和整列的方法,整行数据写入时可以简单将读取的赋值语句交换一下等号左右 ...
python matplotlib画折线图出现连线混乱_python使用matplotlib模块绘制多条折线图、散点图...
今天想直观的展示一下数据就用到了matplotlib模块,之前都是一张图只有一条曲线,现在想同一个图片上绘制多条曲线来对比,实现很简单,具体如下: #!usr/bin/env python #enco ...
cad标注样式快捷键_说说CAD尺寸精度设置的两种方法！
CAD尺寸精度设置,在CAD标注尺寸时,CAD尺寸精度设置的两种方法我们在CAD的标注的时候,我们会发现后面会带有0,作为一个强迫症患者,如何解决这个问题呢? 我们可以看看下面的例子: 随意的画一条线 ...
mysql创建表设置数值范围,MySQL创建数据表时设定引擎MyISAM/InnoDB操作
我在配置mysql时将配置文件中的默认存储引擎设定为了innodb.今天查看了myisam与innodb的区别,在该文中的第七条"myisam支持gis数据,innodb不支持.即myisa ...
mysqlinnodb教程_MySQL创建数据表时设定引擎MyISAM/InnoDB操作
我在配置mysql时将配置文件中的默认存储引擎设定为了InnoDB.今天查看了MyISAM与InnoDB的区别,在该文中的第七条"MyISAM支持GIS数据,InnoDB不支持.即MyISA ...
mysql数据库复制数据表时的风险
最近在使用redis的缓存技术时,在项目中需要在插入mysql数据表记录的同时,缓存数据到redis.在创建数据表时,为了方便,直接使用复制另外一个数据库中的数据表,结果就悲剧了 package co ...
mysql 创建 innodb_MySQL创建数据表时设定引擎MyISAM/InnoDB操作
我在配置mysql时将配置文件中的默认存储引擎设定为了InnoDB.今天查看了MyISAM与InnoDB的区别,在该文中的第七条"MyISAM支持GIS数据,InnoDB不支持.即MyISA ...
华为路由器可以连接几个设备_华为如何设置连接两个无线路由器
在网络互联设备中,路由器是使用最广的一种网络互联设备,是数据通信的重要互联设备,下面是学识网小编整理的一些关于华为设置连接两个无线路由器的资料,供你参考. 华为设置连接两个无线路由器的方法 1.网口2 ...
MySQL创建数据表时设定引擎MyISAM/InnoDB
我在配置mysql时将配置文件中的默认存储引擎设定为了InnoDB.今天查看了MyISAM与InnoDB的区别,在该文中的第七条"MyISAM支持GIS数据,InnoDB不支持.即MyISA ...

解决ECharts两条条折线图数据一样时，拐点处数据重合（设置ECharts两条折线图拐点处数据一上一下）

解决ECharts两条条折线图数据一样时，拐点处数据重合（设置ECharts两条折线图拐点处数据一上一下）相关推荐

最新文章

热门文章