需求原因：

由于数据前一段对应的Y值变化比较大，后一段对应Y值变化比较小，客户只关注前一段的Y值变化，于是想到分段设置X轴间隔，由于官方没有直接支持，于是通过组合两个坐标系方式实现。

需求效果：

html代码：

<!DOCTYPE html>
<html style="height: 100%"><head><meta charset="utf-8">
</head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript" src="../dist/echarts.min.js"></script><script type="text/javascript" src="../dist/echarts-gl.min.js"></script><script type="text/javascript" src="../dist/ecStat.min.js"></script><script type="text/javascript" src="../dist/extension/dataTool.min.js"></script><script type="text/javascript" src="../map/js/china.js"></script><script type="text/javascript" src="../map/js/world.js"></script><script type="text/javascript" src="../dist/extension/bmap.min.js"></script><script type="text/javascript" src="../dist/jquery.min.js"></script><script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};option = null;$.getJSON("频域幅值p1.json", function (data1) {var data = [];var len = data1[0].length;for (var i = 0; i < len; i++) {data.push([data1[0][i].X, data1[0][i].Y]);}var data2 = [];var len2 = data1[1].length;for (var i = len; i < len2; i++) {data2.push([data1[1][i].X, data1[1][i].Y]);}option = {title: {text: '频率幅值图'},grid: [  //将视图分成2个区域{left: 100,width: 200},{left: 301,width: 500}],xAxis: [{type: 'value',//zlevel: 0,gridIndex: 0,  //使用第一个区域splitLine: {show: false  //不显示网格线}},{type: 'value',position: 'bottom',min: 1,//zlevel: 1,gridIndex: 1,  //使用第二个区域axisLine: {show: true,  //显示轴线color: 'red'},show: true,  //显示X轴splitLine: {show: false}}],yAxis: [{type: 'value',//zlevel: 0,gridIndex: 0,interval: 500,splitLine: {show: false}},{type: 'value',//zlevel: 1,gridIndex: 1,min: 0,max: 500,interval: 500,axisLabel: {show: false},axisLine: {show: false},splitLine: {show: false},show: false  //第二条Y轴不显示}],series: [{type: 'line',data: data,xAxisIndex: 0,yAxisIndex: 0,symbol: "none",lineStyle: {color: 'red'}},{type: 'line',data: data2,xAxisIndex: 1,yAxisIndex: 1,symbol: "none",lineStyle: {color: 'red'}}]};if (option && typeof option === "object") {myChart.setOption(option, true);}});</script>
</body></html>

效果：

使用到的json数据：

链接: https://pan.baidu.com/s/1-cF3Hvv_2kwrbUby7T_d5w 提取码: njq5

Echarts 分段设置X轴间隔，步长 - 模拟实现相关推荐

ECharts图表设置x轴和y轴显示数值
ECharts图表设置x轴和y轴显示数值未设置的效果: 想要达到的效果: 重要代码: xAxis.axisLabel.interval = 5; // 设置x轴间隔5个显示 // 设置y轴显示的最大 ...
Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放
文章目录 echarts中设置x轴和y轴均随滚轮进行缩放当数据实时渲染时,也可进行区域缩放 echarts中设置x轴和y轴均随滚轮进行缩放 dataZoom 组件用于区域缩放,从而能自由关注细节的 ...
echart 设置y轴间隔_ECharts 柱状图之间的间距怎么调整的？y轴的线怎么调出来？做成表格状。...
var myChart = echarts.init(document.getElementById('item1')); var option = { title: { text: '作业量', c ...
解决echarts设置x轴、y轴刻度起始值、终止值以及步长
echarts的官方示例中,可以通过设置xAxis(x轴)和yAxis(y轴)min.max属性改变x.y轴刻度起始.终止值. 对于坐标轴步长,官方给出两种方式,第一种是利用splitNumber,第 ...
Echarts设置y轴值间隔
需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些. 其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的清清楚楚 ...
echarts中设置双Y轴左右刻度线一致
echarts中设置双Y轴左右刻度线一致一.效果图二.主要代码一.效果图二.主要代码 this.taskxAxis = []this.taskSeries = [[], []]taskInit ...
R语言ggplot2可视化：自定义设置X轴上的时间间隔（中断、以年为单位），使用scale_x_date()自定义设置坐标轴间隔和标签、添加标题、副标题、题注信息
R语言ggplot2可视化:自定义设置X轴上的时间间隔(中断.以年为单位),使用scale_x_date()自定义设置坐标轴间隔和标签(Time Series Plot For a Yearly Ti ...
echarts柱状图x轴文字换行_深入 echarts 如何设置 Label / axisLabel 换行及自定义格式 / 自定义样式? 结合 canvas 如何实现文字换行来理解...
前言之前在一篇文章<深入 echarts 如何设置渐变色?echarts 如何设置圆角?echarts 如何设置自定义 Label?>已经初步介绍了如何通过 formatter 结合 r ...
matplotlib 多子图的画法 - 设置坐标范围 - 设置坐标的显示间隔 - 设置figure的大标题 - 设置x轴和y轴的名称 - df.groupby
前言本文实现的功能: 多子图的画法设置坐标范围设置坐标的显示间隔设置figure的大标题设置x轴和y轴的名称

Echarts 分段设置X轴间隔，步长 - 模拟实现

需求原因：

需求效果：

html代码：

使用到的json数据：

Echarts 分段设置X轴间隔，步长 - 模拟实现相关推荐

最新文章

热门文章