echart写银行理财报表

最新推荐文章于 2022-12-07 11:07:41 发布

细雨良田

最新推荐文章于 2022-12-07 11:07:41 发布

阅读量154

点赞数

分类专栏： jquery echarts 文章标签： echarts jquery html5 js

本文链接：https://blog.csdn.net/qq_31382751/article/details/117260312

版权

jquery 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

1、html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折线图</title>
    <style>
        *{
            list-style: none;
        }
        ol>li{
          border: 1px solid #ccc;
          border-right: none;
          padding: 10px 15px;
          float: left;
        }
        ol>li.over{
            color: red;
        }
        ol>li:last-child{
          border-right: 1px solid #ccc;
        }
        .tooltip{
            height: 35px;
            line-height: 35px;
            background: lightcoral;
            color: #fff;
            margin: 10px 0;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <ol style="height:45px; margin: 0 auto;" class="tab">
        <li class="over">七日年化</li>
        <li>万份收益</li>
    </ol>

    <div class="tooltip"></div>
    <div style="height:300px;" id="brokenLine"></div>
    <ol style="height:45px; margin: 0 auto;" class="tab">
        <li class="over">近1周</li>
        <li>近1月</li>
        <li>近3月</li>
    </ol>
    <script src="js/echarts/echarts.js"></script>
    <script src="js/jquery.js"></script>
    <script src="brokenline1.js"></script>

</body>
</html>

2、js文件borkenline1.js

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('brokenLine'));
var colors = ['#5470C6', '#EE6666'];
var xData1 = ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12'];
var xData2 =['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12'];

var yData1 = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3];
var yData2 = [1, 2, 3, 4, 20, 80, 100, 2.6, 5.9, 9.0, 26.4, 28.7];

var option1 = {
    animation: false,
    //悬浮设置
    tooltip: {
        show: true,
        trigger: 'axis',
        enterable: true,
        // axisPointer: {
        //     type: 'cross',
        // },
        formatter: function (params, ticket, callback) {
            var txt = "七日年化："  +'  ' + params[0].value + "; 时间："+params[0].axisValue;
            $(".tooltip").html(txt);
        }
    },
    xAxis: {
        data: xData1,
        type: 'category',
        axisTick: {
            show: false,
            //刻度线和标签对齐
            alignWithLabel: true,
        },
        axisLabel:{
            //刻度标签与轴线之间的距离
            margin: 15,
            //刻度显示间隔
            interval: xData1.length-2
        },
        axisLine: {
            lineStyle: {
                color: colors[0]
            }
        }, 
        axisPointer: {
            label: {
                show: true,
                //指示标签与轴线之间的距离
                margin: 2,
                fontSize: 10,
                height: 11,
                padding: [2, 5, 0, 5],
                formatter: function (params) {
                    return params.value;
                }
            }
        }
        
    },
    grid: {
        top: 10,
        bottom: 30,
        left: 0,
        right: 0,
        containLabel:true
    },
    yAxis: {
        //网格线
        splitLine: {     
            show: true,
            lineStyle: {
                type: "dashed"
            }
        },
        type: 'value',
        //y轴刻度5等份显示
        splitNumber: 5,
        // max: Math.max.apply(null, yData1),
        // interval: Math.max.apply(null, yData1)/5,
        axisLabel: {
           show: true,
           lineStyle :{
               type: "dashed"
           },
　　　　　　formatter: '{value}%'//y轴的单位
　　　　 },
    },
    series: [{
        name: '七日年化',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        data: yData1
    }]
};


var option2 = {
    animation: false,
    //悬浮设置
    tooltip: {
        show: true,
        trigger: 'axis',
        // axisPointer: {
        //     type: 'cross',
        // },
        formatter: function (params, ticket, callback) {
            var txt = params[0].axisValueLabel;
            $(".tooltip").html(txt);
        }
    },
    xAxis: {
        data: xData2,
        type: 'category',
        axisTick: {
            alignWithLabel: true
        },
        axisLabel:{
            //刻度显示间隔
            interval: xData2.length-2
        },
        axisLine: {
            onZero: false,
            lineStyle: {
                color: colors[1]
            }
        },
        axisPointer: {
            label: {
                formatter: function (params) {
                    return "万份收益" +'  ' + params.value
                        + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                }
            }
        },
    },
    grid: {
        top: 10,
        bottom:50
    },
    yAxis: {
        type: 'value',
        splitNumber: 5,
    },
    series: [{
        name: '万份收益',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        data: yData2
    }]
};
//初始化。
myChart.setOption(option1);

//tab切换
$(".tab").on("click","li",function(){  

    $(".tooltip").html("");
    var i = $(this).index();
    $(this).addClass("over").siblings().removeClass("over");
    var name = $(this).html();

    if(name == "七日年化"){
        myChart.setOption(option1,true);
    }

    if(name == "万份收益"){
        myChart.setOption(option2,true);
    }

})

以上仅供参考哈

细雨良田

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
echart写银行理财报表

1、html内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫