ECharts中实现x轴中的坐标以不同间距显示的效果

  • ECharts中实现x轴中的坐标以不同间距显示的效果已关闭评论
  • 27 次浏览
  • A+
所属分类:Web前端
摘要

我们日常在使用ECharts实现曲线图或柱状图的时候,x轴上的坐标都是等距离显示的。


1、?需求描述

我们日常在使用ECharts实现曲线图或柱状图的时候,x轴上的坐标都是等距离显示的。

有时候我们可能有这个需求:

x轴上的坐标距离按照对应数据的比例进行显示。

打个比方,假设x轴上有5个点,正常情况下,我们每个点之间的距离都是30px。

这不是我们想要的效果,我们想要的效果是,第一个点和第二个点之间的距离为30px,第二个点和第三个点之间的距离为50px,第三个点和第四个点之间的距离为87px,第四个点和第五个点之间的距离为111px……,也就是根据每个点的具体业务需求(间隔的实际距离)来动态显示间隔的距离。


2、?具体实现

实现思路:

  • 先隐藏x轴相关默认设置;
  • 在通过markLine属性来绘制x轴数据。

2.1、隐藏x轴相关默认设置

首先,我们应该隐藏掉x轴默认的显示,具体设置如下:

  xAxis: {     type: 'value',     axisTick: { show: false }, //隐藏刻度线     axisLabel: { show: false }, //隐藏刻度值     //网格线,参考文档:https://echarts.apache.org/zh/option.html#xAxis.splitLine     splitLine: {       show: false //隐藏分割线     }   }, 

2.2、设置y轴相关设置

y轴相关设置如下所示:

  yAxis: [     {       type: 'value'     }   ], 

2.3、设置series

接下来我们就可以在series设置markLine来实现x轴坐标数据自定义间隔距离了,具体设置如下所示:

  series: [     {       name: '图例1',       type: 'line',       z: 10, //控制曲线的浮动层级,避免在markLine下方被遮住       data: [         [0.312, 0],         [0.426, 43],         [0.582, 52],         [0.795, 53],         [1.077, 60],         [1.472, 62],         [2.016, 73],         [2.745, 76],         [3.193, 85],         [3.482, 87],         [3.762, 95],         [4.37, 100],         [4.723, 100],         [5.109, 100]       ],       markLine: {         symbol: '', //取消箭头         silent: true, //取消鼠标hover事件         label: {           //标线的文本,模拟x轴显示的内容           position: 'start', //改变label位置           rotate: 45, //设置文字旋转度数(注意:ECharts官网文档居然没有rotate这个属性的说明)           // backgroundColor:'#fff'           // color:'#f00',//文字颜色           formatter: (data) => {             return data.name;           }         },         lineStyle: { color: '#e0e6f1', type: 'solid' },         data: [           {             name: '0.075',             xAxis: 0.312           },           {             name: '0.15',             xAxis: 0.426           },           {             name: '0.3',             xAxis: 0.582           },           {             name: '0.6',             xAxis: 0.795           },           {             name: '1.18',             xAxis: 1.077           },           {             name: '2.36',             xAxis: 1.472           },           {             name: '4.75',             xAxis: 2.016           },           {             name: '9.5',             xAxis: 2.475           },           {             name: '13.2',             xAxis: 3.193           },           {             name: '16',             xAxis: 3.482           },           {             name: '19',             xAxis: 3.762           },           {             name: '26.5',             xAxis: 4.37           },           {             name: '31.5',             xAxis: 4.723           },           {             name: '37.5',             xAxis: 5.109           }         ]       }     }   ] 

说明:

  • z:控制曲线的浮动层级,如果不设置,到时候曲线显示的层级会在markLine线条的下方,会被遮住;
  • data:控制x轴坐标的数据源以及对应y轴的数据,如[37.5, 100]代表x轴的坐标点在37.5这个位置的时候y轴的数据为100;
  • markLine:自定义绘制的x轴坐标数据
    • symbol:取消绘制的箭头符号;
    • silent:取消鼠标hover事件;
    • label.position:绘制的x轴文本显示的位置;
    • label.formatter:自定义显示绘制的x轴文本内容;
    • lineStyle:绘制的样式;
    • data:要显示的x轴数据,xAxis需要和series.data中的数组中的第一个值保持一致,name为x轴上展现的内容。

2.4、最终效果

最终效果如下图所示:

ECharts中实现x轴中的坐标以不同间距显示的效果


3、?完整代码

【2.4、最终效果】中的完整实现代码(下面的完整代码包含了一些其他设置,如:图例、图例默认显示图否、线条的颜色、自定义提示框等设置,如果不需要可自行移除),如下所示(可将如下代码直接复制到ECharts官网在线编辑器中运行查看):

option = {   grid: {     // show: true,//是否显示外边框线     // borderColor: '#f00',//外边框线颜色     top: 45,     left: 30,     right: 5,     bottom: 45,     containLabel: true   },   //提示框组件,参考文档:https://echarts.apache.org/zh/option.html#tooltip   tooltip: {     trigger: 'axis',     formatter: function (datas, ticket) {       return datas && datas[0].data.length > 1         ? datas[0].seriesName +             '(' +             datas[0].data[0] +             ')' +             ':' +             datas[0].data[1] +             'kg'         : datas[0].data;     }   },   //顶部的标题,参考文档:https://echarts.apache.org/zh/option.html#title   title: [     {       show: true,       text: 'ZZZZ标准曲线图',       left: 'center',       top: 5,       textStyle: {         fontSize: 18,         fontWeight: 'normal'       }     },     {       show: true,       text: 'XXXX尺寸(mm)',       left: 'center',       bottom: 5,       textStyle: {         fontSize: 12,         fontWeight: 'normal'       }     }   ],   //图例,参考文档:https://echarts.apache.org/zh/option.html#legend   legend: {     left: 'right',     data: ['图例1', '图例2'],     selected: {       图例1: true, //显示       图例2: false //不显示     },     selectedMode: 'multiple' //用于控制图例的选择模式(single:单选、multiple:多选、false:禁止选择)   },   xAxis: {     type: 'value',     axisTick: { show: false }, //隐藏刻度线     axisLabel: { show: false }, //隐藏刻度值     //网格线,参考文档:https://echarts.apache.org/zh/option.html#xAxis.splitLine     splitLine: {       show: false //隐藏分割线     }   },   yAxis: [     {       type: 'value',       name: 'YYYY测试标题',       nameGap: 30,       nameRotate: 90,       nameLocation: 'middle',       splitLine: {         show: true,         lineStyle: {           color: '#e0e6f1', //'#e0e6f1',           type: 'solid'         }       },       splitNumber: 10 //设置y轴分隔的段数,如0~100之间默认情况可能会按照0、20、40、60……的间隔显示,设置相应的数字后就会根据实际情况显示的更细,如0、10、20、30……     }   ],   series: [     {       name: '图例1',       type: 'line',       //设置数据点形状(实心),参考文档:https://echarts.apache.org/zh/option.html#series-line.symbol       symbol: 'circle',       z: 10, //控制曲线的浮动层级,避免在markLine下方被遮住       //线条的颜色       lineStyle: {         color: '#409EFF'         //线条类型(solid:实线、dashed:粗虚线、dotted:细虚线)         // type: 'dotted',       },       //线条上数据点的颜色       itemStyle: {         color: '#409EFF'       },       //曲线数据点的设置,参考文档:https://echarts.apache.org/zh/option.html#series-line.label       label: {         show: true, //显示曲线上的某个点的数值         formatter: function (data) {           return data.value && data.value.length > 1             ? data.value[1] + 'kg'             : data.value;         }       },       data: [         [0.312, 0],         [0.426, 43],         [0.582, 52],         [0.795, 53],         [1.077, 60],         [1.472, 62],         [2.016, 73],         [2.745, 76],         [3.193, 85],         [3.482, 87],         [3.762, 95],         [4.37, 100],         [4.723, 100],         [5.109, 100]       ],       markLine: {         symbol: '', //取消箭头         silent: true, //取消鼠标hover事件         label: {           //标线的文本,模拟x轴显示的内容           position: 'start', //改变label位置           rotate: 45, //设置文字旋转度数(注意:ECharts官网文档居然没有rotate这个属性的说明)           // backgroundColor:'#fff'           // color:'#f00',//文字颜色           formatter: (data) => {             return data.name;           }         },         lineStyle: { color: '#e0e6f1', type: 'solid' },         data: [           {             name: '0.075',             xAxis: 0.312           },           {             name: '0.15',             xAxis: 0.426           },           {             name: '0.3',             xAxis: 0.582           },           {             name: '0.6',             xAxis: 0.795           },           {             name: '1.18',             xAxis: 1.077           },           {             name: '2.36',             xAxis: 1.472           },           {             name: '4.75',             xAxis: 2.016           },           {             name: '9.5',             xAxis: 2.475           },           {             name: '13.2',             xAxis: 3.193           },           {             name: '16',             xAxis: 3.482           },           {             name: '19',             xAxis: 3.762           },           {             name: '26.5',             xAxis: 4.37           },           {             name: '31.5',             xAxis: 4.723           },           {             name: '37.5',             xAxis: 5.109           }         ]       }     },     {       name: '图例2',       type: 'line',       symbol: 'circle',       z: 10,       lineStyle: {         color: '#67C23A'       },       itemStyle: {         color: '#67C23A'       },       data: [         [0.212, 0],         [0.326, 43],         [0.482, 52],         [0.695, 53],         [0.977, 60],         [1.372, 62],         [1.916, 73],         [2.645, 76],         [3.093, 85],         [3.382, 87],         [3.662, 95],         [4.27, 100],         [4.623, 100],         [5.009, 100]       ],       markLine: {         symbol: '',         silent: true,         label: {           position: 'start',           rotate: 45,           formatter: (data) => {             return data.name;           }         },         lineStyle: { color: '#e0e6f1', type: 'solid' },         data: [           {             name: '0.065',             xAxis: 0.212           },           {             name: '0.05',             xAxis: 0.326           },           {             name: '0.2',             xAxis: 0.482           },           {             name: '0.5',             xAxis: 0.695           },           {             name: '1.08',             xAxis: 0.977           },           {             name: '2.26',             xAxis: 1.372           },           {             name: '4.65',             xAxis: 1.916           },           {             name: '9.4',             xAxis: 2.375           },           {             name: '12.2',             xAxis: 3.093           },           {             name: '15',             xAxis: 3.382           },           {             name: '18',             xAxis: 3.662           },           {             name: '25.5',             xAxis: 4.27           },           {             name: '30.5',             xAxis: 4.623           },           {             name: '36.5',             xAxis: 5.009           }         ]       }     }   ] };