Echarts使用示例

来源：互联网发布：平安科技大数据应用编辑：程序博客网时间：2024/05/29 08:35

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <!--导入Echarts支持包-->    <script src="echarts.js" type="text/javascript"></script>    <title>QuickStart</title></head><body>    <!--为Echarts准备一个Div放置图表-->    <div id="main" style="width: 600px;height: 400px;"></div>     <script type="text/javascript">         //将echart初始化到div中         var myChart=echarts.init(document.getElementById("main"))  ;         //指定图表的配置项和数据         var option={             title:{                 text:"Echarts HelloWorld!!!"             } ,             tooltip:{}  ,             legend:{                 data:'销量'             },             xAxis:{                 data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']             },             yAxis:{}  ,             series:{                 name:'销量',                 type:'bar'  ,                 data:[5,20,36,10,10,20]             }         }  ;         // 使用刚指定的配置项和数据显示图表。         myChart.setOption(option)  ;     </script></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>柱状图</title>    <!--导入JQuery支持-->    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>    <!--导入百度ECharts支持-->    <script type="text/javascript" src="echarts.js"></script>    <script type="text/javascript">        $(function () {            var myChart=echarts.init(document.getElementById("main"));            var dataAxis = [];            var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];            var yMax = 500;            var dataShadow = [];            for (var i = 0; i < data.length; i++) {                dataShadow.push(yMax);                dataAxis.push(i)   ;            }            option = {                title: {                    text: '特性示例：渐变色 阴影 点击缩放',                    subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'                },                xAxis: {                    data: dataAxis,                    axisLabel: {                        inside: true,                        textStyle: {                            color: '#fff'                        }                    },                    axisTick: {                        show: false                    },                    axisLine: {                        show: false                    },                    z: 10                },                yAxis: {                    axisLine: {                        show: false                    },                    axisTick: {                        show: false                    },                    axisLabel: {                        textStyle: {                            color: '#999'                        }                    }                },                dataZoom: [                    {                        type: 'inside'                    }                ],                series: [                    { // For shadow                        type: 'bar',                        itemStyle: {                            normal: {color: 'rgba(0,0,0,0.05)'}                        },                        barGap:'-100%',                        barCategoryGap:'40%',                        data: dataShadow,                        animation: false                    },                    {                        type: 'bar',                        itemStyle: {                            normal: {                                color: new echarts.graphic.LinearGradient(                                    0, 0, 0, 1,                                    [                                        {offset: 0, color: '#83bff6'},                                        {offset: 0.5, color: '#188df0'},                                        {offset: 1, color: '#188df0'}                                    ]                                )                            },                            emphasis: {                                color: new echarts.graphic.LinearGradient(                                    0, 0, 0, 1,                                    [                                        {offset: 0, color: '#2378f7'},                                        {offset: 0.7, color: '#2378f7'},                                        {offset: 1, color: '#83bff6'}                                    ]                                )                            }                        },                        data: data                    }                ]            };            var zoomSize = 6;            myChart.on('click', function (params) {                console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);                myChart.dispatchAction({                    type: 'dataZoom',                    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],                    endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]                });            });            myChart.setOption(option)  ;        });    </script></head><body>    <div id="main" style="width: 1600px;height: 1000px"></div></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>折线图</title>    <!--导入JQuery支持-->    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>    <!--导入Echarts-->    <script type="text/javascript" src="echarts.js"></script>    <!--编写JS生成图表-->    <script type="text/javascript">        $(function () {             //1.初始化Echarts             var myChart=echarts.init(document.getElementById("main"));   //这里不允许使用JQuery简化             //2.创建Oprion            var option={                 title:{                     text:'折线图堆叠'                 } ,                tooltip:{                     trigger:'axis'                }  ,                legend:{                     data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']                } ,                grid:{                     left:'3%' ,                     right:'4%' ,                     bottom:'3%' ,                     containLabel:true                } ,                toolbox:{                     feature:{                         saveAsImage:{}                     }                } ,                xAxis:{                     type:'category',                     boundaryGap:false ,                     data:['周一','周二','周三','周四','周五','周六','周日']                } ,                yAxis:{                     type:'value'                }  ,                series:[                         {                                 name  :   '邮件营销',                                 type  :   'line'     ,                                 stack  :  '总量' ,                                 data   :  [120,132,101,134,90,230,210]                         } ,                         {                                 name  : '联盟广告' ,                                 type  :  'line'   ,                                 stack :  '总量'   ,                                 data  :[220,182,191,234,290,330,310]                         } ,                        {                                   name  :   '视频广告' ,                                   type  :  'line' ,                                   stack :  '总量' ,                                   data  :  [150,232,201,154,190,330,410]                        } ,                       {                                    name  :  '直接访问',                                    type  :  'line'  ,                                    stack :'   总量'  ,                                     data :[320,332,301,334,390,330,320]                       },                      {                                     name : '搜索引擎'  ,                                     type : 'line'   ,                                     stack : '总量' ,                                     data : [920,932,901,934,1290,1330,1320]                      }                ]            }            //3.设置Echarts的Option            myChart.setOption(option)  ;        });    </script></head><body>    <div id="main" style="width:1000px;height: 600px"></div></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>饼状图</title>    <!--导入Echarts支持-->    <script type="text/javascript" src="echarts.js"></script></head><body>    <div id="main" style="width: 1200px;height: 900px"></div>    <script type="text/javascript">         <!--初始化Echarts-->         var myChart=echarts.init(document.getElementById("main"))  ;         <!--创建Option-->         var option={              title :{                  text:'某站点用户访问来源',                  subtext:'纯属虚构' ,                  x:'center'              }  ,             tooltip:{                  trigger:'item'  ,                  formatter:'{a} <br/> {b} :{c} ({d}%)'             } ,             legend:{                  orient:'vertical' ,                  left:'left'   ,                  data:['直接营销','邮件营销','联盟广告','视频广告','搜索引擎']             } ,             series:[                 {                     name:'访问来源',                     type:'pie'   ,                     radius:'55%'   ,                     center:['50%','60%'],                     data:[                         {value:355,name:'直接访问'},                         {value:310,name:'邮件营销'},                         {value:234,name:'联盟广告'},                         {value:135,name:'视频广告'},                         {value:1548,name:'搜索引擎'}                     ],                     itemStyle:{                         emphasis:{                             shadowBlur:10 ,                             shadowOffsetX:0 ,                             shadowColor:'rgba(0,0,0,0.5)'                         }                     }                 }             ]         };         <!--配置Echarts的Option-->          myChart.setOption(option)   ;    </script></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>饼状图</title>    <!--导入JQuery支持-->    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>    <!--导入百度ECharts支持-->    <script type="text/javascript" src="echarts.js"></script>    <!--使用JS生成图表-->    <script type="text/javascript">         $(function () {             //1.初始化百度Echarts             var myChart=echarts.init(document.getElementById("main"));             //2.设置Option             var option={                  tooltip:{                      trigger:'item',                      formatter:"{a}<br/>{b}:{c}({d}%)"                  } ,                  legend:{                      orient:'vertical' ,                      x:'left'   ,                      data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']                  } ,                  series: [                      {                          name: '访问来源',                          type: 'pie',                          radius: ['50%', '70%'],                          avoidLabelOverlap: false,                          label: {                                      normal: {                                          show: false,                                          position: 'center'                                      },                                      emphasis: {                                          show: true,                                          textStyle: {                                              fontSize: '30',                                              fontWeight: 'bold'                                          }                                      }                                  }  ,                          labelLine: {                              normal: {                                  show: false                              }                          },                          data: [                              {value: 335, name: '直接访问'},                              {value: 310, name: '邮件营销'},                              {value: 234, name: '联盟广告'},                              {value: 135, name: '视频广告'},                              {value: 1548, name: '搜索引擎'}                          ]                      }                    ]             } ;             //3.配置百度Echarts的Option             myChart.setOption(option)   ;         });    </script></head><body>    <div id="main" style="width: 1200px;height: 800px">    </div></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

这里写图片描述

总结:百度ECharts到底怎么玩,思路很简单,通过Ajax技术获取数据,然后利用上面给的配置数据的模板设置数据data;Echarts步骤,先初始化(init),再配置Option,最后设置Option(myChart.setOption(option)),当然初始化前先用Ajax获取数据,获取不到数据一切都是个蛋；需要的技术支持:Ajax+JSON+JQuery+MVC架构,不会的赶紧补习吧；上面给你的示例鸟用没有,总结规律才是王道,其实ECharts简单到没有朋友

阅读全文

0 0