Echarts图表数据动态单位显示

本文介绍如何在Echarts中动态处理大量数据的单位显示。在构建图表Option时,保持原始数据,避免单位换算影响坐标轴。通过在tooltip中进行单位换算,确保动态显示正确。文中提供了一个具体的案例,展示如何混合显示折线图和柱状图,并根据数据值动态调整单位(如G, M, K或byte)。" 85795342,8256745,Js树型控件Dtree深入解析与使用技巧,"['前端开发', 'JavaScript库', 'UI组件', '树结构']
摘要由CSDN通过智能技术生成

1,这次要说明的主要问题是:对于数据量很大的时候比如:2132984738432,在显示的时候动态的进行换算。这个操作的基本流程如下:


首先,基本的图表操作与之前的一致,然后需要进行的操作就是在通过ajax获取数据之后,动态进行Option的构造的时候,严重注意装数据的时候要装原始数据,在这个地方不要进行单位换算,因为如果你的图有坐标轴的话,坐标轴的构建需要依赖数据,以及单位。此时就会与tooltip的动态发生冲突,会导致其中的一个单位无法实现动态,所以,装数据的时候放原始数据,在显示的地方在进行单位换算,这样就不会导致不同部分互相影响


下面来一个实际的案例吧:

下面的这个方法就是一个构造折线图与柱状图混合的Option的方法,参数Sj即为后台传递的数据

makeBarOption:function(Sj){


var uparry = [];
var downarry = [];
var count = [];
var xname = [];



for(x in Sj.rows){
xname.push(Sj.rows[x].apname);
uparry.push(Sj.rows[x].upcount);
downarry.push(Sj.rows[x].downcount);
count.push(Sj.rows[x].count);
}



var option = {
   tooltip: {
       trigger: 'axis',
       formatter:function(params){
       
        var msg=params[0].name+' : <br /> ';
       

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值