解决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 相关文章推荐
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
JavaScript 数组详解
Oct 10 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
Nuxt的路由动画效果案例
Nov 06 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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
JS Timing
2007/04/21 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
js DOM的学习笔记
2011/12/22 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
vue.js实现价格格式化的方法
2017/05/23 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
python3.4中清屏的处理方法
2020/07/06 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
MADE法国:提供原创设计师家具
2018/09/18 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
酒店员工检讨书
2014/02/18 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2014年党建工作总结
2014/11/11 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android