echarts与highcharts使用经验

最近项目涉及到画图表，前后试用了一下highcharts与echarts。highcharts文档详细易懂，上手快捷。highcharts依赖于jQuery库；当结合基于jQuery的zepto使用也可以，例子如下：

<script src="style/js/zepto.min.js"></script>
<script src="style/js/highcharts.js"></script>
<script>
    $(function () {
        var chart;
        $(document).ready(function () {
            var choice = {
                chart: {
                    renderTo: 'container',
                    type: 'line'
                },
                title: {
                    text: '成绩概况',
                    align: 'left',
                    x: 0 //center
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    title:{
                        text:'成绩(/分)'
                    }
//                categories: ['90+', '80+', '70+', '60+', '60以下'],
                },
                yAxis: {
                    title: {
                        text: '次数(/次)'
                    },
                    plotLines: [{//y轴分界色
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: false
                    }
                },
                tooltip: {
                    valueSuffix: '(次)'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: '次数',
//                data: [9, 8, 4, 6, 7]
                }]
            };
            $.ajax({
                type:"post",
                url:"/",
                data:JSON.stringify(sendData),
                dataType:"json",
                contentType:"application/json",
                success:function (msg) {
                    //
                },
                error:function () {
                    //出错
                    var msg={"array":[{"score":"90+","times":8},{"score":"80+","times":4},{"score":"70+","times":9},{"score":"60+","times":7}]};
                    var tempTimes=[];
                    var tempScore=[];
                    for(var i=0;i<msg.array.length;i++){
                        tempScore.push(msg.array[i].score);
                        tempTimes.push(msg.array[i].times);
                    }
                    choice.xAxis.categories=tempScore;
                    choice.series[0].data=tempTimes;
                    chart=new Highcharts.Chart(choice);
                }

            })
        })
    });
</script>
</html>

但是项目商用使用highcharts需要付费，因此转用免费的echarts。由于文档不好理解（因此要耐心阅读），对模块化编程不熟悉，摸索了好久才了解如何按照项目需求配置。有三种引入方式：

• 模块化包引入
• 模块化单文件引入（推荐）
• 标签式单文件引入

现使用方式一，配置如下：

/*require.config({
    packages: [
        {
            name: 'zrender',
            location: 'style/js/zrender-2.1.1/src',
            main: 'zrender'

        },
        {
            name: 'echarts',
            location: 'style/js/echarts-2.2.7/src',
            main: 'echarts'
        }
    ]
});*/

方式二:demo如下（用ajax异步加载数据时，需要将require放到ajax请求里面）：

<script src="style/js/echarts-2.2.7/build/dist/echarts.js"></script>
<script>
    //将请求数据的函数绑定到onchange()函数，两个下拉分别改变都调用同一个函数
    function request() {
        require.config({
            paths:{
                echarts: 'style/js/echarts-2.2.7/build/dist'
                /*'echarts/chart/bar' : 'style/js/echarts-2.2.7/build/dist/chart/bar'*/
            }
        });
        var selectYear=$("#selectYear option").not(function(){ return !this.selected }).text();//zepto.js与jQuery获取下拉的函数不同
        var selectTerm=$("#selectTerm option").not(function(){ return !this.selected }).val();//zepto.js与jQuery获取下拉的函数不同
        /*var tempTerm=[];
         var tempScore=[];
         for (var i = 0; i < 6; i++) {
         tempTerm[i] = Math.random()*100;
         tempScore[i] = Math.random()*100;
         };
         option.xAxis.data=tempTerm;
         option.series[0].data=tempScore;使用随机函数替代ajax请求也能正确显示数据*/
        var sendData={
            "year":selectYear,
            "semester":selectTerm,
            "account":201330661231
        };
        $.ajax({
            type:"post",
            url:"/",
            data:JSON.stringify(sendData),
            dataType:"json",
            contentType:"application/json",
            success:function (msg) {
                //
            },
            error:function () {
                //当将option与require放在error外面时，只能正确显示第一次的数据和图表
                var option = {
                    legend: {
                        data:['成绩']
                    },
                    xAxis :
                    {
                        name:'学期',
                        type : 'category',
                        splitNumber:'8',   //用不上
                        /*data : ['大一上','大一下','大二上','大二下','大三上','大三下','大四上','大四下'],*/
                        axisLabel:{
                            interval: 0,   //解决只显示间隔的坐标
                            rotate:45,     //倾斜度 -90 至 90 默认为0,令字体倾斜避免重叠
                            textStyle:{
                                color:'#35A3CB'
                            }
                        }
                    }
                    ,
                    yAxis :
                    {
                        name:'成绩(/分)',
                        type : 'value',
                        splitArea : {show : true},
                        axisLabel:{
                            textStyle:{
                                color:'#35A3CB'
                            }
                        }
                    }
                    ,
                    series : [
                        {
                            name:'成绩',//用于tooltip的显示，legend 的图例筛选
                            type:'line',
                            /* data:[80, 78, 90, 98, 50, 68, 76, 85],*/
                            itemStyle : { normal: {label : {show: true}}}
                        }
                    ],
                    color:['#35A3CB']
                };
                var msg={"array":[{"term":"大一上","score":10},{"term":"大一下","score":20},{"term":"大二上","score":60},{"term":"大二下","score":30},
                    {"term":"大三上","score":90},{"term":"大三下","score":50},{"term":"大四上","score":70},{"term":"大四下","score":80}]};
                var tempTerm=[];
                var tempScore=[];
                for(var i=0;i<msg.array.length;i++){
                    tempTerm.push(msg.array[i].term);
                    tempScore.push(msg.array[i].score);
                }
                option.xAxis.data=tempTerm;
                option.series[0].data=tempScore;


                require(
                        [
                            'echarts',
                            'echarts/chart/line'
                        ],
                        function (ec) {
                            var myChart = ec.init(document.getElementById('container'));
                            myChart.setOption(option);
                        }
                )
            }
        });

    }
</script>
<script>
    $(document).ready(function () {
        var str="201330551235";//学号
        var distinct=0;//研究生或者本科生
        var temp=parseInt(str.substr(0,4));
        var length;
        if(distinct==1) {
            length = 4;
        }
        else if(distinct==0){
            length=3;
        }
        var selectYear=document.getElementById("selectYear");
        for(var i=0;i<length;i++)
        {
            var enroll=temp+"-"+(++temp);
            selectYear.options[i] = new Option(enroll);//动态添加option
        }
        request();
    })
    function change() {
        request();
    }
</script>
</body>

3.数组的元素为键值对时，动态添加元素方法：

tempSubject.push({'text':msg.array[i].subject});

4.如何找元素嵌套（雷达图比较麻烦）：

/*以下两句用于测试option字段变量的嵌套*/
alert(JSON.stringify(option.polar[0].indicator));
alert(JSON.stringify(option.series[0].data[0].value));

暂且记录问题。。。。