1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Echarts 折线图间隔显示数据

Echarts 折线图间隔显示数据

时间:2020-04-04 07:48:51

相关推荐

Echarts 折线图间隔显示数据

var option = {// 主要用来控制图表四周留白grid: {left: '15%',top: '20%',right: '5%'},// 提示框组件tooltip: {trigger: 'axis', //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。axisPointer: { //去掉移动的指示线type: 'none'},extraCssText:'background:#000;opacity:0.65;'},formatter: function (params: any) {var res= `<div><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="font-size:12px;color:#fff;line-height:1;">${params[0].name} </div><div style="margin: 10px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><span style="float:left;font-size:12px;color:#fff;">${params[0].value}</span><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div></div>`return res;},//直角坐标系 grid 中的 x 轴,xAxis: {type: 'category', //'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。// 坐标轴轴线相关设置// 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置axisLabel: {// 是否显示坐标刻度标签(这了指是否显示x轴上的月份)show: true,// 标签文字的颜色color: '#999'},//x轴刻度线设置axisTick: {"show": false},// 类目数据,在类目轴(type: 'category')中有效。data: getDate.value,},//直角坐标系 grid 中的 y 轴,yAxis: {type: 'value', //'value' 数值轴,适用于连续数据。// 坐标轴轴线相关设置axisLine: {show: false //y轴线消失},splitLine: {//网格线lineStyle: {type: "dashed", //设置网格线类型 dotted:虚线 solid:实线width: 1,},show: true, //隐藏或显示},// 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置axisLabel: {show: true,// 标签文字的颜色color: '#999'},//y轴刻度线设置axisTick: {"show": false},splitNumber: 5, //坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整.在类目轴中无效。},series: [{type: 'line', //折线图是用折线将各个数据点标志连接起来的图表,用于展现数据的变化趋势。和全局设置type效果一样,表示折线图// 系列中的数据内容数组。数组项通常为具体的数据项。data: getData.value,// 折线条的样式lineStyle: {color: '#E60012',width: 1},areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: ' #ffb3b3'},{offset: 1,color: '#ffffff'}])},// stack: 'Total',label: {show: true,position: 'top',color: '#E60012'},// 折线拐点的样式itemStyle: {normal: { // 静止时:color: '#E60012',},emphasis: { // 鼠标经过时:color: '#E60012',}},smooth:true,symbolSize: 7 //关键内容,间隔显示}]};nextTick(()=>{var chartDom2 = document.getElementById("chartColumn2") as HTMLElement;var myChart2 = echarts.init(chartDom2);option && myChart2.setOption(option);})})

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