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

Posted 2022-03-24 IT1995

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