解决Vue + Echarts 使用markLine标线(precision精度问题)


Posted in Javascript onJuly 20, 2020

在VUE实例中使用Echarts

安装echarts依赖:

npm install echarts -s

编写代码:

引入echarts对象:

鉴于准备工作中已经通过npm安装了echarts依赖,所以可以直接在vue文件中使用代码import echarts from “echarts”引入echarts对象:

<script>
 import echarts from 'echarts/lib/echarts'
</script>

注意:只引入了echarts还不能直接使用markLine(作为前端菜鸟爬坑了好久?)

引入markLine对象:

<script>
 import echarts from 'echarts/lib/echarts'
 import 'echarts/lib/component/markLine'
</script>

以下是我画图的所有echarts依赖:

import echarts from 'echarts/lib/echarts'
 import 'echarts/lib/chart/candlestick'
 import 'echarts/lib/chart/bar'
 import 'echarts/lib/component/legend'
 import 'echarts/lib/component/title'
 import 'echarts/lib/component/markLine'

markLine终于有用了?

我的代码:

这是我的markLine配置

let price = [13.9, 14.95, 16];

markLine: {
 symbol: 'none',
 silent: true,
 data: [
 {yAxis: price[0]},
 {yAxis: price[1]},
 {yAxis: price[2]}
 ],
 lineStyle: {
 show: true,
 color: '#808C94',
 type: 'dashed'
 }
}

markLine效果:

解决Vue + Echarts 使用markLine标线(precision精度问题)

然而 Echarts 的 series[i]-bar.markLine.precision 配置项不太厚道

Echarts文档中的描述:

series[i]-bar.markLine.precision number

[ default: 2 ]

标线数值的精度,在显示平均值线的时候有用。

根据上图展示,并没有我想要的精度。

——注:13.9应该显示13.90,16应该显示16.00

precision配置默认为2

怎么办?填坑!

仔细翻看Echarts文档发现了一个配置:

series[i]-bar.markLine.label.formatter

里面有个回调函数,而且与axisLabel.formatter不太一样

修改配置一:

请确保你的Number.toFixed(2)是满足要求的

markLine: {
 symbol: 'none',
 silent: true,
 data: [
  {yAxis: price[0]},
  {yAxis: price[1]},
  {yAxis: price[2]}
 ],
 lineStyle: {
  show: true,
  color: '#808C94',
  type: 'dashed'
 },
 // 先让markLine精确到3,默认为2
 precision: 3,
 label: {
  formatter: function(value) {
   // 确保你的Number.toFixed(2)是满足要求的
  return value.value.toFixed(2);
  }
 }
}

修改配置二:

markLine: {
 symbol: 'none',
 silent: true,
 data: [
  {yAxis: price[0]},
  {yAxis: price[1]},
  {yAxis: price[2]}
 ],
 lineStyle: {
  show: true,
  color: '#808C94',
  type: 'dashed'
 },
 // 先让markLine精确到3,默认为2
 precision: 3,
 label: {
  // 没有写通用代码了,针对性解决一下当前问题
  formatter: function(value) {
   // 这里的value 是一个label对象,使用value.value获取到真正的值
   let strVal = value.value.toString();
   let splitStr = strVal.split('.');
   let tailStr = splitStr[1];
   if (tailStr == null) {
    return value.value.toString() + '.00';
   }
  // 0.995 ~ 0.999 = 1
  if (tailStr >= 995) {
  return (parseInt(splitStr[0]) + 1).toString() + '.00';
  }
   if (tailStr.length >= 3) {
    let lastStr = tailStr.substr(2, 1);
    // 解决toFixed(2)方法四舍五入无效
    if (lastStr >= 5) {
     // 数值+101有些取巧,但能解决问题...
     tailStr = (parseInt(tailStr.substr(0, 2)) + 101).toString().substr(1, 2);
     return splitStr[0] + '.' + tailStr;
    } else {
     return splitStr[0] + '.' + tailStr.substr(0, 2);
    }
   } else if (tailStr.length === 1) {
    return value.value.toString() + '0';
   } else {
    return value.value.toString();
   }
  }
 }
}

鬼知道Number.toFixed(2)为什么保留两位小数时并没有四舍五入,就写了段恶心的代码,个人能力有限?

修改后效果:

解决Vue + Echarts 使用markLine标线(precision精度问题)

以上这篇解决Vue + Echarts 使用markLine标线(precision精度问题)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
javascript function、指针及内置对象
Feb 19 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 #jQuery
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 #Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 #Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 #Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 #Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 #Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 #Javascript
You might like
E路文章系统PHP
2006/12/11 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
基于jQuery的星级评分插件
2011/08/12 Javascript
JS 表单验证大全
2011/11/23 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
react-router中的属性详解
2017/06/01 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
深入浅析python的第三方库pandas
2020/02/13 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
Linux中如何用命令创建目录
2016/12/02 面试题
毕业证丢失证明
2014/01/15 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫