本筆記記錄時間：2022-02-19 12:18:42，估計發布到網上是一個月后了。

效果圖如下：

對應Echart代碼如下：

<script type="text/javascript">// 基于準備好的dom，初始化echarts實例let fundChart = echarts.init(document.getElementById("fundEarningChart"));// 指定圖表的配置項和數據let fundOption = {title: {text: '基金收益',textStyle:{color: "white"}},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#CCCCCC'}},formatter: function (params){let value = params[0].value;value = (value * 100).toFixed(4) + "%";return value;}},grid: {left: '1%',right: '1%',bottom: '1%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,// data: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07', '01-08'],data: {$fundXData},axisLine: {lineStyle: {color: 'white',},onZero: true},},yAxis: {type: 'value',axisLabel:{formatter: function (val){return val * 100 + "%";}},nameTextStyle: {color: "white"},axisLine: {lineStyle: {color: 'white',}},},series:{type: 'line',data: {$fundYData},// data: [120, 132, 101, 134, 90, 230, 210],color:['white']}};// 使用剛指定的配置項和數據顯示圖表。fundChart.setOption(fundOption);window.addEventListener("resize", function (){fundChart.resize();}); </script>

對應的HTML代碼如下：

<div class="bg-gradient-primary shadow-primary " style="height: 100%; width: 100%;"><div id="fundEarningChart" style="height: 100%; width: 100%; min-height: 300px"></div> </div>

其中$fundXData和$fundYData值如下：

console.log({$fundXData}); console.log({$fundYData});

總結

以上是生活随笔為你收集整理的Echarts笔记-折线图定制（Y轴百分数，鼠标移动显示百分数，显示X轴，Y轴值）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。