echarts之折线图配置（附带图例很多做成分页效果） 

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf-8" />  
    <title>ECharts-基本线性图及其配置要求</title>  
    <!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> 
</head>  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="box" style="height:400px;width: 800px;padding: 20px"></div>
    </div>  
    <script>
    // 获取到这个DOM节点，然后初始化

    var myChart = echarts.init(document.getElementById("box"));
    var option = {
        // 标题
        title: {
            text: '红包活动数据',
            subtext: '数据来源：华秉科技-dancer'
        },
        tooltip: {
            trigger: 'axis'
        },
        //图例名
        legend: {
            data:['参加活动人数','分享人数','关注人数','注册人数','领取红包人数']
        },
        grid: {
            left: '3%',   //图表距边框的距离
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        //工具框，可以选择
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        //x轴信息样式
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['12-01','12-02','12-03','12-04','12-05','12-05','12-06','12-07','12-08','12-09','12-10','12-11','12-12','12-13'],
            //坐标轴颜色
            axisLine:{
                lineStyle:{
                    color:'red'
                }
            },
            //x轴文字旋转
            axisLabel:{
                rotate:30,
                interval:0
            },
        },

        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} 人'
                }
            }
        ],
        series: [
            //虚线
            {
                name:'参加活动人数',
                type:'line',
                symbolSize:4,   //拐点圆的大小
                color:['red'],  //折线条的颜色
                data:[1000, 300, 500, 800, 300, 600,500,800, 300, 500, 800, 300, 600,500],
                smooth:false,   //关键点，为true是不支持虚线的，实线就用true
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width:2,
                            type:'dotted'  //'dotted'虚线 'solid'实线
                        }
                    }
                }
            },
            //实线
            {
                name:'分享人数',
                type:'line',
                symbol:'circle',
                symbolSize:4,
                itemStyle:{
                    normal:{
                        color:'red',
                        borderColor:'red'  //拐点边框颜色
                    }
                },
                data:[220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'关注人数',
                type:'line',
//                stack: '总量',
                symbolSize:4,
                color:['orange'],
                smooth:false,   //关键点，为true是不支持虚线的，实线就用true
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width:2,
                            type:'dotted'  //'dotted'虚线 'solid'实线
                        }
                    }
                },
                data:[500, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'注册人数',
                type:'line',
                symbolSize:4,
                color:['blue'],
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width:2,
                            type:'dotted'  //'dotted'虚线 'solid'实线
                        }
                    }
                },
                data:[300, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'领取红包人数',
                type:'line',
                color:['green'],
                symbol:'circle',
                symbolSize:4,
                data:[310, 352, 280, 334, 373, 310, 340,300, 350, 280, 350, 340, 370, 310],
                itemStyle:{
                    normal:{
                        color:'green',
                        borderColor:'green'
                    }
                }
            }
        ]
    };

    myChart.setOption(option);
</script>
</body>  
</html>

　　附带：

　　附带1：http://echarts.baidu.com/examples/editor.html?c=pie-legend

　　附带2：http://echarts.baidu.com/examples/editor.html?c=radar2

posted @ 2018-01-09 21:06  再见小猴子  阅读(38294)  评论(2)  编辑  收藏  举报