echarts的使用

该例为实现简单的柱形图和折线图结合的案例。

页面引入echarts.js

<script src="../js/echarts.min.js"></script>

为ECharts准备一个具备大小（宽高）的dom

<div id="container" style="width: 100%;height:100%;margin-top: 20px;border-top:solid 1px lightgray">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="MeetingCountByRootType" style="width:100%;height:400px;float: left;"></div>
</div>

js代码如下：

<script>
    loadDataFormApi();

    //异步加载API接口数据
    function loadDataFormApi(storeId) {
        <%--开始网络请求数据--%>
        $.ajax({
            url: "${basePath}main/analysisData",
            type: 'GET',
            data: {
                companyId:${Session_User_Login_Sign.group.branch.company.id}
            },
            success: function (result) {
                if (result.code == 0) {
                    updateEcharts(result.data)
                } else {
                    layer.alert(result.msg)
                }
            },
            error: function (data) {
                alert("网络请求失败，请重试！");
            }
        });

        function updateEcharts(data) {
            var jsonArray = data;
            var typeList = [];
            var countList = [];
            var readList = [];
            for (var i = 0; i < jsonArray.length; i++) {
                var jsonObject = data[i];
                typeList.push(jsonObject['rootName']);
                countList.push(parseInt(jsonObject['meetingCount']));
                readList.push(parseInt(jsonObject['readCount']));
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('MeetingCountByRootType'));
            var colors = ['#5793f3', '#675bba'];
            option = {
                title: {
                    text: '分类会议数量阅读量一览图',
                    subtext: '党员管理系统',
                    x: 'center'
                },
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    right: '10%',
                    left: '10%'
                },
                toolbox: {
                    right:10,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true},
                        magicType: {
                            type: ['line', 'bar', 'stack', 'tiled']
                        }
                    }
                },
                legend: {
                    show: true,
                    data: ['数量', '阅读量'],
                    left: 'left',
                    orient: 'vertical'
                },
                xAxis: {
                    type: 'category',//类目轴(category)
                    axisTick: {
                        interval: 0,
                        alignWithLabel: true
                    },
                    data: typeList
                },
                yAxis: [
                    {
                        type: 'value',//数值轴(value)
                        name: '数量',
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} 篇'
                        }
                    },
                    {
                        type: 'value',
                        name: '阅读量',
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} 个'
                        }
                    }
                ],
                series: [{
                    name: '数量',
                    type: 'bar',
                    data: countList
                },
                    {
                        name: '阅读量',
                        smooth: true,
                        type: 'line',
                        yAxisIndex: 1,
                        data: readList
                    }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
</script>

后台数据的查询在此不做展示，最终效果如下图所示：

参考文档：http://echarts.baidu.com/tutorial.html