echarts折线图模型

首先你要去echarts官网下载http://echarts.baidu.com/download.html所需的地图数据

根据提示你就下载这个好了 

接下来你要把它存起来然后在你要使用的地方引用它

<script src="../res/js/echarts.js"></script>

然后在panel内腾出一块地方放一个div用来显示折线图

<c:Panel AutoScroll="true" runat="server" ID="MainPanel" ShowHeader="false" ShowBorder="false" BodyPadding="5px" Layout="Region">
 <Content>
  <div id="chartmain" style="height: 
   400px; margin:60px;">
  </div>
 </Content>
</c:Panel>

接着在<script></script>中就是最重要的部分了

var legendDate = ['当前告警设备数', '今日新增告警设备数', '当前告警次数'];
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));
        var option = {
            title: {
                text: '实时用户数据'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: legendDate
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                },
                right: 80
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    name: '设备数'
                }
            ],
            series: [{
                name: '当前告警设备数',//第一条折线
                type: 'line',
                data: [13, 21, 12, 11, 22, 31, 14],
                markPoint: {//显示图中的小气泡
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {//显示图中的虚线
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            },
            {
                name: '今日新增告警设备数',//第二条折线
                type: 'line',
                data: [15, 23, 18, 29, 10, 24, 23],
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            },
            {
                name: '当前告警次数',//第三条折线
                type: 'line',
                data: [11, 15, 17, 15, 12, 13, 10],
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            }
            ]
        };
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);

当然data中的都是假数据 要达到真正的实用性 接下来就是从数据库中查数据然后绑定到data中 剩下的你就随意发挥好了

看完哒留个爪印呐