国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術文章
文章詳情頁

解決Vue + Echarts 使用markLine標線(precision精度問題)

瀏覽:6日期:2023-01-02 18:22:04

在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精度問題)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 亚洲人成在线播放网站 | 亚洲精品免费观看 | 18成人免费观看网站入口 | 加勒比一区在线 | 欧美一级特黄高清免费 | 国产精彩视频在线 | 精品国产v | 国产久草在线 | 国产a精品三级 | 日韩精品久久久毛片一区二区 | 日韩啪| 久在线观看视频 | 成人国产在线视频在线观看 | 性做久久久久久久免费观看 | 成人国产精品一级毛片视频 | 美美女下面被cao爽 美女131爽爽爽做爰中文视频 | 国产一区在线播放 | 成人性色大片 | 一区二区三区日韩 | 久久影院yy6080 | 欧美日本亚洲国产一区二区 | 欧美在线综合视频 | 欧美成人免费午夜全 | 精品欧美成人bd高清在线观看 | 免费观看成年的网站 | m男亚洲一区中文字幕 | 91国内在线 | 国产精品二 | 中文字幕在线免费观看 | 免费大片黄手机在线观看 | 亚洲精品第五页中文字幕 | 成人三级网址 | 日韩在线中文字幕 | 亚洲国产日韩欧美一区二区三区 | 日韩中文字幕视频 | 成人18免费网站 | 日本久久久久久久 | 国产精品午夜性视频 | 福利视频午夜 | 欧美激情亚洲一区中文字幕 | 久久99爰这里有精品国产 |