解決Vue + Echarts 使用markLine標線(precision精度問題)
在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效果:
然而 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',data: [ {yAxis: price[0]},lineStyle: { show: true,type: 'dashed' },// 先讓markLine精確到3,預設為2 precision: 3,label: { formatter: function(value) { // 確保你的Number.toFixed(2)是滿足要求的 return value.value.toFixed(2); } } }
修改配置二:
markLine: { symbol: 'none',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精度問題)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。