echarts折线图实例

最新推荐文章于 2025-04-01 16:34:18 发布
Zeropoint零点
最新推荐文章于 2025-04-01 16:34:18 发布
阅读量1.1k
点赞数
分类专栏： echarts 文章标签： echarts ：echarts折线图实例
本文链接：https://blog.youkuaiyun.com/qq_41648132/article/details/79815931
版权
echarts 专栏收录该内容
2 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .cl{  clear: both;}
        body{
            background: #0b182b;
        }
        .wa{
            height: 600px;
            width: 1000px;
            margin: 0 auto;
            border: 1px solid red;
            position: relative;
        }
        .wa_top{
            height: 50px;
        }
        .wa_top h2{
            font-size: 30px;
            color: yellow;
            line-height: 50px;
            padding-left: 30px;
        }
        .wa>ul{
            width: 100%;
            height: 100%;
            margin-top: 15px;
            padding: 0;
        }
        .wa>ul>li{
            float: right;
            list-style: none;
            margin-right: 20px;
        }
        .wa>ul>li>img{
            float: left;
            margin-right: 5px;
            padding-top:15px;
        }
        .wa>ul li h3{
            font-size: 10px;
            color: #1692d7;
            float: left;
            line-height: 10px;
            text-align: center;
        }
        .wa>#consumption{
            height: 100%;
            width: 100%;
            position: absolute;
            top: 70px;
            left: 0;

        }
    </style>
</head>
<body>
<div class="wa">
    <div class="wa_top">
        <h2>三日内对比</h2>
    </div>
    <ul>
        <li>
            <img src="image/tl1.png" alt="">
            <h3>最小值</h3>
            <!--<div class="cl"></div>-->
        </li>
        <li>
            <img src="image/tl2.png" alt="">
            <h3>平均值</h3>
        </li>
        <li>
            <img src="image/tl3.png" alt="">
            <h3>最大值</h3>
        </li>
        <li>
            <img src="image/tl4.png" alt="">
            <h3>今日</h3>
        </li>
        <li>
            <img src="image/tl5.png" alt="">
            <h3>昨日</h3>
        </li>
        <li>
            <img src="image/tl6.png" alt="">
            <h3>前日</h3>
        </li>
        <div class="cl"></div>
    </ul>
    <div id="consumption"></div>
</div>
<script type="text/javascript" src="http://echarts.baidu.com/examples/vendors/echarts/echarts.min.js?_v_=1516200292096"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('consumption'));
    // 指定图表的配置项和数据
    var option1 = {//option选项
        xAxis: {
            type: 'category',//category类别
            axisLabel: {//轴标签
                show: true,
                color: '#34a7e8'
            },
            data: ['沈阳', '大连', '盘锦', '丹东', '本溪','朝阳','铁岭']
            ,splitLine:{//splitLine分割线
                show:true,
                lineStyle:{
                    color:'rgba(153,153,153,.2)',
                    width: 1
                }
            }
        },
        grid:{
            left:'5%',
            top:'5%',
            bottom:'15%',
            right:'5%',
            containLabel:true
        },
        yAxis: {
            axisLabel: {//刻度标签
                show: true,
                color: '#34a7e8'
            },
            type: 'value',
            splitLine:{//分割线
                show:true,
                lineStyle:{
//                    type:'dotted',
                    color:'rgba(153,153,153,.2)',
                    width: 1
                }
            },
            axisTick:{//坐标轴相关刻度
                show: false
            }
        },
        series: [{//系列
            name: 'Mon',
            type: 'line',
            showSymbol: false,
            smooth: '0.3',//是否平滑曲线显示。
            data: [0, 302, 651,412, 282, 491,205],
            itemStyle: {
                color: '#2fe9ff'
            }
        },
            {
                name: 'Tue',
                type: 'line',
                showSymbol: false,
                smooth: '0.3',//是否平滑曲线显示。
                data: [0, 265, 556,320, 198, 464,185],
                itemStyle: {
                    color: '#7902c1'
                }
            },
            {
                name: 'Wed',
                type: 'line',
                showSymbol: false,
                smooth: '0.3',//是否平滑曲线显示。
                data: [0, 332, 225,160, 482, 251,405],
                itemStyle: {
                    color: '#ffa200'
                },
                markLine:{
                    data:[
                        {name: '最大值',yAxis: 600,
                            symbolSize:[5,5],
                            lineStyle:{
                                silent: false,//图形是否不响应和触发鼠标事件
                                type: "solid",
                                color: '#A40000'
                            },
                            label:{
                                show:false
                            }
                        },
                        {name: '最小值', xAxis: -1, yAxis:300,
                            symbolSize:[5,5],
                            lineStyle:{
                                type: "solid",color: '#00560F'
                            },
                            label:{
                                show:false
                            }
                        },
                        {name: '平均值',  xAxis: -1, yAxis: 101,
                            symbolSize:[5,5],
                            lineStyle:{
                                type: "solid",color: '#58381F'
                            },
                            label:{
                                show:false
                            }
                        }
                    ]
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
</script>
</body>
</html>