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(' ');
      },
    },

总结

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

相关文章

  • selenium drag_and_drop不生效的解决办法

    selenium drag_and_drop不生效的解决办法

    本文主要介绍了selenium drag_and_drop不生效的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • pytorch tensor int型除法出现的问题

    pytorch tensor int型除法出现的问题

    这篇文章主要介绍了pytorch tensor int型除法出现的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-04-04
  • 在python中的socket模块使用代理实例

    在python中的socket模块使用代理实例

    这篇文章主要介绍了在python中的socket模块使用代理实例,调用socks.setdefaultproxy即可实现,需要的朋友可以参考下
    2014-05-05
  • python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析

    python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析

    这篇文章主要介绍了python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • python正则表达式(re模块)的使用详解

    python正则表达式(re模块)的使用详解

    正则表达式是用来匹配字符串非常强大的工具,在其他编程语言中同样有正则表达式的概念,Python同样不例外,下面这篇文章主要给大家介绍了关于python正则表达式(re模块)使用的相关资料,需要的朋友可以参考下
    2022-03-03
  • Python读取指定日期邮件的实例

    Python读取指定日期邮件的实例

    今天小编就为大家分享一篇Python读取指定日期邮件的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-02-02
  • Android 兼容性问题:java.lang.UnsupportedOperationException解决办法

    Android 兼容性问题:java.lang.UnsupportedOperationException解决办法

    这篇文章主要介绍了Android 兼容性问题:java.lang.UnsupportedOperationException解决办法的相关资料,需要的朋友可以参考下
    2017-03-03
  • Python解压 rar、zip、tar文件的方法

    Python解压 rar、zip、tar文件的方法

    这篇文章主要介绍了Python解压 rar、zip、tar文件的方法,文中通过实例代码给大家介绍了python 解压文件压缩文件的方法,需要的朋友参考下吧
    2019-11-11
  • python学习之编写查询ip程序

    python学习之编写查询ip程序

    这篇文章主要介绍了python学习之编写查询ip程序 ,需要的朋友可以参考下
    2016-02-02
  • 利用python实现你说我猜游戏的完整实例

    利用python实现你说我猜游戏的完整实例

    这篇文章主要给大家介绍了关于如何利用python实现你说我猜游戏的相关资料,用到的都是一些简单的基础的python语句,适合刚入门的小白,可以尝试跟着一起敲一下,感受一下编程中的乐趣,需要的朋友可以参考下
    2022-05-05

最新评论