ECharts快速入门

时间  2019-11-18
标签 echarts 快速 入门 繁體版
原文   原文链接

一.简介

　　ECharts，一个使用 JavaScript 实现的开源可视化库，能够流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。html

二.特色

　　1.丰富的可视化类型前端

　　　　ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，而且支持图与图之间的混搭。node

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只须要传入一个renderItem函数，就能够从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不须要操心其它事情。git

　　　　你能够在下载界面下载包含全部图表的构建文件，若是只是须要其中一两个图表，又嫌包含全部图表的构建文件太大，也能够在在线构建中选择须要的图表类型后自定义构建。github

　　2.多种数据格式无需转化能够直接使用canvas

　　　　ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，经过简单的设置 encode 属性就能够完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，并且多个组件可以共享一份数据而不用克隆。小程序

为了配合大数据量的展示，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中能够占用更少的内存，对 GC 友好等特性也能够大幅度提高可视化应用的性能。微信小程序

 　　3.千万数据的前端展现浏览器

　　　　经过增量渲染技术（4.0+），配合各类细致的优化，ECharts 可以展示千万级的数据量，而且在这个数据量级依然可以进行流畅的缩放平移等交互。微信

几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间。所以 ECharts 同时提供了对流加载（4.0+）的支持，你可使用 WebSocket 或者对数据分块后加载，加载多少渲染多少！不须要漫长地等待全部数据加载完再进行绘制。

 　　　　

　　4.跨平台

　　　　ECharts 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。VML 能够兼容低版本 IE，SVG 使得移动端再也不为内存担心，Canvas 能够轻松应对大数据量和特效的展示。不一样的渲染方式提供了更多选择，使得 ECharts 在各类场景下都有更好的表现。

除了 PC 和移动端的浏览器，ECharts 还能在 node 上配合 node-canvas 进行高效的服务端渲染（SSR）。从 4.0 开始咱们还和微信小程序的团队合做，提供了 ECharts 对小程序的适配！

 　　5.多维数据的支持以及丰富的视觉编码手段

　　　　ECharts 3 开始增强了对多维数据的支持。除了加入了平行坐标等常见的多维数据可视化工具外，对于传统的散点图等，传入的数据也能够是多个维度的。配合视觉映射组件 visualMap 提供的丰富的视觉编码，可以将不一样维度的数据映射到颜色，大小，透明度，明暗度等不一样的视觉通道。

　　　　

　　6.动态数据

　　　　ECharts 由数据驱动，数据的改变驱动图表展示的改变。所以动态数据的实现也变得异常简单，只须要获取数据，填入数据，ECharts 会找到两组数据之间的差别而后经过合适的动画去表现数据的变化。配合 timeline 组件可以在更高的时间维度上去表现数据的信息。

　　　　

　　7.绚丽的特效

　　　　ECharts 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。

　　　　

三.代码实现【柱状图】

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4    <meta charset="UTF-8">
  5    <title>ECharts入门</title>
  6 </head>
  7 <body>
  8    <!-- 为ECharts准备一个具有大小（宽高）的DOM容器-->
  9    <div id='main' style='width:800px;height:600px;'></div>
 10    <!-- 引入ECharts文件 -->
 11    <script src='js/echarts.js'></script>
 12    <script>
 13         //基于准备好的DOM，初始化echarts实例
 14         var myChart =echarts.init(document.getElementById('main'));
 15           //指定图表的配置项和数据
 16         var option = {
 17             title:{
 18                 text:'稽查工单热词top10',
 19                 textStyle:{
 20                     color:'blue'
 21                 },
 22                 subtext:'测试'
 23             },
 24             //提示框组件
 25             tooltip:{
 26                 //坐标轴触发，主要用于柱状图，折线图等
 27                 trigger:'axis'
 28             },
 29             //图例
 30             legend:{
 31                 data:['频度']
 32             },
 33             toolbox:{
 34                 show:true,
 35                 feature:{
 36                     mark:{show:true},
 37                     dataView:{show:true,readOnly:false},
 38                     magicType:{show:true,type:['line','bar']},
 39                     restore:{show:true},
 40                     saveAsImage:{show:true}
 41                 }
 42             },
 43             calculable:true,
 44             //横轴
 45             xAxis:{
 46                 type:'category',
 47                 name:'高频词汇',
 48                 data:["稽查","流程","核实","问题","现场","质量","管理","用户","系统","整改"],
 49                 axisLabel:{
 50                     show:true,
 51                     textStyle:{
 52                         fontSize:16
 53                     }
 54                 }
 55             },
 56             //纵轴
 57             yAxis:{
 58                   type:'value',
 59                   name:'次数',
 60                   axisLabel:{
 61                        show:true,
 62                        textStyle:{
 63                            fontSize:16
 64                        }
 65                    }
 66             },
 67             //系列列表。每一个系列经过type决定本身的图表类型
 68             series:[{
 69                 name:'次数',
 70                 type:'bar',
 71                 itemStyle:{
 72                     normal:{
 73                         color:function(params){
 74                             var colorList = [
 75                                 '#CC252B','#B5C334','#FCCE10','#E87C25','#27727B',
 76                                 '#FE8463','#9BCA63','#44D866','#F3A43B','#60C0DD'
 77                             ];
 78                             return colorList[params.dataIndex]
 79                         },
 80                         label:{
 81                             show:true,
 82                             position:'top',
 83                             formatter:'{c}',
 84                             fontSize:16
 85                         }
 86                     }
 87                 },
 88                 data:[236, 216, 186, 152, 132, 122, 121, 110, 101, 86]
 89                 //,
 90                 /*markPoint:{
 91                     data:[
 92                         {type:'max',name:'最大值'},
 93                         {type:'min',name:'最小值'}
 94                     ]
 95                 } ,
 96                 markLine:{
 97                     data:[
 98                         {type:'average',name:'平均值'}   
 99                     ]
100                 } */
101             }]
102         };
103         //使用刚指定的配置项和数据显示图表
104         myChart.setOption(option);
105    </script>
106 </body>
107 </html>

四.结果展现

　　

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程