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中用户输入与while循环详情

    Python中用户输入与while循环详情

    这篇文章主要介绍了Python中用户输入与while循环详情,,包括如何接收用户输入并进行处理,在程序满足一定的条件时让程序一直运行,通过获取用户输入并学会控制程序在用户想要结束时退出循环,即可编写出交互式程序,下文详细内容介绍,需要的朋友可以参考一下
    2022-03-03
  • Python 使用pip在windows命令行中安装HDF reader包的操作方法

    Python 使用pip在windows命令行中安装HDF reader包的操作方法

    HDF reader包是一个常用来将.mat类型数据导入到python在这里插入代码片中使用的包,非常好用,今天介绍一下,如何在命令行中安装这个包,需要的朋友可以参考下
    2022-12-12
  • python编程Flask框架简单使用教程

    python编程Flask框架简单使用教程

    这篇文章主要为大家介绍了python编程中Flask框架简单使用教程,有需要的朋友可以借鉴参考下希望能够有所帮助,祝大家多多进步早日升职加薪
    2021-11-11
  • Python使用chrome配置selenium操作详解

    Python使用chrome配置selenium操作详解

    这篇文章主要为大家详细介绍了chrome配置selenium操作的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • Django集成celery发送异步邮件实例

    Django集成celery发送异步邮件实例

    今天小编就为大家分享一篇Django集成celery发送异步邮件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-12-12
  • 分析python并发网络通信模型

    分析python并发网络通信模型

    随着互联网和物联网的高速发展,使用网络的人数和电子设备的数量急剧增长,其也对互联网后台服务程序提出了更高的性能和并发要求。本文主要分析比较了一些模型的优缺点,并且用python来实现
    2021-06-06
  • python使用pymongo操作mongo的完整步骤

    python使用pymongo操作mongo的完整步骤

    这篇文章主要给大家介绍了关于python使用pymongo操作mongo的完整步骤,文中通过示例代码介绍的非常详细,对大家学习或者使用python具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • 68行Python代码实现带难度升级的贪吃蛇

    68行Python代码实现带难度升级的贪吃蛇

    本文主要介绍了Python代码实现带难度升级的贪吃蛇,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • python paramiko利用sftp上传目录到远程的实例

    python paramiko利用sftp上传目录到远程的实例

    今天小编就为大家分享一篇python paramiko利用sftp上传目录到远程的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-01-01
  • python接口自动化(十六)--参数关联接口后传(详解)

    python接口自动化(十六)--参数关联接口后传(详解)

    这篇文章主要介绍了python接口自动化参数关联接口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论