echarts 多条折线图

在线查看：http://gallery.echartsjs.com/editor.html?c=xRxGWFXLc0

1. echarts

到echarts官网：http://echarts.baidu.com/ 下载最新的js

2. 图片示例

3. 折线图代码示例

<script src="echarts.js"></script>
<script>
option = {
    // 标题
    title: {
        text: '多条折线图测试用例', // 标题名称
    },
    // x轴
    xAxis: {
        data: ['1-1','1-2','1-3','2-1','3-1','6-1','7-1',], // x轴坐标名称
    },
    // y轴
    yAxis: {},
    // 提示框，鼠标悬浮交互时的信息提示
    tooltip: {
        show: true, // 是否显示
        trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
    },
    legend: {
        data: ['用例A', '用例B']
    },
    // 指定图标的类型
    series: [
        // 第一条折线图
        {
            name: '用例A', // 系列名称
            type: 'line', // 类型：线
            data: [11,22,33,44,55,66,77], // 数据
            markPoint: {
                // 标注图形数据
                data: [{
                        type: 'max', // 类型
                        symbol: 'pin', // 标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' 另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星 
                        name: '最大值'
                    },
                    {
                        type: 'min', // 类型
                        symbol: 'pin',
                        name: '最小值'
                    },
                ],
                // 特殊标注文字
                label: {
                    normal: {
                        show: true,
                        //position: 'top', // 文字位置
                        // 显示的文字
                        formatter: '{b}：{c}',
                    }
                },
                // 触发操作
                tooltip: {
                    show: true, // 是否显示
                    formatter: '{b}：{c}', // 内容格式器 a（系列名称），b（类目值），c（数值）, d（无）
                    trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
                },
            },
            markLine: {
                data: [{
                    type: 'average',
                    name: '平均值',
                    itemStyle: {
                        normal: {
                            color: 'orange'
                        }
                    }
                }]
            },
            // 折线图圆点
            label: {
                normal: {
                    show: true,
                    //position: 'bottom', // 文字位置
                    // 显示的文字
                    formatter: '{c}',
                    textStyle: {
                        color: '#000' // 文字颜色
                    }
                }
            },
        },
        // 第二条折线图
        {
            name: '用例B', // 系列名称
            type: 'line', // 类型：线
            data: [1,2,3,4,5,6,7], // 数据
            markPoint: {
                // 标注图形数据
                data: [{
                        type: 'max', // 类型
                        symbol: 'circle', // 标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' 另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星 
                        name: '最大值'
                    },
                    {
                        type: 'min', // 类型
                        symbol: 'circle',
                        name: '最小值'
                    },
                ],
                // 特殊标注文字
                label: {
                    normal: {
                        show: true,
                        //position: 'top', // 文字位置
                        // 显示的文字
                        formatter: '{b}：{c}',
                    }
                },
                // 触发操作
                tooltip: {
                    show: true, // 是否显示
                    formatter: '{b}：{c}', // 内容格式器 a（系列名称），b（类目值），c（数值）, d（无）
                    trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
                },
            },
            markLine: {
                data: [{
                    type: 'average',
                    name: '平均值',
                    itemStyle: {
                        normal: {
                            color: 'green'
                        }
                    }
                }]
            },
            // 折线图圆点
            label: {
                normal: {
                    show: true,
                    //position: 'bottom', // 文字位置
                    // 显示的文字
                    formatter: '{c}',
                    textStyle: {
                        color: '#000' // 文字颜色
                    }
                }
            },
        }
    ]
};
</script>