Echarts学习笔记

1.Ecahrts使用首先需要引用js文件 Echarts.js

然后定义一个带id的容器（div就可以）

然后就可以初始化echarts了

↓这是柱形图

 <h2 class="content-tit">本校各年级教材费用</h2>
                        <div class="chart-box clearfix">
                            <div class="zhu-img-1" id="Bar_BookFee_RXNJ"></div>
                        </div>

var BookFeeRXNJChart;
function ShowBookFee_RXNJ_Bar() {
    // 基于准备好的dom，初始化echarts实例
     BookFeeRXNJChart = echarts.init(document.getElementById("Bar_BookFee_RXNJ"),
    {
        width: document.getElementById("Bar_BookFee_RXNJ").width
    });
    var RXNJ = [];
    var BookFee = [];
    $.ajax({
        type: "post",
        async: true,
        url: "ashx/BookFeeAnal.ashx?m=BookFeeRXNJ",
        dataType: "json", //返回数据形式为json
        success: function(result) {
            var list = $.makeArray(result.BookFee_RXNJ);
            console.log(list);
            if (result) {
                for (var i = ; i < list.length; i++) {
                    RXNJ.push(list[i].RXNJ);
                    BookFee.push(list[i].NJCost);
                }
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: ""
                    },
                    tooltip: {},
                    legend: {
                        data: ["教材订购费用"]
                    },

                    xAxis: [
                        {
                            axisLabel: {
                                interval: ,
                                rotate: ,
                                margin:
                            },
                            data: RXNJ,
                            name:"年级"
                        }
                    ],
                    grid: {
                        bottom:
                    },
                    yAxis: {name:"教材费用/元"},
                    series: [
                        {
                            name: "教材订购费用",
                            type: "bar",
                            data: BookFee,
                            itemStyle: {
                                normal: {
                                    //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                    color: function(params) {
                                        // build a color map as your need.
                                        var colorList = [
                                            "#5ed4a3", "#5ed4a3", "#5ed4a3", "#5ed4a3", "#5ed4a3",
                                            "#5ed4a3", "#5ed4a3", "#5ed4a3", "#5ed4a3", "#5ed4a3"
                                        ];
                                        return colorList[params.dataIndex];
                                    },
                                    //以下为是否显示，显示位置和显示格式的设置了
                                    label: {
                                        show: false,
                                        position: "top",
                                        //                             formatter: '{c}'
                                        formatter: "{b}\n{c}"
                                    }
                                }
                            }
                        }
                    ]

                };
                BookFeeRXNJChart.setOption(option);
            }
        },
        error: function(errorMsg) {

            layer_msg_error("图表数据加载失败！", "");
        }
    });

}

js

↓这是环形图

 <h2 class="content-tit">本校各年级教材费用占比</h2>
                        <div class="chart-box clearfix">
                            <div class="bing-img" id="Pie_BookFeeProp_RXNJ"></div>
                        </div>

aspx

function ShowBookFeeProp() {
    // 基于准备好的dom，初始化echarts实例

    var BookFeeProp_RXNJ = echarts.init(document.getElementById("Pie_BookFeeProp_RXNJ"));

    window.onresize = function() {
        BookFeeProp_RXNJ.resize();
    };
    var option = {
        title: {},
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: "vertical",
            x: "left",
            data: []
        },
        series: [
            {
                name: "教材费用",
                type: "pie",
                radius: ["50%", "70%"],
                avoidLabelOverlap: true,
                label: {
                    normal: {
                        show: false,
                        position: "center"
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: "",
                            fontWeight: "bold"
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [],
                itemStyle: {
                    normal: {
                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                  "#fd9bc4", "#fa98e6", "#e19af5", "#a8a8f8", "#a1d6f7",
                                            "#8deff0", "#8df7d5", "#9bfaa8", "#d1fd68", "#f5c683",
                                            "#fbb096", "#fc9292", "#f78ab3", "#f594e1", "#d992ed",
                                            "#a8a8f8", "#a1d6f7", "#8deff0", "#8df7d5", "#fa9b9b"
                            ];
                            return colorList[params.dataIndex];
                        }
                    }
                }
            }
        ]
    };
    BookFeeProp_RXNJ.setOption(option);
    $.ajax({
        type: "post",
        async: true,
        url: "ashx/BookFeeAnal.ashx?m=BookFeePropRXNJ",
        dataType: "json", //返回数据形式为json
        success: function(result) {
            var list = $.makeArray(result.BookFee_RXNJ);
            if (result) {
                console.log(list[].length);
                var RXNJ = [];
                var array = [];
                for (var i = ; i < list.length; i++) {
                    if (list[i].NJCost>) {
                        RXNJ.push(list[i].RXNJ);
                    }
                    var map = {};
                    map.name = list[i].RXNJ;
                    map.value = list[i].NJCost;
                    array[i] = map;
                }
                console.log(array);

                BookFeeProp_RXNJ.setOption(
                {
                    legend: {
                        data: RXNJ
                    },
                    series: [
                        {
                            // 根据名字对应到相应的系列
                            name: "教材费用分析",
                            type: "pie",
                            data: array
                        }
                    ]
                });
            }
        },
        error: function(errorMsg) {

            layer_msg_error("图表数据加载失败！", "");
        }
    });
}

js

↓这是饼状图

<div class="bing-img" id="Pie_GoodBookProp"></div>

aspx

function ShowGoodBookProp_Pie() {
    // 基于准备好的dom，初始化echarts实例
    var GoodBookPropChart = echarts.init(document.getElementById("Pie_GoodBookProp"));

    var option = {
        title: {},
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: "vertical",
            left: "left",
            data: ["优秀教材", "普通教材"]
        },
        series: [
            {
                name: "GoodBookProp",
                type: "pie",
                radius: "55%",
                center: ["50%", "60%"],
                data: [],
                itemStyle: {
                    emphasis: {
                        shadowBlur: ,
                        shadowOffsetX: ,
                        shadowColor: "rgba(0, 0, 0, 0.5)"
                    },
                    normal: {
                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function (params) {
                            // build a color map as your need.
                            var colorList = [
                                "#57c0ea", "#94e5ff"
                            ];
                            return colorList[params.dataIndex];
                        }
                    }
                }
            }
        ]
    };
    GoodBookPropChart.setOption(option);
    $.ajax({
        type: "post",
        async: true,
        url: "ashx/BookCountAnal.ashx?m=GoodBookProp",
        dataType: "json", //返回数据形式为json
        success: function (result) {
            var list = $.makeArray(result.GoodBookProp);
            if (result) {
                //console.log(list[0].length);
                var array = [];
                var i = ;
                for (var key in list[]) {
                    var map = {};
                    map.name = key;
                    map.value = list[][key];
                    array[i] = map;
                    i++;
                }
                //console.log(array);

                GoodBookPropChart.setOption(
                {
                    legend: {
                        data: ["优秀教材", "普通教材"]
                    },
                    series: [
                        {
                            // 根据名字对应到相应的系列
                            name: "优秀教材订购数量分析",
                            type: "pie",
                            data: array,
                            animation: false
                        }
                    ]
                });
                window.onresize = function () {
                    GoodBookPropChart.resize();
                };
                var picInfo1 = GoodBookPropChart.getDataURL();
                var imgobj1 = document.getElementById("Pie_GoodBookProp_Print");
                //console.log(picInfo1);
                //console.log(imgobj1);
                if (imgobj1) {
                    imgobj1.src = picInfo1;
                }
            }
        },
        error: function (errorMsg) {

            layer_msg_error("图表数据加载失败！", "");
        }
    });
}

js

或者是饼状图的半径随着数据的不同而不同的

function ShowBookScoreTop10_Pie() {
    var BookScoreTop10Chart = echarts.init(document.getElementById("Pie_BookScore_top10"));

    window.onresize = function () {
        BookScoreTop10Chart.resize();
    };
    var option = {
        title: {},

        tooltip: {},

        visualMap: {},
        series: []
    };
    BookScoreTop10Chart.setOption(option);
    $.ajax({
        type: "post",
        async: true,
        url: "ashx/BookEvaluateAnal.ashx?m=BookScoreTop10",
        dataType: "json", //返回数据形式为json
        success: function (result) {
            var list = $.makeArray(result.BookScore_Top10);
            console.log(list);
            if (result) {
                console.log(list[].length);
                var array = [];
                var BookName = [];
                for (var i = ; i < list.length; i++) {
                    BookName.push(list[i].BookName);
                    var map = {};
                    map.name = list[i].BookName;
                    map.value = list[i].PJScore;
                    array[i] = map;
                }
                console.log(array);
                BookScoreTop10Chart.setOption(
                {
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },

                    legend: {
                        orient: "horizontal",
                        left: "left",
                        data: BookName,
                        width:
                    },
                    visualMap: {
                        show: false,
                        min: ,
                        max: ,
                        inRange: {
                            colorLightness: [, ]
                        }
                    },
                    series: [
                        {
                            name: "教材综合得分",
                            type: "pie",
                            radius: "55%",
                            center: ["80%", "50%"],
                            data: array.sort(function (a, b) { return a.value - b.value }),
                            roseType: "angle",
                            label: {
                                normal: {
                                    textStyle: {
                                        color: "rgba(255, 255, 255, 0.3)"
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    lineStyle: {
                                        color: "rgba(255, 255, 255, 0.3)"
                                    },
                                    smooth: 0.2,
                                    length: ,
                                    length2:
                                }
                            },
                            itemStyle: {
                                normal: {
                                    //color: "#c23531",
                                    color: function (params) {
                                        // build a color map as your need.
                                        var colorList = [
                                            "#fd9bc4", "#fa98e6", "#e19af5", "#a8a8f8", "#a1d6f7",
                                            "#8deff0", "#8df7d5", "#9bfaa8", "#d1fd68", "#f5c683",
                                            "#fbb096", "#fc9292", "#f78ab3", "#f594e1", "#d992ed",
                                            "#a8a8f8", "#a1d6f7", "#8deff0", "#8df7d5", "#fa9b9b"
                                        ];
                                        return colorList[params.dataIndex];
                                    }
                                }
                            },
                            animation: false,

                            animationType: "scale",
                            animationEasing: "elasticOut",
                            animationDelay: function (idx) {
                                return Math.random() * ;
                            }
                        }
                    ]
                });

                var picInfo1 = BookScoreTop10Chart.getDataURL();
                var imgobj1 = document.getElementById("Pie_BookScore_top10_Print");
                if (imgobj1) {
                    imgobj1.src = picInfo1;
                }
            }
        },
        error: function (errorMsg) {

            layer_msg_error("图表数据加载失败！", "");
        }
    });
}

js

↓这是折线图

  <div class="zx-img" id="bar_BaoYouLv"></div>

aspx

function bar_BaoYouLv() {
    barBaoYouLv = echarts.init(document.getElementById("bar_BaoYouLv"),
    {
        width: document.getElementById("bar_BaoYouLv").width
    });
    $.ajax({
        type: "post",
        async: true,
        url: "ashx/BaoYouLvAnal.ashx?m=BaoYouLv_School",
        dataType: "json", //返回数据形式为json
        success: function(result) {
            if (result) {
                //console.log(result.BaoYouLvList);
                //console.log(result.BaoYouLvList.xAxisData);
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: ""
                    },
                    tooltip: {
                        trigger: "axis"
                    },
                    legend: {
                        data: ["教材订购数量"]
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            interval: ,
                            rotate: ,
                            margin: ,
                            textStyle: {
                                fontSize:
                            }
                        },
                        data: result.BaoYouLvList.xAxisData
                    },
                    grid: {
                        bottom:
                    },
                    yAxis: [
                        {
                            type: "value",
                            axisLabel: {
                                show: true,
                                interval: "auto",
                                formatter: "{value} %"
                            },
                            show: true
                        }
                    ],
                    series: [
                        {
                            name: "教材订购数量",
                            type: "line",
                            data: result.BaoYouLvList.seriesData,
                            markPoint: {
                                data: [
                                    { type: "max", name: "最大值" },
                                    { type: "min", name: "最小值" }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: "average", name: "平均值" }
                                ]
                            },
                            itemStyle: {
                                normal: {
                                    color:'#57c0ea'  ,
                                    lineStyle:{
                                        color:'#57c0ea'
                                    }
                                    ,
                                    //以下为是否显示，显示位置和显示格式的设置了
                                    label: {
                                        show: false,
                                        position: "top",
                                        //                             formatter: '{c}'
                                        //formatter: '{b}\n{c}'
                                        formatter: "{c} %" //百分比
                                    }
                                }
                            }
                        }
                    ]
                };
                barBaoYouLv.setOption(option);
                var picInfo = barBaoYouLv.getDataURL();
                var imgobj = document.getElementById("bar_BaoYouLv_Print");
                if (imgobj) {
                    imgobj.src = picInfo;
                }
            }
        },
        error: function(errorMsg) {

            layer_msg_error("图表数据加载失败！", "");
        }
    });
}

js

↓这是点阵图

  <div class="zhu-img-4" id="Point_BKTime"></div>

aspx

var BKTimeChart;
function ShowBKTime_Point() {
    BKTimeChart = echarts.init(document.getElementById('Point_BKTime'));
    var option = {
        grid: {
            bottom:
        },
        tooltip: {
            formatter: '{a}: ({c})'
        },
        xAxis: [
            { gridIndex: , min: , max: , name: '备课时长/天' }

        ],
        yAxis: [
            { gridIndex: , min: , max: , name: '学生人数/人' }
        ],
        series: []
    };
    BKTimeChart.setOption(option);
    $.ajax({
        type: "post",
        async: true,
        url: "ashx/BKTime.ashx?m=BKTime",
        dataType: "json", //返回数据形式为json
        success: function (result) {
            var list = $.makeArray(result.BKTime);
            console.log(list);
            if (result) {
                var array = [];
                for (var i = ; i < list.length; i++) {
                    array[i] = [list[i].BKDays, list[i].ClassCount];
                }
                console.log(array);
                BKTimeChart.setOption(
                {
                    series: [
                    {
                        name: '学生人数和备课时长分析',
                        type: 'scatter',
                        xAxisIndex: ,
                        yAxisIndex: ,
                        data: array
                    }]
                });
            }
        },
        error: function (errorMsg) {
            layer_msg_error("图表数据加载失败！", "");
        }
    });
}

js