解决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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
vue.config.js常用配置详解
Nov 14 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
php格式化电话号码的方法
2015/04/24 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
django主动抛出403异常的方法详解
2019/01/04 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
中学生演讲稿
2014/04/26 职场文书
岗位工作说明书
2014/07/29 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
任命书格式模板
2015/09/22 职场文书
《水上飞机》教学反思
2016/02/20 职场文书