图形报表echarts的使用1--折线图

ECharts，缩写来自Enterprise Charts，商业级数据图表，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

1、为ECharts准备一个具备大小（宽高）的Dom。
    <div id="chart" style="height: 800px; width: 980px;"></div>
2、新建<script>标签引入模块化单文件echarts.js
    <script src="${ctx}/resources/echarts/echarts.js"></script>
3、新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js）
 // 路径配置
require.config({
    paths: {
        echarts: '${ctx}/resources/echarts'   //echarts类库的根路径
    }
});
4、<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成
 // 使用
require(
    [
        'echarts',
        'echarts/chart/line',// 使用柱状图就加载line模块，按需加载
        'echarts/chart/bar'  // 使用柱状图就加载bar模块，按需加载
    ],
    requireCallback    //回调函数
);

//ec参数
function requireCallback (ec) {
    echarts = ec;
    myChart = echarts.init(document.getElementById('chart'));// 图表初始化的地方，在页面中要有一个地方来显示图表，他的ID是main 
    myChart.setOption(option); //显示图形 
}

option = {
            title : {--标题
                text : '组合图',
                textStyle:{ --文本样式
                        fontSize:18,
                    fontWeight: 'bolder',
                    color: '#000000'
                },  
                subtext:'${title}',--子标题
                subtextStyle:{  --子标题样式
                    fontSize: 14,
                    fontWeight: 'bolder',
                    color: '#ff0000'
                },
                x: "center", //标题水平方向位置
                y:'top'      //放置在上面
            },
            tooltip : { --气泡提示配置
                trigger: 'axis'
            },
             toolbox: {--右上角是否显示
                show : true,
            feature : {
                mark : {show: false},
                dataView : {show: true, readOnly: true},--是否显示数据及设置只读属性
                magicType : {show: true, type: ['line', 'bar']},--图例类型，这里的集合包含在配置使用的加载类库中
                restore : {show: true},
                saveAsImage : {show: true}--是否显示保存图片
            }
            },
            legend: {--图例配置
                data:['组合','组合1','组合2','组合3'],
                y:'bottom'
            },
            calculable : false, //是否启用拖拽重计算特性（********true的话，折线较宽 折线的宽带有差异）
            xAxis : [
                {
                    type : 'category',坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
                    boundaryGap : false,//坐标轴两端空白策略，数组内数值代表百分比
                    data : ${datesCharts},
                    name : '日期'
                }
            ],
            yAxis : [
                {
                    axisLabel : {
                        formatter: function (value) {
                            return value + '%';
                        }
                    },
                    type : 'value',//坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
                    name : '收益'
                    //boundaryGap : false,//坐标轴两端空白策略，数组内数值代表百分比
                    //boundaryGap : [0.9,0.5],
                    //,splitNumber: 4   // 数值轴用，分割段数，默认为5
                }
            ],
            series : [
                {
                    name:'组合',// 系列名称
                    type:'line',// 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                    //stack: '总量', //堆积 总量的统计
                    itemStyle: {
                        normal: {
                            label : {show: false, position: 'left'}, //在坐标轴交叉的地方是否显示值，及显示的位置
                            color:'#cbccb2',
                            lineStyle: {        // 系列级个性化折线样式
                                width: 2,
                                type: 'dotted'
                            }
                            }
                    },
                    data:${totalRevenueCharts1}
                },
                {
                    name:'组合1',
                    type:'line',
                    //stack: '总量',
                    itemStyle: {normal: {
                        label : {show: false, position: 'left'},
                        color:'#ff0000',
                        lineStyle: {        // 系列级个性化折线样式
                            width: 2,
                            type: 'solid'
                        }
                    }},
                    data:${manCangCharts}
                }
                ,
                {
                    name:'组合2',
                    type:'line',
                    //stack: '总量',
                    itemStyle: {normal: {
                        label : {show: false, position: 'left'},
                        color:'#00cc00',
                        lineStyle: {        // 系列级个性化折线样式
                            width: 2,
                            type: 'dashed'
                        }
                    }},
                    data:${kongCangCharts}
                },
                {
                    name:'组合3',
                    type:'line',
                    //stack: '总量',
                    itemStyle: {
                        normal: {
                            label : {show: false, position: 'left'},
                            color:'#0000ff'
                        }
                        /*, --在饼状图下有效
                        emphasis: {
                            label: {
                                show: true,
                                position: 'outer'
                            },
                            labelLine: {
                                show: true,
                                lineStyle: {
                                    color: 'red'
                                }
                            }
                        }*/
                    },
                    data:${shangzhengCharts}
                }
            ]
        };
               
效果图：