解决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 Math.random()随机数函数
Nov 04 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
vue-router的HTML5 History 模式设置
Sep 08 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
微信小程序时间控件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中COOKIES使用示例
2015/07/26 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
jquery中对表单的基本操作代码
2010/07/29 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python pandas常用函数详解
2018/02/07 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Python类中self参数用法详解
2020/02/13 Python
python实现批量命名照片
2020/06/18 Python
python对一个数向上取整的实例方法
2020/06/18 Python
python给list排序的简单方法
2020/12/10 Python
python 递归相关知识总结
2021/03/03 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
感恩教育活动总结
2014/05/05 职场文书
召开会议通知范文
2015/04/15 职场文书
毕业论文致谢词
2015/05/14 职场文书
务工证明怎么写
2015/06/18 职场文书
表彰大会新闻稿
2015/07/17 职场文书
个人向公司借款协议书
2016/03/19 职场文书
Go语言编译原理之变量捕获
2022/08/05 Golang