在上一篇文章 Echarts 多曲线“断点”问题解决方法 中说到了Angular 项目中要使用 Echarts 的方法。

说明了自己解决当“每一条曲线的横坐标不相同”时,在各条曲线上,它们的值采用数组类型,也就是 series.data[i] (i 表示该条曲线的索引)的值采用数组类型,第一个值对应横坐标的某一个值,第二个值是纵坐标的值。

最近在项目中遇到了另外一个问题:

1. 在图表中要显示多条曲线

2. 图例的个数和曲线的条数不同

对于图例的值,也就是 legend["data"] 的值,是一个数组,它如果不设置的话,将从 series.name 中获取。(建议不设置,一来减少代码量,更容易维护;二来能够保证图例名称和曲线名称一致)

首先说明解决方法(以一条曲线两个图例为例):

1. 获取到全部图例,作为横坐标的数据。也就是 legend.data 的值。如 legend: { data:['邮件营销', '联盟广告'] }

2. 在没有值的曲线上(假设第二条曲线),它们的值采用使用空数组,也就是 series[1].data = [];

下面举例说明:

  1. option = {
  2. title: {
  3. text: '折线图堆叠'
  4. },
  5. tooltip: {
  6. trigger: 'axis'
  7. },
  8. legend: {
  9. data:['邮件营销','联盟广告'] // 这里有两个图例
  10. },
  11. grid: {
  12. left: '3%',
  13. right: '4%',
  14. bottom: '3%',
  15. containLabel: true
  16. },
  17. toolbox: {
  18. feature: {
  19. saveAsImage: {}
  20. }
  21. },
  22. xAxis: {
  23. type: 'category',
  24. boundaryGap: false,
  25. data: ['周一','周二','周三','周四','周五','周六','周日']
  26. },
  27. yAxis: {
  28. type: 'value'
  29. },
  30. series: [ // 这里设置两条曲线,对于没有值的曲线,data 属性的值设置为空数组,并且 name 和 legend["data"] 的值对应
  31. {
  32. name:'邮件营销',
  33. smooth: true,
  34. type:'line',
  35. stack: '总量',
  36. data:[120, 132, 101, 134, 90, 230, 210]
  37. },
  38. {
  39. name:'联盟广告',
  40. smooth: true,
  41. type:'line',
  42. stack: '总量',
  43. data:[]
  44. }
  45. ]
  46. };

这时就绘制出了曲线个数和图例个数不同的曲线

延伸:

如果不设置 legend.data 的值,曲线会有什么变化?

由于上面 legend 也没有设置其它属性,那么它就变为空对象  legend: {}

  1. option = {
  2. title: {
  3. text: '折线图堆叠'
  4. },
  5. tooltip: {
  6. trigger: 'axis'
  7. },
  8. legend: { // 和上面代码比较,只有这里有区别
  9. },
  10. grid: {
  11. left: '3%',
  12. right: '4%',
  13. bottom: '3%',
  14. containLabel: true
  15. },
  16. toolbox: {
  17. feature: {
  18. saveAsImage: {}
  19. }
  20. },
  21. xAxis: {
  22. type: 'category',
  23. boundaryGap: false,
  24. data: ['周一','周二','周三','周四','周五','周六','周日']
  25. },
  26. yAxis: {
  27. type: 'value'
  28. },
  29. series: [
  30. {
  31. name:'邮件营销',
  32. smooth: true,
  33. type:'line',
  34. stack: '总量',
  35. data:[120, 132, 101, 134, 90, 230, 210]
  36. },
  37. {
  38. name:'联盟广告',
  39. smooth: true,
  40. type:'line',
  41. stack: '总量',
  42. data:[]
  43. }
  44. ]
  45. };

不过,绘制成的曲线的结果没有变化。

legend.data[i] 官宣如下:

legend.data[i]

如果 data 没有被指定,会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。如饼图和漏斗图等会取自 series.data 中的 name。

Echarts 曲线数少于图例数解决方法的更多相关文章

  1. 【Visual C++】Windows GDI贴图闪烁解决方法

    一般的windows 复杂的界面需要使用多层窗口而且要用贴图来美化,所以不可避免在窗口移动或者改变大小的时候出现闪烁. 先来谈谈闪烁产生的原因 原因一:如果熟悉显卡原理的话,调用GDI函数向屏幕输出的 ...

  2. 使用 amcharts 和 highcharts 绘制多曲线时间趋势图的通用方法

    工作中用到, 这里分享一下. 可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图. 当然, 对图形没有过多装饰, 可以参考 API 文档: highcharts:   ...

  3. MySQL 句柄数占用过多的解决方法

    在Windows下安装MySQL ,用了官方的配置向导生成了my.ini,本以为很安稳了,谁知十多个小时过去之后,系统响应非常慢,看资源管理器的性能卡,发现句柄数竟然达到了10万!怪不得无论使用什么程 ...

  4. ORA-01795: 列表中的最大表达式数为1000的解决方法

    IN中的数据量不能超过1000条. 解决方案:把条件分成多个少于1000的IN即: DELETEFROMT_MM_SECTION_SITE_UPDATEWHERE T.T_MM_SECTION_SL_ ...

  5. delphi xe4 程序添加管理员权限要求后不能调试的解决方法

    环境: win7 企业版 xe4 问题: 把项目设置为需要管理员权限才能运行后,调试会弹出一个提示框,如图:

  6. 无法解决 equal to 运算中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_90_CI_AI" 之间的排序规则冲突。的解决方法

    在SQL SERVICE的查询的时候遇到了“无法解决 equal to 运算中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_90_CI_AI&q ...

  7. PowerDesigner 工具面板 association,inheritance,association link 不可用 解决方法

    PowerDesigner 画E-R 图,关联,继承及关联实体连接不可用. 如图: 解决方法: tools->modeloptions->Notation 改为"E/R+Meri ...

  8. 安装gem invalid date format in specification错误的解决方法

    别的不说,报错信息直接贴图: 解决方法: 1.找到你环境目录下的spec,例如:D:\Ruby187\lib\ruby\gems\1.8\specifications. 2.找到引起错误文件的gems ...

  9. 使用PDO连接数据库 查询和插入乱码的解决方法

    问题:PDO连接数据库后,查询和插入中文到数据库,出现乱码,如图: 解决方法: 法1: try{ $opts_values = array(PDO::MYSQL_ATTR_INIT_COMMAND=& ...

随机推荐

  1. GetHashCode方法学习

    GetHashCode方法我的理解是做两个对象的比较,每个对象,不管是值类型还是应用类型都提供这个基本函数,都可以去重写它.GetHashTable通常用于HashTable.List<> ...

  2. ASP.NET 关于GridView 表格重复列合并

    这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下GridView 和 Repeater 关于重复数据合并的方法. 效果图如下 : GridView : 前台代码 : ...

  3. 远程桌面如何向远程的计算机发送ctrl+alt+del

    远程桌面如何向远程的计算机发送ctrl+alt+del ? 可以使用 ctrl+alt+end 组合键代替 ctrl+alt+del 组合键

  4. Session和Cookie的区别与联系

    一. 概念理解 你可能有留意到当你浏览网页时,会有一些推送消息,大多数是你最近留意过的同类东西,比如你想买桌子,上淘宝搜了一下,结果连着几天会有各种各样的桌子的链接.这是因为 你浏览某个网页的时候,W ...

  5. Q:链表的倒数第K个元素

    问题:如何得到链表中的倒数第k个元素?   一种简单的思路是遍历链表一遍,并统计出链表中节点的数目,然后计算出倒数第k个元素到链表头节点的元素的距离,然后得到对应的结果.但是,我们能否有一种更加简便的 ...

  6. jQuery基础(样式篇,DOM对象,选择器,属性样式)

      1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真 ...

  7. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

  8. Web 系统架构一般组成

    负载层技术       负载分配层,是单指利用软件实现的计算机系统上的狭义负载均衡.它是根据业务形态设计一种架构方式,将来自外部客户端的业务请求分担到每一个可用的业务节点上 . 1.用户终端不只包括类 ...

  9. Ubuntu pydot failed to call GraphViz.Please install GraphViz 解决方法

    如果遇到: OSError: `pydot` failed to call GraphViz.Please install GraphViz (https://www.graphviz.org/) a ...

  10. mvp 在 flutter 中的应用

    在 Android 应用程序开发过程中,我们经常会用到一些所谓的架构方法,如:mvp,mvvm,clean等.之所以这些方法会被推崇是因为他们可以大大的解耦我们的代码的功能模块,让我们的代码在项目中后 ...