解决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入门基础 document.write输出
Feb 22 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
uni-app从安装到卸载的入门教程
May 15 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 开源框架22个简单简介
2009/08/24 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
工商企业管理应届生求职信
2013/11/03 职场文书
智能电子应届生求职信
2013/11/10 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
安全生产检讨书
2014/01/21 职场文书
小学班主任寄语大全
2014/04/04 职场文书
奖励申请报告范文
2015/05/15 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android