ECharts实现折现图的拐点为空心圆圈

编程入门 行业动态 更新时间:2024-10-08 22:14:37

ECharts实现折现图的<a href=https://www.elefans.com/category/jswz/34/1742809.html style=拐点为空心圆圈"/>

ECharts实现折现图的拐点为空心圆圈

效果:

let option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}},formatter: function (params) {return '';}},grid: {left: 10,right: 40,bottom: 10,top: 45,containLabel: true},legend: {top: 30,right: 40,itemWidth: 10,itemHeight: 10,textStyle: {color: '#aaa'},data: [{name: '当前',icon: ''},{name: '同比',icon: ''},{name: '日均',icon: 'line'},]},xAxis: [{type: 'category',data: ['2022-10-25'],axisPointer: {type: 'shadow'},axisLabel: {color: '#838383',fontSize: 12,interval: 0,// rotate: 35},axisTick: { show: false },axisLine: {show: true,lineStyle: {color: '#eee',}}}],yAxis: [{type: 'value',axisLine: {show: true,lineStyle: {color: 'transparent'}},axisTick: {show: false},splitLine: {show: false},axisLabel: {formatter: '{value}%',color: '#B2BCCB',fontSize: 10},position: 'left',splitLine: {show: true,lineStyle: {color: '#F5F5F6',type: 'dashed'//虚线}}}],series: [{name: '当前',type: 'line',data: [{symbol: 'emptyCircle',symbolSize: 8,value: 0}],itemStyle: {color: '#8ED53B',deccal: {symbol: 'rect',}},},{name: '同比',type: 'line',data:  [{symbol: 'emptyCircle',symbolSize: 8,value: 0}],itemStyle: {color: '#438AFE'},},{name: '日均',type: 'line',data:  [{symbol: 'emptyCircle',symbolSize: 8,value: 0}],itemStyle: {color: '#D0D5DB',opacity: 0,},lineStyle: {type: 'dashed'}},]};

在option-》series-》data-》symbol设置为emptyCircle

更多推荐

ECharts实现折现图的拐点为空心圆圈

本文发布于:2024-02-05 16:27:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1745476.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:拐点   圆圈   ECharts   折现图

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!