300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 解决ECharts两条条折线图数据一样时 拐点处数据重合(设置ECharts两条折线图拐点处数

解决ECharts两条条折线图数据一样时 拐点处数据重合(设置ECharts两条折线图拐点处数

时间:2019-11-14 02:33:18

相关推荐

解决ECharts两条条折线图数据一样时 拐点处数据重合(设置ECharts两条折线图拐点处数

解决办法:在series里选择一条数据,给其labelposition赋值为“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两条折线图拐点处数据一上一下)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。