echarts 图表应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>char - test</title>
    <script src="./js/echarts.js"></script>
    <style type="text/css">
        .Bar{
            float:top;
            width:700px;
            height:300px;
            background:#093;
        }
        .Line{
            float:top;
            width:700px;
            height:300px;
            background:#808;
        }
    </style>
</head>
<body>

<div id="chartBar" class="Bar"></div>
<div id="chartLine" class="Line"></div>
<script type ="text/javascript">

    require.config
    ({paths:{echarts:'./js'}});

    require(
            [
                'echarts','echarts/chart/bar'
            ],

            function(This){
                var Width = 20;
                var myChart = This.init(document.getElementById('chartBar'));
                var option = {
                    tooltip:{
                        show:true
                    },
                    title:{
                        text:'课程分数统计-柱形图'
                    },
                    legend: {
                        data:["一班","二班","三班"]
                    },
                    xAxis:[
                        {
                            show: true,
                            type:'category',
                            data:["数学","语文","英语","历史","地理","生物"],
                            axisLabel:{
                                textStyle:{
                                    color:"#006633"
                                }
                            }
                        }
                    ],
                    yAxis:[
                        {
                            type:'value',
                            min:0,
                            max:100,
                        }
                    ],

                    series:[

                        {
                            type:'bar',
                            name:'一班',
                            barWidth:Width,
                            data:[50,20,30,70,20,95],
                            barGap:5,
                            itemStyle:{
                                normal:{
                                    color:'#9933FF',
                                }
                            }
                        },

                        {
                            type:'bar',
                            name:'二班',
                            barWidth:Width,
                            data:[20,80,39,50,88,25],
                            itemStyle:{
                                normal:{
                                    color:function(params){
                                        return '#FF6600';
                                    }
                                }
                            }
                        },
                        {
                            type:'bar',
                            name:'三班',
                            barWidth:Width,
                            data:[70,66,85,79,92,75],
                            itemStyle:{
                                normal:{
                                    color:function(params){
                                        return '#FFBB00';
                                    }
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }
    )
    require(
            [
                'echarts','echarts/chart/line'
            ],

            function(psq){
                var datas = new Array("数学","语文","英语","历史","地理","生物");
                var score = new Array(50,20,30,70,20,95);
                var myChart = psq.init(document.getElementById('chartLine'));
                var option = {
                    tooltip:{
                        show: true
                    },
                    title:{
                        text:'课程分数统计-折线图'
                    },
                    legend:{
                        data:[
                            {
                                name:'分数',
                                textStyle:{
                                    color:'#00c36c'
                                }
                            }
                        ]
                    },
                    xAxis:[
                        {
                            show: true,
                            type:'category',
                            data:datas
                        }
                    ],
                    yAxis:[
                        {
                            type:'value',
                            min:0,
                            max:100,
                        }
                    ],

                    series:[
                        {
                            type:'line',
                            name:'分数',
                            data:score
                        }
                    ]
                };
                myChart.setOption(option);
            }
    )


</script>
</body>
</html>

额外属性

calculable:true,
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    dataZoom:{show:true},
                    legend:{
                        data:[
                            {name:'优秀率(85%以上)'},
                            {name:'良好率(75%以上)'},
                            {name:'及格率(60%以上)'},
                            {name:'低分率(40%以下)'}
                        ]
                    },

echarts 图表应用

推荐阅读