第一次写博客，写的不到望大家见谅！

今天给大家分享一个纯js的插件（统计图），有知道的可以在下面评论一起谈论一下，刚学着的时候，我是看了好久才看懂的一个基本结构，到后来我才知道原来直接去原网站上找到复制下来js就可以了。

这是他的网址：https://www.echartsjs.com/zh/index.html   这个是人家官方的网址，大家可以现去看一下人家的效果，效果蛮多的，基本上可以满足基本项目的需求。

下面我来给打架举一个例子：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>统计图</title>
  7.  
  8. </head>
  9.  
  10. <body>
  11.     <div id="main" style="width: 100vw;height: 100vh;"></div>
  12.     <script src="js/echarts.js"></script>
  13.     <script>
  14.         // 基于准备好的dom，初始化echarts实例
  15.         var myChart = echarts.init(document.getElementById('main'));
  16.         // 指定图表的配置项和数据
  17.         var option = {
  18.             title: {
  19.                 text: '堆叠区域图'
  20.             },
  21.             tooltip: {
  22.                 trigger: 'axis',
  23.                 axisPointer: {
  24.                     type: 'cross',
  25.                     label: {
  26.                         backgroundColor: '#6a7985'
  27.                     }
  28.                 }
  29.             },
  30.             legend: {
  31.                 data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  32.             },
  33.             toolbox: {
  34.                 feature: {
  35.                     saveAsImage: {}
  36.                 }
  37.             },
  38.             grid: {
  39.                 left: '0%',
  40.                 right: '4%',
  41.                 bottom: '3%',
  42.                 containLabel: true
  43.             },
  44.             xAxis: [
  45.                 {
  46.                     type: 'category',
  47.                     boundaryGap: false,
  48.                     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  49.                 }
  50.             ],
  51.             yAxis: [
  52.                 {
  53.                     type: 'value'
  54.                 }
  55.             ],
  56.             series: [
  57.                 {
  58.                     name: '邮件营销',
  59.                     type: 'line',
  60.                     stack: '总量',
  61.                     areaStyle: {},
  62.                     data: [120, 132, 101, 134, 90, 230, 210]
  63.                 },
  64.                 {
  65.                     name: '联盟广告',
  66.                     type: 'line',
  67.                     stack: '总量',
  68.                     areaStyle: {},
  69.                     data: [220, 182, 191, 234, 290, 330, 310]
  70.                 },
  71.                 {
  72.                     name: '视频广告',
  73.                     type: 'line',
  74.                     stack: '总量',
  75.                     areaStyle: {},
  76.                     data: [150, 232, 201, 154, 190, 330, 410]
  77.                 },
  78.                 {
  79.                     name: '直接访问',
  80.                     type: 'line',
  81.                     stack: '总量',
  82.                     areaStyle: { normal: {} },
  83.                     data: [320, 332, 301, 334, 390, 330, 320]
  84.                 },
  85.                 {
  86.                     name: '搜索引擎',
  87.                     type: 'line',
  88.                     stack: '总量',
  89.                     label: {
  90.                         normal: {
  91.                             show: true,
  92.                             position: 'top'
  93.                         }
  94.                     },
  95.                     areaStyle: { normal: {} },
  96.                     data: [820, 932, 901, 934, 1290, 1330, 1320]
  97.                 }
  98.             ]
  99.         };
  100.  
  101.         // 使用刚指定的配置项和数据显示图表。
  102.         myChart.setOption(option);
  103.     </script>
  104.  
  105. </body>
  106.  
  107. </html>

这个例子中的js是本地的，你想下载的话就去  https://echarts.apache.org/zh/download.html   ( 官方)

他上面还有使用的具体步骤，以及详细的操作，不知道的小伙伴，可以是看看 ，这个插件我最看重的一点就是，他是原生js写的，本人比较喜欢原生这些东西，虽然看起来有点费时间，但是只有从原生那才可以了解到一门语言的精髓，

最后感谢官方提供了这么方便的插件，以及祝各位程序猿们工作顺利，

第一次写  有什么需要补充的大家也可以说出来 我们讨论一下，一起提高，一起进步！

纯js的统计图插件-统计图的更多相关文章

  1. 纯js客服插件集qq、旺旺、skype、百度hi、msn

    原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...

  2. kPagination纯js实现分页插件

    kPagination分页插件 纯js分页插件,压缩版本~4kb,样式可以自定义 demo 使用方法 <div id="pagination"></div> ...

  3. vue日历(纯 js,没用任何插件和组件)

    效果图: 代码:   <template> <div class="calender"> <div class="top"> ...

  4. js 统计图插件chart.js

    chart是一个纯js插件,它功能强大小巧使用也很简单. 第一步引入 chart.js . <script type="text/javascript" src=" ...

  5. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  6. arcgis api for js之echarts开源js库实现地图统计图分析

    前面写过一篇关于arcgis api for js实现地图统计图的,具体见:http://www.cnblogs.com/giserhome/p/6727593.html 那是基于dojo组件来实现图 ...

  7. arcgis api 3.x for js 之 echarts 开源 js 库实现地图统计图分析（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. arcgis api 4.x for js 结合 Echarts4 实现统计图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  9. js封装成插件

    由于项目原因,工作一年多还没用js写过插件,项目太成熟,平时基本都是在使用已经封装好的功能插件.感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件,所以就去网上学习了 ...

随机推荐

  1. uiautomatorviewer 报错 Error while obtaining UI hierarchy XML file: com.android.ddmlib.SyncException: Remote object doesn't exist!

    在进行自动化时经常需要使用到 uiautomatorviewer获取控件的各个属性,然后在脚本中通过各个控件的属性来操作. 如果使用的是uiautomator2的话,一般都是使用weditor这个来查 ...

  2. js全局属性/函数

    全局函数 eval () isFinite ()             检查某个值是否为有穷大的数 isNaN () 检查某个值是否是数字                     返回true或fa ...

  3. Asia Yokohama Regional Contest 2018 G题 What Goes Up Must Come Down

    链接 G题 https://codeforces.com/gym/102082 使其成为单峰序列需要交换多少次相邻的数. 树状数组维护逆序对. 对于每个序列中的数,要么在单峰的左侧,要么在单峰的右侧, ...

  4. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题

    小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...

  5. git commit vim报错

    window平台,使用git bash,填写git commit时,退出时vim报错: 错误信息 启动失败 Vim: Caught deadly signal SEGV 在工程目录下,进.git目录, ...

  6. PostgreSQL数据库一些tricks

    PostgreSQL自带Pgadmin客户端,可用于访问本地和远程PG库,一些tricks如下: 1.联合查询 SELECT * FROM table1 INNER JOIN table2 ON ta ...

  7. Python 爬虫从入门到进阶之路（一）

    通用爬虫和聚焦爬虫 根据使用场景,网络爬虫可分为 通用爬虫 和 聚焦爬虫 两种. 通用爬虫 通用网络爬虫 是 捜索引擎抓取系统(Baidu.Google.Yahoo等)的重要组成部分.主要目的是将互联 ...

  8. easyswoole对接支付宝,微信支付

    在easyswoole中,已经开发好了相关的支付组件,只需要引入即可: composer require easyswoole/pay pay组件支持协程 支付宝 支付方法 支付宝支付目前支持 7 种 ...

  9. 简单实用的原生PHP分页类

    一款简单实用的原生PHP分页类,分页按钮样式简洁美观,页码多的时候显示“...”,也是挺多网站用的效果 核心分页代码 include_once("config.php"); req ...

  10. canvas绘制星星和月亮

    用变量的方式绘制一个五角星,首先求五角星十个顶点的坐标. 可以把每个五角星看成外顶点用一个大圆绘制,内顶点用小圆绘制.在坐标系(0deg)下,根据每个顶点的角度和圆的半径求得x,y. 而每个大顶点相差 ...