echarts一个页面动态加载两张不同图表数据

参考 http://www.stepday.com/topic/?877

        http://blog.csdn.net/for_china2012/article/details/45167161

 

// 路径配置
require.config({
    paths: {
        echarts: '../Content/js/common/build/dist'
    }
});

//加载折线图图表
function lineechartsLoad(ec) {

    // 基于准备好的dom，初始化echarts图表
    var myChart = ec.init(document.getElementById('echartDiv'));

    myChart.showLoading({
        text: HARDLOADING[getLanguage()],
        effect: 'bar',
        textStyle: {
            fontSize: 30
        }
    });

    var module = "";
    var xData = [];
    var ySyllable = [];
    var yChineseCharacter = [];
    var yWords = [];
    var ySentence = [];
    var ySituationalDialogue = [];
    var yArticle = [];

    $.ajax({
        cache: false,
        type: "POST",
        url: "/Home/ShowPastTestDate",
        async: false,
        error: function (request) {
            window.location.reload();
        },
        success: function (data) {
            if (data == "-1") {
                myChart.showLoading({
                    text: JQUERYTABLEINFO_NODATA_B[getLanguage()],
                    effect: 'bubble',
                    textStyle: {
                        fontSize: 30
                    }
                });
                return;
            }
            module = "以往测试";
            xData = eval("(" + data.XData + ")");
            ySyllable = eval("(" + data.YSyllable + ")");
            yChineseCharacter = eval("(" + data.YChineseCharacter + ")");
            yWords = eval("(" + data.YWords + ")");
            ySentence = eval("(" + data.YSentence + ")");
            ySituationalDialogue = eval("(" + data.YSituationalDialogue + ")");
            yArticle = eval("(" + data.YArticle + ")");
        }
    });

    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: [SYLLABLE[getLanguage()], CHINESECHARACTER[getLanguage()], WORDS[getLanguage()], SENTENCE[getLanguage()], SITUATIONALDIALOGUE[getLanguage()], ARTICLE[getLanguage()]]
        },
        toolbox: {//工具栏
            show: true,
            feature: {
                //mark: { show: true },
                //dataZoom: { show: true },//区域缩放
                //dataView: { show: true, readOnly: true },
                magicType: { show: true, type: ['line', 'bar'] },
                //restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        dataZoom: {//滚动条
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            y: 50,
            height: 20
        },
        xAxis: [
            {
                name: TIME[getLanguage()],
                type: 'category',
                data: xData,
                interval: 0,
                axisLabel: {//x轴文字
                    rotate: 40, //刻度旋转角度
                    textStyle: {
                        color: "black", //刻度颜色
                        fontSize: 11  //刻度大小
                    }
                },
                splitArea: { show: true },//显示格子阴影
            }
        ],
        grid: {
            y: 130,
            y2: 120// 可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
        },
        yAxis: [
             {
                 name: SCORE[getLanguage()],
                 type: 'value',
                 axisLabel: {//格式化数据
                     formatter: '{value}'
                 }
             }
        ],
        series: [
        {
            name: SYLLABLE[getLanguage()],
            smooth: true,//使折线图平滑显示
            type: 'line',
            data: ySyllable
        },
       {
           name: CHINESECHARACTER[getLanguage()],
           smooth: true,//使折线图平滑显示
           type: 'line',
           data: yChineseCharacter
       },
       {
           name: WORDS[getLanguage()],
           smooth: true,//使折线图平滑显示
           type: 'line',
           data: yWords
       },
       {
           name: SENTENCE[getLanguage()],
           smooth: true,//使折线图平滑显示
           type: 'line',
           data: ySentence
       },
        {
            name: SITUATIONALDIALOGUE[getLanguage()],
            smooth: true,//使折线图平滑显示
            type: 'line',
            data: ySituationalDialogue
        },
        {
            name: ARTICLE[getLanguage()],
            smooth: true,//使折线图平滑显示
            type: 'line',
            data: yArticle
        }
        ]
    }
    // 为echarts对象加载数据 
    myChart.setOption(option);
    myChart.hideLoading();
}

//加载扇形图图表
function pieechartsLoad(ec) {

    // 基于准备好的dom，初始化echarts图表
    var myChart = ec.init(document.getElementById('pieEchartDiv'));

    myChart.showLoading({
        text: HARDLOADING[getLanguage()],
        effect: 'bar',
        textStyle: {
            fontSize: 30
        }
    });

    var module = "";
    var data = [];
    $.ajax({
        cache: false,
        type: "POST",
        url: "/Home/ShowLearningTimeRatioDate",
        async: false,
        error: function (request) {
            window.location.reload();
        },
        success: function (sdata) {
            if (sdata == "-1") {
                myChart.showLoading({
                    text: JQUERYTABLEINFO_NODATA_B[getLanguage()],
                    effect: 'bubble',
                    textStyle: {
                        fontSize: 30
                    }
                });
                return;
            }
            module = "学习时间";
            data = eval("(" + sdata + ")");
        }
    });

    option = {
        title: {
            text: LEARNINGTIMERATIO[getLanguage()],
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b}" + ": {c}" + DAYS[getLanguage()] + "({d}%)"

        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: [data[0].name,
                data[1].name,
                data[2].name,
                data[3].name,
                data[4].name,
                data[5].name]
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        series: [
            {
                name: "ddd",
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                data: data
            }
        ]
    };

    // 为echarts对象加载数据 
    myChart.setOption(option);
    myChart.hideLoading();
}

$(function () {
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar', // 柱状图
            'echarts/chart/line',// 折线图
            'echarts/chart/pie', // 饼状图
        ],
        function (ec) {
            lineechartsLoad(ec);
            pieechartsLoad(ec);
        }
        );
});

效果：