Echarts案例-柱状图

一：先在官网下载

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>

 

posted @ 2019-11-03 19:03  博二爷  阅读(2395)  评论(0)  编辑  收藏  举报