解决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 相关文章推荐
获取body标签的两种方法
Oct 13 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
详解vue中组件参数
Jul 09 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 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
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
php里array_work用法实例分析
2015/07/13 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
php实现的顺序线性表示例
2019/05/04 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
Javascript继承机制详解
2017/05/30 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
python如何实现int函数的方法示例
2018/02/19 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python实现动态创建类的方法分析
2019/06/25 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
文秘个人求职信范文
2014/04/22 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python