码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts案例-柱状图

时间:2019-11-03 20:15:38      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:ext   tle   init   oct   一个   ima   导入   gen   charset   

一:先在官网下载

https://www.echartsjs.com/zh/download.html

然后再建立工程,导入这两个包:

技术图片

 

 写代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>ECharts</title>
 6     <!-- 引入 echarts.js -->
 7     <!-- 这里是加载刚下好的echarts.min.js,注意路径 -->
 8     <script src="echarts.min.js"></script>
 9 </head>
10 <body>
11     <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
12     <div id="main" style="width: 1000px;height:600px;"></div>
13     <script type="text/javascript">
14         // 基于准备好的dom,初始化echarts实例
15         var myChart = echarts.init(document.getElementById(main));
16         var option = {
17                 title : {
18                     text: 某地区蒸发量和降水量,
19                     subtext: 纯属虚构
20                 },
21                 tooltip : {
22                     trigger: axis
23                 },
24                 legend: {
25                     data:[蒸发量,降水量]
26                 },
27                 toolbox: {
28                     show : true,
29                     feature : {
30                         dataView : {show: true, readOnly: false},
31                         magicType : {show: true, type: [line, bar]},
32                         restore : {show: true},
33                         saveAsImage : {show: true}
34                     }
35                 },
36                 calculable : true,
37                 xAxis : [
38                     {
39                         type : category,
40                         data : [1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月]
41                     }
42                 ],
43                 yAxis : [
44                     {
45                         type : value
46                     }
47                 ],
48                 series : [
49                     {
50                         name:蒸发量,
51                         type:bar,
52                         data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
53                         markPoint : {
54                             data : [
55                                 {type : max, name: 最大值},
56                                 {type : min, name: 最小值}
57                             ]
58                         },
59                         markLine : {
60                             data : [
61                                 {type : average, name: 平均值}
62                             ]
63                         }
64                     },
65                     {
66                         name:降水量,
67                         type:bar,
68                         data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
69                         markPoint : {
70                             data : [
71                                 {name : 年最高, value : 182.2, xAxis: 7, yAxis: 183},
72                                 {name : 年最低, value : 2.3, xAxis: 11, yAxis: 3}
73                             ]
74                         },
75                         markLine : {
76                             data : [
77                                 {type : average, name : 平均值}
78                             ]
79                         }
80                     }
81                 ]
82             };
83 
84        // 使用刚指定的配置项和数据显示图表。
85         myChart.setOption(option);
86         myChart.on(click, function (params) {
87             window.open(https://www.baidu.com/s?wd= + encodeURIComponent(params.name));
88         });
89     </script>
90 </body>
91 </html>

 

Echarts案例-柱状图

标签:ext   tle   init   oct   一个   ima   导入   gen   charset   

原文地址:https://www.cnblogs.com/smartisn/p/11788471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!