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>