echarts--例子

echarts使用例子:

 

 1  <script type="text/javascript">
 2        option = {
 3            title : {'x': 'center','y':'top','text': '时间关键指标趋势图'},
 4            tooltip : {
 5                trigger: 'axis'
 6            },
 7            legend: {
 8                'x': '5%',
 9                'y': 'top',
10                selectedMode:true,  // 是否启用点击事件
11                data:['申请量（条）','成功数（条）','成功率（%）']
12            },
13            toolbox: {
14                show : true,
15                feature : {
16                    mark : {show: false}, // 是否启用标记笔
17                    dataView : {show: false, readOnly: false}, // 是否可以预览数据
18                    magicType : {show: false, type: ['line', 'bar', 'stack', 'tiled']}, // 是否显示选择表格样式
19                    restore : {show: false}, // 是否可以恢复
20                    saveAsImage : {show: false} // 是否保存截图
21                }
22            },
23            calculable : true,
24            xAxis : [
25                {
26                    type : 'category',
27                    boundaryGap : false ,
28                    data : [<{$days_str}>]   // 底部x轴的数据 格式['a','b','c']
29                }
30            ],
31            yAxis : [    // 设置左右Y轴数据
                       {'type' : 'value',
                        'splitNumber': '5',  // 设置Y轴数据的格数
                        'name':'申请量（条）/成功数（条）',  // 设置Y轴数据的标题
                        'axisLabel' : {formatter: '{value}'}
                        },  
32                     {'type' : 'value',
                        'splitNumber': '5',
                        'name':'成功率（%）',  
                        'axisLabel' : {formatter: '{value}'
                       },
33                     axisLabel: {  
34                     show: true,  
35                     interval: 'auto',  
36                     formatter: '{value} %'    // 设置单位
37                     }, }],
38            series : [
39                
40                {
41                    name:'成功率（%）',
42                    type:'line',
43                    yAxisIndex:1 ,  // 右边Y轴显示成功率等，默认是0 
44                    data:[<{foreach $success_str as $item}><{$item}>,<{/foreach}>]  // smarty遍历，数据格式 [1,2,3]
45                },
46                {
47                    name:'申请量（条）',
48                    type:'line',
49                    data:[<{foreach $loannum_str as $item}><{$item}>,<{/foreach}>]
50                },
51                {
52                    name:'成功数（条）',
53                    type:'line',
54                    data:[<{foreach $success_count_str as $item}><{$item}>,<{/foreach}>]
55                }
56            ]
57        };
58 
59 
60 
61        // 为echarts对象加载数据
62        var cityChart = echarts.init(document.getElementById('main0'));
63        cityChart.setOption(option);
64 
65    </script>

 

posted @ 2018-04-12 18:08  QinXiao.Shou  阅读(415)  评论(0)  编辑  收藏  举报