echarts折线图的每个折点都显示数值的实现方式

 更新时间:2023年10月27日 14:32:48   作者:彭世瑜  
这篇文章主要介绍了echarts折线图的每个折点都显示数值的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

echarts折线图的每个折点都显示数值

在 series中添加

itemStyle : { normal: {label : {show: true}}}

在django中使用echarts折线图的完整代码

<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;

result = eval({{ chart_data | safe }});

option = {
    title: {
        text: result.title,
        x: 'center',
        show : true
    },
    tooltip: {
        formatter: '{b}\n{c}'
     },
    xAxis: {
        type: 'category',
        data: result.feature
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: result.data,
        type: 'line',
        // 显示数值
        itemStyle : { normal: {label : {show: true}}}
    }]

};


if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
</script>

echarts折线图数值后添加单位

//温度、湿度、风速、风向、气压、照度单位
let getUnitType = (type,value) => {
  type = Number(type);
  var unit = '';
  switch (type) {
    case 209033:
      unit = '℃';
      break;
    case 209034:
      unit = '%';
      break;
    case 209035:
      unit = 'm/s';
      break;
    case 209036:
      unit = getWindDirection(value);
      break;
    case 209037:
      unit = 'HPa';
      break;
    case 200088:
      unit = 'Lux';
      break;
  }
  return unit;
};

法1:

    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        var relVal = params[0].name
        for (var i = 0, l = params.length; i < l; i++) {
          relVal += '<br/>' + params[i].marker + params[i].value + getUnitType(pollutionTypeMap1New[pltKey],params[i].value)
        }
        return relVal
      }
    },

法2:

    tooltip: {
      trigger: 'axis',
      formatter: function (obj) {
        let arr = obj.map((item, i) => {
          return (
            item.marker +
            item.value +
            '(' +
            getUnitType(pollutionTypeMap1New[pltKey],item.value) +
            ')' +
            '<br>'
          );
        });
        return obj[0].name + '<br>' + arr.join(' ');
      },
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Python中经常使用的代码片段

    Python中经常使用的代码片段

    大家好,本篇文章主要讲的是Python中经常使用的代码片段,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下
    2022-01-01
  • Python实现图像处理ORB算法

    Python实现图像处理ORB算法

    ORB(Oriented FAST and Rotated BRIEF)算法是一种高效的特征检测和描述符,它在图像匹配中有广泛的应用,下面我们就来了解一下ORB算法的原理与实现吧
    2023-12-12
  • Python 实现文件读写、坐标寻址、查找替换功能

    Python 实现文件读写、坐标寻址、查找替换功能

    这篇文章主要介绍了Python 实现文件读写、坐标寻址、查找替换功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2019-09-09
  • Flask应用中执行指定JavaScript脚本的6种方法

    Flask应用中执行指定JavaScript脚本的6种方法

    在 Flask 应用中执行指定 JavaScript 脚本,需结合后端路由,模板渲染及前后端交互技术,本文主要介绍了六种核心方法及其实现细节,大家可以根据需要进行选择
    2025-06-06
  • python中parser.add_argument()用法实例(命令行选项、参数和子命令解析器)

    python中parser.add_argument()用法实例(命令行选项、参数和子命令解析器)

    最近开始读论文代码了,遇到一个名字叫option的py文件,打开一看清一色的parser.add_argument(),看得是一脸懵逼,这篇文章主要给大家介绍了关于python中parser.add_argument()用法的相关资料,需要的朋友可以参考下
    2022-03-03
  • Django零基础入门之自定义标签及模板中的使用

    Django零基础入门之自定义标签及模板中的使用

    这篇文章主要介绍了Django零基础入门之自定义标签及模板中的使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-09
  • python实现获取Ip归属地等信息

    python实现获取Ip归属地等信息

    本文给大家简单介绍了下如何使用Python实现获取IP归属地信息的方法和代码,非常的实用,有需要的小伙伴可以参考下
    2016-08-08
  • 用Python编写简单的gRPC服务的详细过程

    用Python编写简单的gRPC服务的详细过程

    gRPC 是可以在任何环境中运行的现代开源高性能 RPC 框架。接下来通过本文给大家介绍用Python编写简单的gRPC服务的详细过程,感兴趣的朋友一起看看吧
    2021-07-07
  • Numpy中的shape、reshape函数的区别

    Numpy中的shape、reshape函数的区别

    本文主要介绍了Numpy中的shape、reshape函数的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Python实战之ATM取款机的实现

    Python实战之ATM取款机的实现

    这篇文章主要为大家详细介绍了如何利用Python语言模拟实现ATM取款机功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2022-09-09

最新评论