正常状态

不全的情况

所有的数据都是从后台取的，也就是说动态变化的，一开始的时候数据量不大不会出现问题，后面y轴的值越来越大的时候就出现了这个显示不全的情况

代码

 <div id="chart-line"></div>var lineChart = echarts.init(document.getElementById('chart-line'));// 折线图配置
option = {tooltip: {trigger: 'axis',hideDelay: '300'},xAxis: {show: false,type: 'category',data: [1, 2, 3, 4, 5, 6, 7],axisTick: {inside: true,alignWithLabel: true}},yAxis: {type: 'value',name: '营业额(元)',axisTick: {inside: true},scale: true},series: [{name: '营业额',type: 'line',data: [1100000, 2000000, 450000, 1370000, 1200000, 4030000, 2350000], // 因为是要分析的是前端问题，这里我就直接写一组很大的数据了，不管跟后台交互部分lineStyle: {normal: {color: '#82c26b'}},itemStyle: {normal: {color: '#82c26b'}}}]
};lineChart.setOption(option);

官网API

我们要看的是配置项的部分：Documentation - Apache ECharts(incubating)

可以改的地方有下面几个：

yAxis.axisLabel.margin：刻度标签与轴线之间的距离。默认值是8，可以改小一点。不过本来的值已经很小了，这个没多大作用。
yAxis.axisLabel.formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。比如可以设置太长了换行之类的。
grid.left：grid 组件离容器左侧的距离。默认值是10%。

最后的代码如下。这里就只列出修改了的部分了，比原来添加了 grid.left 和 yAxis.axisLabel

option = {...yAxis: {type: 'value',name: '营业额(元)',axisTick: {inside: true},scale: true,axisLabel: {margin: 2,formatter: function (value, index) {if (value >= 10000 && value < 10000000) {value = value / 10000 + "万";} else if (value >= 10000000) {value = value / 10000000 + "千万";}return value;}},},grid: {left: 35},...
};

Echarts中折线图Y轴数据值太长显示不全-解决办法相关推荐

echarts折线图不显示y轴值_Echarts 折线图y轴标签值太长时显示不全的解决办法
问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况. 分析先贴一 ...
Echarts 折线图y轴标签值太长时显示不全的解决办法
问题分析解决办法问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
Echarts在手机端y轴数据过大，显示不全
解决办法: 减少y轴的margion,和格式化y轴 myChart.setOption({ ..., yAxis: { axisLabel: { margin: 2, formatter: funct ...
echarts中折线图、柱状图之间的转换
echarts中折线图.柱形图.数据视图的转换需要toolbox里面的内容(也就是加粗的部分) // 基于准备好的dom,初始化echarts实例 var day = echarts.init ...
echarts中设置双Y轴左右刻度线一致
echarts中设置双Y轴左右刻度线一致一.效果图二.主要代码一.效果图二.主要代码 this.taskxAxis = []this.taskSeries = [[], []]taskInit ...
如何判断你的数据集是否适合使用深度学习模型？如果数据量太小有什么解决办法？
如何判断你的数据集是否适合使用深度学习模型?如果数据量太小有什么解决办法? deep learning is a data hungry problem 数据集太小,数据样本不足时,深度学习相对其它机 ...
echarts折线图y轴根据数值自动_Python matplotlib 绘制双Y轴曲线图的示例代码
双X轴的可以理解为共享y轴 ax1=ax.twiny() ax1=plt.twiny() 双Y轴的可以理解为共享x轴 ax1=ax.twinx() ax1=plt.twinx() 自动生成一个例子 ...
Echarts使用及动态加载图表数据折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度...我想应该够简洁了使用Echarts 目前,就官网的文 ...

Echarts中折线图Y轴数据值太长显示不全-解决办法

正常状态

不全的情况

代码

官网API

Echarts中折线图Y轴数据值太长显示不全-解决办法相关推荐

最新文章

热门文章