Echarts使用

2023-03-15 15:07:08

Echarts使用

前言:

和朋友聊天的过程中,朋友提到了Echarts.我当时不知道那个是用来做什么的.回到家我就百度了,开始自己看文档学习.本文是自己的相关学习总结,如果有出入的地方望广大朋友能够给予指点.ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。所以需要做图表的朋友们,你们可以使用起来.

1、获取Echarts

需要在官网上下载http://echarts.baidu.com

2、Echarts的使用

　 (1)下载后,新建一个web应用程序,然后添加刚刚下载的文件.如图所示:

　　(2)头部引入

  <script src="echarts.min.js"></script>

　　(3)下面就是我学习的一个例子,是一个柱状图(代码如下:)

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Echart</title>
     <script src="echarts.min.js"></script>
 </head>
 <body>
 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
 <div id="main" style="width: 800px;height:400px;"></div>
 <script>
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.getElementById('main'));
     option = {
         title : {
             text: '某地区蒸发量和降水量',
             subtext: '纯属虚构'
         },
         tooltip : {
             trigger: 'axis'
         },
         legend: {
             data:['蒸发量','降水量']
         },
         toolbox: {
             show : true,
             feature : {
                 dataView : {show: true, readOnly: false},
                 magicType : {show: true, type: ['line', 'bar']},
                 restore : {show: true},
                 saveAsImage : {show: true}
             }
         },
 //        animationDuration : 2000,这里是自己修改的地方,使得它的动画变得缓慢
         animationDuration : 6000,
         calculable : true,
         xAxis : [
             {
                 type : 'category',
                 data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
             }
         ],
         yAxis : [
             {
                 type : 'value'
             }
         ],
         series : [
             {
                 name:'蒸发量',
                 type:'bar',
                 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],
                 markPoint : {
                     data : [
                         {type : 'max', name: '最大值'},
                         {type : 'min', name: '最小值'}
                     ]
                 }
             },
             {
                 name:'降水量',
                 type:'bar',
                 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],
                 markPoint : {
                     data : [
                         {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                         {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                     ]
                 },
                 markLine : {
         data : [
             {type : 'average', name : '平均值'}
         ]
     }
     }
     ]
     };
     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);
 </script>
 </body>
 </html>

　　(4)代码运行后的效果(如下图所示)

　　(5)这里有几个注意的要点

　　　　a:在<body>要为 ECharts 准备一个具备大小（宽高）的 DOM ,该要点在代码注释中已标注

　　　　b:可以自己做项目的需求,来查阅相关文档,我的视力代码中,如果有不明白的地方,可以看Echarts官网文档中的配置手册

　　　　c:Echarts官网中也提供了很多的官方示例,供我们学习.

3、总结

　　好了，今天就总结到这里了，希望能给大家带来一些帮助。

码农公寓

Echarts使用

相关文章