echarts Y轴科学计数法对数显示第二版

最新推荐文章于 2023-12-05 16:27:27 发布
最新推荐文章于 2023-12-05 16:27:27 发布
阅读量274 收藏 1
点赞数 1
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang423712/article/details/133785564
版权

默认展示样式
在这里插入图片描述
全屏展示如下
在这里插入图片描述

全屏版相对于默认版变化不大，就是增加了一些信息，更改了时间间隔这些。

下面的代码是统一设置的，看截图可以看见分为1天，3天，7天。时间间隔分为1分钟和5分钟的。代码中list代表默认版本，screen代表全屏版本。interval 代表x轴时间文字的间隔，intervalTick 代表时间刻度标签的间隔，默认一个小时间隔一个刻度。x轴文字间隔4个小时。

const render = (data) => {
  let myChart = echarts.init(map.value);
  let color = [
    "#FF9912",
    "#4169E1",
    "#00FFFF",
    "#FF6100",
    "#40E0D0",
    "#A020F0",
    "#E3170D",
    "#03A89E",
  ];
  let { dataType,station } = data;
  let type = prop.type; //type 有list,screen ,类型不同展示的配置不同
  let interval, intervalTick;
  if (currentTime.value == "1day") {
    if (type == "list") {
      if (dataType == "1min") {
        interval = 60 * 4 - 1;
        intervalTick = 60 - 1;
      }
      if (dataType == "5min") {
        interval = 12 * 4 - 1;
        intervalTick = 12 - 1;
      }
    } else if (type == "screen") {
      if (dataType == "1min") {
        interval = 60 * 2 - 1;
        intervalTick = 60 - 1;
      }
      if (dataType == "5min") {
        interval = 12 * 2 - 1;
        intervalTick = 12 - 1;
      }
    }
  }
  if (currentTime.value == "3day") {
    if (type == "list") {
      if (dataType == "1min") {
        interval = 60 * 8 - 1;
        intervalTick = 60 * 4 - 1;
      }
      if (dataType == "5min") {
        interval = 12 * 8 - 1;
        intervalTick = 12 * 4 - 1;
      }
    } else if (type == "screen") {
      if (dataType == "1min") {
        interval = 60 * 6 - 1;
        intervalTick = 60 * 2 - 1;
      }
      if (dataType == "5min") {
        interval = 12 * 6 - 1;
        intervalTick = 12 * 2 - 1;
      }
    }
  }

  if (currentTime.value == "7day") {
    if (type == "list") {
      if (dataType == "1min") {
        interval = 60 * 16 - 1;
        intervalTick = 60 * 8 - 1;
      }
      if (dataType == "5min") {
        interval = 12 * 16 - 1;
        intervalTick = 12 * 8 - 1;
      }
    } else if (type == "screen") {
      if (dataType == "1min") {
        interval = 60 * 12 - 1;
        intervalTick = 60 * 4 - 1;
      }
      if (dataType == "5min") {
        interval = 12 * 12 - 1;
        intervalTick = 12 * 4 - 1;
      }
    }
  }
  
  let newData = data.data;
  let unit = newData[0].unit;
  let time = data.time;
  let endTime = time.length>0 ? time[0]:""
  let legend = newData.map((item) => {
    return item.name;
  });
  let series = newData.map((item, i) => {
    return {
      data: item.data.map((item, i) => {
        return [time[i], item];
      }),
      type: "line",
      symbol: "none",
      name: `${item.name}`,
      itemStyle: {
        color: color[i],
      },
      yAxisIndex: 0,
    };
  });
  // console.log(series);
  let option;

  if (type == "list") {
    option = {
      title: [
        {
          text: `GOES X-Ray Flux(${
            dataType == "1min" ? "1" : "5"
          }-minute data)(${station})`,
          left: "center",
          top: 10,
          textStyle: {
            fontSize: 14,
          },
        },

        {
          text: `Updated ${endTime} UTC`,
          left: 10,
          bottom: 0,
          textStyle: {
            fontSize: 12,
            color: "rgba(0,0,0,0.7)",
          },
        },
      ],
      tooltip: {
        //移动端展示方式
        trigger: "axis",
        transitionDuration: 1,
        confine: false,
        appendToBody: true,
        borderRadius: 4,
        borderWidth: 1,
        borderColor: "#fff",
        backgroundColor: "rgba(255,255,255,0.9)",
        appendBody: true,
        textStyle: {
          fontSize: 12,
          color: "#333",
        },
        formatter: function (params) {
          //数据单位格式化
          var relVal = ""; //x轴名称
          relVal += "<div style='min-width:200px'>";
          relVal += "<p style='font-size:16px;'>" + params[0].value[0] + "</p>";
          for (var i = 0, l = params.length; i < l; i++) {
            let unit = newData.filter((item) => {
              return item.name == params[i].seriesName;
            })[0].unit;
            let unitStr = !!unit ? `(${unit})` : "";
            if (params[i].value) {
              relVal +=
                "<p style='text-align: left;'>" +
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
                params[i].color +
                ";'>" +
                '<span  style="display:block;padding-left:15px;margin-top:-4px">' +
                params[i].seriesName +
                // unitStr +
                " : " +
                params[i].value[1] +
                "</span>" +
                "</span></p>";
            }
          }
          relVal += "</div>";
          return relVal;
        },
        enterable: true,
        axisPointer: {
          animation: false,
        },
        alwaysShowContent: false,
        hideDelay: 50,
      },

      grid: {
        top: "15%",
        left: "15%",
        right: "10%",
        bottom: "15%",
      },
      xAxis: [
        {
          type: "category",
          name: "",
          axisLine: {
            lineStyle: {
              color: "#888",
            },
          },
          axisTick: {
            interval: intervalTick,
          },
          axisLabel: {
            show: true,
            inside: false,
            formatter: function (value, i) {
              var date = new Date(value);
              let year = date.getFullYear();
              let month = date.getMonth() + 1;
              let day = date.getDate();
              let hour =
                date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
              let minute = date.getMinutes();
              if (hour == 0) {
                return `${hour}:00\n${year}-${month}-${day}`;
              } else if (hour > 0 && hour <= 23 && minute <= 30) {
                return hour + ":00";
              } else if (hour > 23 && minute > 30) {
                return "24" + ":00";
              }
            },
            interval,
          },
        },
      ],
      yAxis: [
        {
          type: "log",
          name: unit,
          nameLocation: "center",
          nameGap: "50",
          nameTextStyle: {
            fontSize: 14,
            color: "rgba(0,0,0,0.7)",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#888",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#ddd",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
           
            formatter: function (value) {
              if (value < 9.99e-12) {
                return "{name|10}{time1|-12}";
              } else if (value < 9.99e-11 && value >= 9.99e-12) {
                return "{name|10}{time1|-11}";
              } else if (value < 9.99e-10 && value >= 9.99e-11) {
                return "{name|10}{time1|-10}";
              } else if (value < 9.99e-9 && value >= 9.99e-10) {
                return "{name|10}{time1|-9}";
              } else if (value < 9.99e-8 && value >= 9.99e-9) {
                return "{name|10}{time1|-8}";
              } else if (value < 9.99e-7 && value >= 9.99e-8) {
                return "{name|10}{time1|-7}";
              } else if (value < 9.99e-6 && value >= 9.99e-7) {
                return "{name|10}{time1|-6}";
              } else if (value < 9.99e-5 && value >= 9.99e-6) {
                return "{name|10}{time1|-5}";
              } else if (value < 9.99e-4 && value >= 9.99e-5) {
                return "{name|10}{time1|-4}";
              } else if (value < 9.99e-3 && value >= 9.99e-4) {
                return "{name|10}{time1|-3}";
              } else if (value < 9.99e-2 && value >= 9.99e-3) {
                return "{name|10}{time1|-2}";
              } else if (value < 9.99e-1 && value >= 9.99e-2) {
                return "{name|10}{time1|-1}";
              }
            },
            rich: {
              name: {
                fontSize: 16,
                color: "#999",
                height: 26,
              },
              time1: {
                fontSize: 12,
                color: "#999",
                verticalAlign: "top",
                padding: [0, 0, 0, 3],
              },
            },
          },
          gridIndex: 0,
          // min: 9e-12,
          // max: 9e-5,
          max: function (value) {
            let num = value.max.toExponential().toString();
            let str = num.substr(num.indexOf("e") + 1);
            let n = str * 1 + 1;
            return `9.99e${n}`;
          },
          min: function (value) {
            let num = value.min.toExponential().toString();
            let str = num.substr(num.indexOf("e") + 1);
            let n = str * 1 - 2;
            return `9.99e${n}`;
          },

          splitNumber: 10,
          scale: true,
          logBase: 10,
        },
        {
          type: "value",
          name: "Xray Flare Class",
          nameLocation: "center",
          nameGap: 25,
          nameRotate: -90,
          nameTextStyle: {
            fontSize: 14,
            color: "#000",
          },
          position: "right",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ddd",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#ddd",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
          },
        },
      ],
      series,
      hoverAnimation: false,
      showSymbol: false,
      animation: false,
    };
  } else if (type == "screen") {
    option = {
      title: [
        {
          text: `GOES X-Ray Flux(${
            dataType == "1min" ? "1" : "5"
          }-minute data)(${station})`,
          left: "center",
          top: 10,
          textStyle: {
            fontSize: 18,
          },
        },
        {
          text: "Universal Time",
          left: "center",
          bottom: "15%",
          textStyle: {
            fontSize: 16,
            color: "#555",
          },
        },
        {
          text: "National Space Science Data Center",
          right: 10,
          bottom: 0,
          textStyle: {
            fontSize: 14,
            color: "#000",
          },
        },
        {
          text: `Updated ${endTime} UTC`,
          left: 10,
          bottom: 0,
          textStyle: {
            fontSize: 14,
            color: "#000",
          },
        },
      ],
      tooltip: {
        //移动端展示方式
        trigger: "axis",
        transitionDuration: 1,
        confine: false,
        appendToBody: true,
        borderRadius: 4,
        borderWidth: 1,
        borderColor: "#fff",
        backgroundColor: "rgba(255,255,255,0.9)",
        appendBody: true,
        textStyle: {
          fontSize: 12,
          color: "#333",
        },
        formatter: function (params) {
          //数据单位格式化
          var relVal = ""; //x轴名称
          relVal += "<div style='min-width:200px'>";
          relVal += "<p style='font-size:16px;'>" + params[0].value[0] + "</p>";
          for (var i = 0, l = params.length; i < l; i++) {
            let unit = newData.filter((item) => {
              return item.name == params[i].seriesName;
            })[0].unit;
            let unitStr = !!unit ? `(${unit})` : "";
            if (params[i].value) {
              relVal +=
                "<p style='text-align: left;'>" +
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
                params[i].color +
                ";'>" +
                '<span  style="display:block;padding-left:15px;margin-top:-4px">' +
                params[i].seriesName +
                // unitStr +
                " : " +
                params[i].value[1] +
                "</span>" +
                "</span></p>";
            }
          }
          relVal += "</div>";
          return relVal;
        },
        enterable: true,
        axisPointer: {
          animation: false,
        },
        alwaysShowContent: false,
        hideDelay: 50,
      },
      legend: {
        data: legend,
        left: "center",
        bottom: "5%",
        textStyle: {
          fontSize: 14,
        },
        width: "50%",
      },
      grid: {
        top: "8%",
        left: "15%",
        right: "10%",
        bottom: "25%",
      },
      xAxis: [
        {
          type: "category",
          name: "",
          axisLine: {
            lineStyle: {
              color: "#888",
            },
          },
          axisTick: {
            interval: intervalTick,
          },
          axisLabel: {
            show: true,
            formatter: function (value, i) {
              var date = new Date(value);
              let year = date.getFullYear();
              let month = date.getMonth() + 1;
              let day = date.getDate();
              let hour =
                date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
              let minute = date.getMinutes();
              if (hour == 0) {
                return `${hour}:00\n${year}-${month}-${day}`;
              } else if (hour > 0 && hour <= 23 && minute <= 30) {
                return hour + ":00";
              } else if (hour > 23 && minute > 30) {
                return "24" + ":00";
              }
            },
            interval,
          },
        },
      ],
      yAxis: [
        {
          type: "log",
          name: unit,
          nameLocation: "center",
          nameGap: "50",
          nameTextStyle: {
            fontSize: 14,
            color: "#000",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#888",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#ddd",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: function (value) {
              if (value < 9.99e-12) {
                return "{name|10}{time1|-12}";
              } else if (value < 9.99e-11 && value >= 9.99e-12) {
                return "{name|10}{time1|-11}";
              } else if (value < 9.99e-10 && value >= 9.99e-11) {
                return "{name|10}{time1|-10}";
              } else if (value < 9.99e-9 && value >= 9.99e-10) {
                return "{name|10}{time1|-9}";
              } else if (value < 9.99e-8 && value >= 9.99e-9) {
                return "{name|10}{time1|-8}";
              } else if (value < 9.99e-7 && value >= 9.99e-8) {
                return "{name|10}{time1|-7}";
              } else if (value < 9.99e-6 && value >= 9.99e-7) {
                return "{name|10}{time1|-6}";
              } else if (value < 9.99e-5 && value >= 9.99e-6) {
                return "{name|10}{time1|-5}";
              } else if (value < 9.99e-4 && value >= 9.99e-5) {
                return "{name|10}{time1|-4}";
              } else if (value < 9.99e-3 && value >= 9.99e-4) {
                return "{name|10}{time1|-3}";
              } else if (value < 9.99e-2 && value >= 9.99e-3) {
                return "{name|10}{time1|-2}";
              } else if (value < 9.99e-1 && value >= 9.99e-2) {
                return "{name|10}{time1|-1}";
              }
            },
            rich: {
              name: {
                fontSize: 16,
                color: "#999",
                height: 26,
              },
              time1: {
                fontSize: 12,
                color: "#999",
                verticalAlign: "top",
                padding: [0, 0, 0, 3],
              },
            },
          },
          gridIndex: 0,
          // max: 9e-5,
          // min: 9e-12,
          max: function (value) {
            let num = value.max.toExponential().toString();
            let str = num.substr(num.indexOf("e") + 1);
            let n = str * 1 + 1;
            return `9.99e${n}`;
          },
          min: function (value) {
            let num = value.min.toExponential().toString();
            let str = num.substr(num.indexOf("e") + 1);
            let n = str * 1 - 2;
            return `9.99e${n}`;
          },

          splitNumber: 10,
          scale: true,
          logBase: 10,
        },
        {
          type: "value",
          name: "Xray Flare Class",
          nameLocation: "center",
          nameGap: 30,
          nameRotate: -90,
          nameTextStyle: {
            fontSize: 14,
            color: "#000",
          },
          position: "right",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ddd",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#ddd",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
          },
        },
      ],
      series,
      hoverAnimation: false,
      showSymbol: false,
      animation: false,
    };
  }
  myChart.setOption(option, true);
  const erd = elementResizeDetectorMaker();
  erd.listenTo(map.value, function (element) {
    myChart.resize();
  });
};

显示科学计数法重点在下面这个地方
在这里插入图片描述

yang423712
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts纵坐标使用科学计数法表示
weixin_30834783的博客
04-01 1326
最近做项目使用echart画图，发现纵坐标的刻度太大或太小的情况，导致页面十分难看，甚至出现遮挡的情况，所以想办法用科学计数法表示 代码如下： var option = { title: Echart.title, legend: Echart.legend, ...
Echarts坐标轴如何实现log对数轴
最新发布
sunnyjingqi的博客
01-19 868
最近开发一个loss曲线图，x轴和y轴都要求用log对数轴，刚开发的时候x轴用的类目轴（category）图表，设置axisLabel返回值，强制转化成对数，以及最小值最大值等，实现x轴刻度间隔为10的指数，但这样series的data数据渲染总是感觉很奇怪。当把x轴设置成log时，图标走线也是不容客观，很多数据也没见了，像是数据被echarts过滤掉似的，最后几经周折终于在网上查到了原因。
echarts y轴坐标成对数增加
乖乖康少
05-15 9374
    option = {     xAxis: {         type: 'category',         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']     },     yAxis: {         type: 'log',         min:1,         logBase:3     ...
echarts 坐标轴科学计数法展示
Ronin1210的博客
09-26 141
echarts 坐标轴科学计数法展示 rich的用法 指数 幂
Echarts图中y轴数据太小转为科学计数法显示
Porhowlyuu的博客
10-29 1645
Echarts图中y轴数据太小转为科学计数法显示 tooltip如果不同步，可以把formatter中的function拿出去写成一个方法，series中的数据遍历输进去然后转成科学计数法的数据赋值 yAxis:{ type:Echart.yAxis.type, name:Echart.yAxis.name, nameGap:Echart.yAxis.nameGap, nameLocation:Echart.yAxis.nameLocation, a
博客摘录「 Echarts图中y轴数据太小转为科学计数法显示」2023年5月7日
weixin_43007955的博客
05-07 206
var num1=0;var num2=0;var t1 = 1;else break;} }},
echarts 对数坐标轴
qq_30351747的博客
11-30 711
echarts 对数坐标轴
Echarts
每天都要努力学习哦~~
03-13 1673
数据可视化 数据可视化主要目的,借助于图形化手段清晰有效的传达与沟通信息 数据可视化把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理 Echarts简介 常见的数据可视化库： - D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) - ECharts.js 百度出品的一个开源 Javascript 数据可视化库 - Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用 - AntV 蚂蚁金服...
Echarts双对数（log）轴实现
weixin_54661092的博客
03-16 4598
项目需求 Echarts实现X轴Y轴均为对数轴。 问题描述 之前使用Echarts实现过一些类目轴（category）图表，第一次接触对数轴，查了半天文档实现如下 理想实现效果是 原因分析 Echarts中xAxis使用log轴之后，data属性不可使用，所以导致yAxis，xAxis使用统一数据源series下的data，才会形成呈直线上升的问题。 解决方案 删除xAxis中的data属性，在series中data配置二维数组。如：[[x值,y值],[x值,y值]] 因为数据全部通过计算得到，所
echarts坐标轴刻度值使用科学计数法表示
我总是词不达意的博客
08-18 658
echarts坐标轴科学计数法 echarts纵坐标使用科学计数法表示 解决echarts纵坐标数字太长，导致遮挡的问题 echarts纵坐标改为科学计数法 echarts Y轴科学计数法显示 echarts纵坐标刻度值使用科学计数法
实现ECharts双Y轴左右刻度线一致的例子
09-16
在ECharts图表中，双Y轴的设置是一个常见的需求，特别是在需要展示两个不同尺度的数据系列时。例如，一边表示人数，另一边表示人次，这两个数据的数值范围可能相差很大，因此需要独立的Y轴来保证数据的可读性。本文...
echarts x轴文字过长悬浮显示.rar
08-02
x轴文字显示过长会影响柱状图显示不全，需要对文字进行处理，为了美观，限定文字只显示在一行，文字长度为4；当长度大于4时将第四个文字替换为"..."；当鼠标悬浮在"..."时，显示全部内容，其它长度为4的文字正常显示...
vue+echarts完整显示x轴的示例以及完整案例.zip
02-15
在使用ECharts进行数据可视化时，有时会遇到X轴（分类轴）的数据显示不完全的问题。这通常是由于数据量过多或者X轴区域宽度有限导致的。`vue+echarts`结合使用时，同样可能遇到此类问题。本示例提供了一个完整的解决...
echarts纵坐标改为科学计数法-一些方法:Math.abs,indexOf,replace,parseFloat,Math.pow,toFixed,parseInt,toString
qq_44774831的博客
06-10 2113
echarts纵坐标改为科学计数法先贴代码echarts中坐标配置具体分析知识点提取Math.abs(value)indexOf()replace()parseFloat()Math.pow(底数,几次方).toFixed()方法扩展--- 一些数值转换函数Number()parseInt()详解parseFloat().toString() 先贴代码 yAxis: { type: 'value', // 科学记数法 axisLabel: { formatter: function (v
echarts Y轴科学计数法对数显示、生成X轴对应时间
yang423712的博客
05-25 856
科学计数法对数显示Y轴，x轴固定24小时
echarts画对数坐标坐标[-0.2, 0.6],Y轴不等刻度问题
cxd1314520的博客
12-23 5005
使用markLine实现y轴刻度不等分 option = { xAxis: { type: 'category', data: ['1', '2', '3', '4', '5', '6', '7','8','9'] }, yAxis: { type: 'value', "axisTick":{ //...
echarts中y轴（yAxis）& x轴（xAxis），配置参数详情的参数配置项释义
Jana Jing的分享
12-05 6809
echarts中y轴（yAxis）的参数配置项释义
Echarts：全解注释
htong521的博客
07-13 1040
index.html文件 包含了Echarts所必须的链接文件，图表的使用方法。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <!-- 为ECh...
pyplot y轴科学计数法怎么取消
05-31
你可以使用 `pyplot.ticklabel_format()` 函数来取消 y 轴的科学计数法，具体来说，你可以将 `style` 参数设置为 `'plain'`，将 `axis` 参数设置为 `'y'`，将 `useOffset` 参数设置为 `False`，然后调用该函数即可。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值