echarts图表y坐标轴单位

1、坐标轴方法可以集合在一个文件内，用export default导出，便于解决多个图表的坐标轴单位不同

export default {

//单位k

tranNumber(num) {

var numStr = num.toString();

// 三位数以内直接返回

if (numStr.length < 4) {

return numStr;

}

//大于3位数加k

else if (numStr.length > 3) {

var decimal = numStr.substring(numStr.length - 4, numStr.length - 4);

return parseFloat((num / 1000) + '.' + decimal) + 'k';

}

//无单位

Kone_tranNumber(num) {

var numStr = num.toString();

// 三位数以内直接返回

if (numStr.length < 4) {

return numStr;

}

//大于3位数

else if (numStr.length > 3) {

var decimal = numStr.substring(numStr.length - 4, numStr.length - 4);

let number = parseFloat(parseInt(num / 1000) + '.' + decimal);

}

//单位 MiB GiB

Two_tranNumber(num) {

var numStr = num.toString();

// 三位数以内+M

if (numStr.length < 4) {

return numStr + 'M';

}

//大于3位数加G

else if (numStr.length > 4) {

var decimal = numStr.substring(numStr.length - 4, numStr.length - 4);

let number = parseFloat((num / 1000000) + '.' + decimal)

return number < 1000 ? number + 'MiB' : String(Number(number) / 1000) + 'G';

}

2、在对应的echarts图表中使用

1）、首先引入方法文件， import yAxisOne from "../../../utils/yAxis"; 此处文件夹路径为我自己的路径

在echart中有个yaxis属性，可以如下使用坐标轴方法

yAxis: {

type: "value",

axisLabel: {

formatter: yAxisOne.tranNumber,

color: "#1e1e1e",

echarts图表y坐标轴单位相关推荐

echarts图表y轴加文字或者单位
//配置 yAxis: {type: 'value',axisLabel:{formatter:'{value}kg'}}
echarts图表y轴数据设置为固定值，等间距，如何自定义echarts图表y轴数据
如图将Y轴设置为固定的0% 20% ----100% 话不多说直接上代码 yAxis: {type: 'value',max: 100,//最大值min: 0,//最小值interval:20, ...
Echarts 柱状图调整 y 轴单位标题与图表之间的距离
Echarts 柱状图调整 y 轴单位标题与图表之间的距离在我们绘制图标的时候,有时 y 轴单位标题的位置距离图标太近,影响美观,如图所示: 我们想把元离图表远一些,怎么操作? option = ...
设置echarts图表上Y轴的单位
设置echarts图表上Y轴的单位代码如下: yAxis: [{type: 'value',axisLabel: {show: true,interval: 'auto',formatter: '{ ...
echart 折线图设置y轴单位_如何让echarts中y轴的单位位于数值的右上角
请问:如何让echarts中y轴的单位位于数值的右上角 1.创建折线图的数据区(包括年份和数据). 2.仅选择数据区创建折线图(插入选项卡/图表工具组/折线图). 3.得到的折线图x坐标不满足要求,在 ...
Echarts 图表一些细节设置 lenged 双Y轴等
echarts 示例 Echarts图表效果图(Make A Pie替代) Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区.平时做Echart ...
Echarts图表x轴y轴刻度值过长时显示不全(超过一千显示...k)
在使用 Echarts 图表的过程中,有时候数值会很大导致该轴的刻度显示不全,如图: 这个时候就需要将该轴的刻度值除以 1000 或 10000,再加一个单位来缩短它的长度: Echarts官网中为我 ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
echarts图表x，y轴的设置
xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [{type : 'category', // type:坐标轴类型.// [ default: 'category' ]/*可 ...

echarts图表y坐标轴单位

echarts图表y坐标轴单位相关推荐

最新文章

热门文章