echarts之折线图(line)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echartsLineTest</title>

    <script src="../../libs/jquery/jquery.js"></script>
    <script src="../../widgets/dnQuery/lib/echarts/dist/echarts-all.js"></script>

</head>
<body>

    <div id="staChart" style="width:800px;height:800px;"></div>

<script>

    var chart;
    $(function() {
        setChart()
    })

    function setChart() {
        chart = echarts.init(document.getElementById("staChart"));
        chart.setOption(getChartOption("line"));

    }
    function getChartOption(type) {
        //option
        var option = {};
        if(type == "line"){
            option = {
                title : {
                    text: '未来一周气温变化',
                    subtext: '纯属虚构'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['最低气温']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series : [

                    {
                        name:'标准气温',
                        type:'line',
                        data:[6,6,6,6,6,6,6],//标准线效果
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }

                    },
                    {
                        name:'最低气温',
                        type:'line',
                        data:[1, -2, 2, 5, 3, 2, 0],
                        markPoint : {
                            data : [
                                {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            };

        }

        return option;
    }

</script>
</body>
</html>
echsrts引用的相关js文件：链接：https://pan.baidu.com/s/1GP34oLNd-EEjqWXHZ9sYeA 密码：se9t
echarts之折线图(line)

猜你喜欢
