解决echarts的多个折现数据出现坐标和值对不上的问题


Posted in Javascript onDecember 28, 2018

当出现多个折现数据,echarts可以配置stack值使用堆积值还是单个值

解决echarts的多个折现数据出现坐标和值对不上的问题

option = {
    noDataLoadingOption: {
     text: '暂无数据',
     effect: 'bubble',
     effectOption: {effect: {n: 0}}, textStyle: {fontSize: 24}
    },
    symbolList: ['circle'],
    tooltip: {
     trigger: 'axis', textStyle: {align: 'left'},
     axisPointer: {lineStyle: {color: '#E3E3E3', width: 1, type: 'solid'},}
    },
    // grid: {x: '60px', x2: '60px', borderWidth: 0},
    legend: {data: ['最大响应时长', '平均响应时长', '最小响应时长']},
    toolbox: {show: true},
    // calculable: true,
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      data: ['00:00-02:00', '02:00-04:00', '04:00-06:00', '06:00-08:00', '08:00-10:00', '10:00-12:00'],
      splitLine: {lineStyle: {width: 0}},
      axisLabel: {interval: 0,/*横轴信息全部显示*/  rotate: 20,/*20度角倾斜显示*/}
     }],
    yAxis: [{
      type: 'value',
      axisLine: {lineStyle: {color: '#333', width: 0, type: 'solid'}},
      splitLine: {lineStyle: {color: '#e3e3e3', width: 1, type: 'dashed'}},
     }],
    series: [
     {
      name: '最大响应时长',
      smooth: true,
      type: 'line',
      stack: '总量', // 重要的点 这个参数会使用堆积值作为纵坐标的刻量值。
      data:[........],
      itemStyle: {normal: {color: '#D06E17', lineStyle: {width: 1, color: '#D06E17'}}}
     },{
      name: '平均响应时长',
      smooth: true,
      type: 'line',
      stack: '总量', // 重要的点 这个参数会使用堆积值作为纵坐标的刻量值。
      data:[........],
      itemStyle: {normal: {color: '#C35AD9', lineStyle: {width: 1, color: '#C35AD9'}}}
     },{
      name: '最小响应时长',
      smooth: true,
      type: 'line',
      stack: '总量', // 重要的点 这个参数会使用堆积值作为纵坐标的刻量值。
      data:[........],
      itemStyle: {normal: {color: '#1FD5CE', lineStyle: {width: 1, color: '#1FD5CE'}}}
     },
   ]

去掉stack值后

解决echarts的多个折现数据出现坐标和值对不上的问题

option3 = {
    noDataLoadingOption: {
     text: '暂无数据',
     effect: 'bubble',
     effectOption: {effect: {n: 0}}, textStyle: {fontSize: 24}
    },
    symbolList: ['circle'],
    tooltip: {
     trigger: 'axis', textStyle: {align: 'left'},
     axisPointer: {lineStyle: {color: '#E3E3E3', width: 1, type: 'solid'},}
    },
    // grid: {x: '60px', x2: '60px', borderWidth: 0},
    legend: {data: ['最大响应时长', '平均响应时长', '最小响应时长']},
    toolbox: {show: true},
    // calculable: true,
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      data: ['00:00-02:00', '02:00-04:00', '04:00-06:00', '06:00-08:00', '08:00-10:00', '10:00-12:00'],
      splitLine: {lineStyle: {width: 0}},
      axisLabel: {interval: 0,/*横轴信息全部显示*/  rotate: 20,/*20度角倾斜显示*/}
     }],
    yAxis: [{
      type: 'value',
      axisLine: {lineStyle: {color: '#333', width: 0, type: 'solid'}},
      splitLine: {lineStyle: {color: '#e3e3e3', width: 1, type: 'dashed'}},
     }],
    series: [
     {
      name: '最大响应时长',
      smooth: true,
      type: 'line',
      // stack: '总量', // 去除stack这个参数
      itemStyle: {normal: {color: '#D06E17', lineStyle: {width: 1, color: '#D06E17'}}}
     },{
      name: '平均响应时长',
      smooth: true,
      type: 'line',
      // stack: '总量', // 去除stack这个参数
      itemStyle: {normal: {color: '#C35AD9', lineStyle: {width: 1, color: '#C35AD9'}}}
     },{
      name: '最小响应时长',
      smooth: true,
      type: 'line',
      // stack: '总量', // 去除stack这个参数
      itemStyle: {normal: {color: '#1FD5CE', lineStyle: {width: 1, color: '#1FD5CE'}}}
     },
   ]
 };

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
iview实现图片上传功能
Jun 29 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 Javascript
微信小程序时间控件picker view使用详解
Dec 28 #Javascript
微信小程序时间选择插件使用详解
Dec 28 #Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 #Javascript
Angular6新特性之Angular Material
Dec 28 #Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 #Javascript
小程序实现抽奖动画
Apr 16 #Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 #Javascript
You might like
php分页函数
2006/07/08 PHP
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP 事件机制(2)
2011/03/23 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python实现豆瓣图片下载的方法
2015/05/25 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
手写一个python迭代器过程详解
2019/08/27 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
卫生系统先进事迹
2014/05/13 职场文书
法人委托书范本
2014/09/15 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS