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、最终效果

最终效果如下图所示:


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
 }
 ]
 }
 }
 ]
};
作者:Qubernet原文地址:https://www.cnblogs.com/qubernet/p/18224201

%s 个评论

要回复文章请先登录注册