echars示例

最新推荐文章于 2023-11-08 11:59:52 发布

luobaobin

最新推荐文章于 2023-11-08 11:59:52 发布

阅读量125

点赞数

分类专栏： echars

本文链接：https://blog.csdn.net/luobaobin/article/details/108487942

版权

echars 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.echars.html

<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .main {
            width: 100%;
            height: 400px;
            border: 1px solid #eee;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script src="echarts/4.2/echarts.min.js"></script>
</head>

<body>
<div class="am-margin-top" id="main_div"></div>

<script type="text/javascript">
    $(function() {
        clearMain();
        cashData("main1", "cash", "总现金额", "总现金额", "单位(元)");
    })
    function clearMain() {
        var html = ' <div id="main1" class="main"><div  style="text-align: center">加载中...</div></div>';
        $("#main_div").html(html);
    }

    function cashData(id, type, text, name, subtext){
        $.ajax({
            url: "echars.php",
            dataType: 'json',
            type: 'post',
            data: {},
            global: false,
            success: function(data) {
                cashChart(id, data, text, name, subtext, type, '')
            },
            error: function() {

            }
        });
    }

    function cashChart(id, data, text, name, subtext, type, avgProfitPercent){
        var myChart = echarts.init(document.getElementById(id));
        var option = {
            "title": {
                "text": text,
                "subtext": subtext
            },
            "tooltip": {
                "trigger": "axis"
            },
            "legend": {
                "data": [name]
            },
            "xAxis": [{
                "type": "category",
                "data": [],
                "splitLine": {
                    show: true
                }
            }],
            "yAxis": [{
                "type": "value",
                "axisLabel": {
                    "formatter": "{value}"
                }
            }],
            "grid": {
                left: "18%",
                right: "18%",

            },
            "series": [{
                "name": name,
                "type": "line",
                "itemStyle": {
                    "color": '#FF7F50'
                },
                "data": [],
                "markPoint": {
                    "data": [{
                        "type": "max",
                        "name": "最大值"
                    }, {
                        "type": "min",
                        "name": "最小值"
                    }],
                    "symbolSize": 100
                },
                "markLine": {
                    "data": [{
                        "type": "average",
                        "name": "平均值"
                    }]
                }
            }]
        }

        for (i in data) {
            option.xAxis[0].data.push(data[i]['col']);
            option.series[0].data.push(data[i]['val']);
        }
        if (type == 'profitPercent') {
            var avgProfitPercentOption = {
                data: [{
                    name: avgProfitPercent,
                    yAxis: avgProfitPercent
                }]
            }
            console.log("avgProfitPercent");
            console.log(avgProfitPercent);
            option.series[0].markLine = avgProfitPercentOption; // 平均毛利率
        }
        myChart.setOption(option);
    }
</script>
</body>
</html>

2.echars.php

<?php
$arr = [
    0=>['col'=>'2020-09-03','val'=>4263.6],
    1=>['col'=>'2020-09-04','val'=>2586.35],
];
echo json_encode($arr);

luobaobin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录