Echarts笔记-折线图定制（Y轴百分数，鼠标移动显示百分数，显示X轴，Y轴值）

本笔记记录时间：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});