首页 > 其他分享 >Echarts 折线图y轴标签值太长时显示不全的解决办法

Echarts 折线图y轴标签值太长时显示不全的解决办法

时间:2023-06-08 09:35:12浏览次数:63  
标签:... 10000000 10000 值太长 yAxis value 折线图 true Echarts

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
    },
    ...
};

  

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    },    ...};

标签:...,10000000,10000,值太长,yAxis,value,折线图,true,Echarts
From: https://www.cnblogs.com/xieling2100/p/17465234.html

相关文章

  • Apache ECharts【用户层】
    一、介绍ApacheECharts是一款基于JavaScript的开源可视化图表库。提供直观、生动、可交互、可个性化定制的数据可视化图表。二、官网地址:https://echarts.apache.org/zh/index.html三、总结不管是哪种形式的图形,最本质的东西实际上是数据,它其实是......
  • echarts的折线图的鼠标滚轮移动不缩放
    dataZoom:[{type:'slider',maxValueSpan:5,//显示数据的条数(默认显示10个)show:true,yAxisIndex:[0],left:'93%',//滑动条位置start:100,//默认为0end:70,//默认为100orient:"vertical",filterMode:'empty',zoomLock:true,},{type:'inside......
  • echarts 曲线图组件
    样式如图使用:     <echartLine      ref="day30Echat"      :xAxis="timeList"      :xlist="xlist30Day"      :xlist2="xlist230Day"      :smooth="true"     ><......
  • 递归获取省市区的边界信息文件,用于echarts的map地图
    数据来源为阿里云,单个省市区信息可直接在这里面下载:http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5由于需求需要点击省份里面的城市就展示新的城市的地图,所以需要把所有省市区的边界信息json全部下载下来......
  • 关于echarts无法在mounted中渲染的问题
    最初实现:echarts图标被单独作为一个组件引入,通过传入数据来显示。<divclass="echart"><divclass="echarts-cont"><Charts:dataList="list":total="total"></Charts></div>echarts组件代码:exportdefault{name:"......
  • 记录--手把手教你Vue+ECharts+高德地图API实现天气预报数据可视化
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言所谓数据可视化,我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比,走向。对于数据可视化,很多互联网公司是很看重这一块的,包括大厂;就比如阿里的淘宝,双十一的时候往往就需要将消费者的一些数据通过图的......
  • echarts折线图颜色渐变设置
    constcolor1="rgb(229,53,59,0.05)"constcolor2="rgb(229,53,59,0)"series:[{data:[12,30,60,80,100,60,130,12,30,60,80,100,60,130],type:'line',......
  • echarts折线修改鼠标移动上去的内容
    tooltip:{trigger:'axis',backgroundColor:'#FFFFFF',//textStyle:{//color:'#E5353B',//fontSize:'16px'//},for......
  • ECharts点击横坐标事件实现超链接跳转
    需求:微博排行榜,横坐标展示出了微博对应的id,现在需要通过点击横坐标来实现跳转到对应的微博页面。设置横坐标中的triggerEvent属性为true;xAxis:{...triggerEvent:true,...},添加on点击事件。thisChart.on("click",function(params){window.location.......
  • Echarts——如何默认选中图表并显示tooltip
    前言参考资料实现预览地址内容很简单借助于dispatchAction来触发事件;import*asechartsfrom'echarts';varchartDom=document.getElementById('main');varmyChart=echarts.init(chartDom);varoption;option={tooltip:{trigger:'axis'......