echarts--例子

echarts使用例子:

  <script type="text/javascript">
        option = {
            title : {'x': 'center','y':'top','text': '时间关键指标趋势图'},
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                'x': '5%',
                'y': 'top',
                selectedMode:true,  // 是否启用点击事件
                data:['申请量（条）','成功数（条）','成功率（%）']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: false}, // 是否启用标记笔
                    dataView : {show: false, readOnly: false}, // 是否可以预览数据
                    magicType : {show: false, type: ['line', 'bar', 'stack', 'tiled']}, // 是否显示选择表格样式
                    restore : {show: false}, // 是否可以恢复
                    saveAsImage : {show: false} // 是否保存截图
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false ,
                    data : [<{$days_str}>]   // 底部x轴的数据 格式['a','b','c']
                }
            ],
            yAxis : [    // 设置左右Y轴数据
                       {'type' : 'value',
                        'splitNumber': '5',  // 设置Y轴数据的格数
                        'name':'申请量（条）/成功数（条）',  // 设置Y轴数据的标题
                        'axisLabel' : {formatter: '{value}'}
                        },
                     {'type' : 'value',
                        'splitNumber': '5',
                        'name':'成功率（%）',  
                        'axisLabel' : {formatter: '{value}'
                       },
                     axisLabel: {
                     show: true,
                     interval: 'auto',
                     formatter: '{value} %'    // 设置单位
                     }, }],
            series : [

                {
                    name:'成功率（%）',
                    type:'line',
                    yAxisIndex:1 ,  // 右边Y轴显示成功率等，默认是0
                    data:[<{foreach $success_str as $item}><{$item}>,<{/foreach}>]  // smarty遍历，数据格式 [1,2,3]
                },
                {
                    name:'申请量（条）',
                    type:'line',
                    data:[<{foreach $loannum_str as $item}><{$item}>,<{/foreach}>]
                },
                {
                    name:'成功数（条）',
                    type:'line',
                    data:[<{foreach $success_count_str as $item}><{$item}>,<{/foreach}>]
                }
            ]
        };

        // 为echarts对象加载数据
        var cityChart = echarts.init(document.getElementById('main0'));
        cityChart.setOption(option);

    </script>