600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > Echarts中折线图Y轴数据值太长显示不全-解决办法

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

时间:2020-12-09 00:01:15

相关推荐

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

正常状态

不全的情况

所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面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.leftyAxis.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},...};

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