echarts的tooltip的function用法

版权声明：技术总结来自互联网，书籍，以及工作积累。如果觉得我的总结有帮助，欢迎分享。 https://blog.csdn.net/qq1332479771/article/details/86542404

背景

有一道编程题，假如你有10W，存放到银行里，每年的利率是5%，那么50年后，你有多少钱？用前端画图展示。

解答

利用百度Echarts画图。

https://github.com/wayss000/PracticeCode/blob/master/JavaScript/复利计算money.html

<script type="text/javascript">
    //存放总年数
    var total = 100;
    //年利率
    var rate = 1.05;
    //初始金额
    var tempMoney = 100000;
    var sumCount = new Array(total);
    var sumMoney = new Array(total);
    var i = 0;
    do {
        sumCount[i] = i;
        sumMoney[i] = tempMoney;
        tempMoney = tempMoney * rate;
        i++;
    } while (tempMoney < 1000000);

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        xAxis: {
            type: 'category',
            data: sumCount
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: sumMoney,
            type: 'line'
        }],
        tooltip: {
            trigger: 'axis',
            //echarts的tooltip的function用法
            formatter: function (params) {
            	//这里可以debugger出params内容
                var xValue = params[0].dataIndex;
                var yValue = params[0].data;
                var result = '第' + xValue + '年:共' + yValue.toFixed(2) + '元';
                return result;
            }
        }
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>