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

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

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

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

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>统计图</title>

</head>

<body>

    <div id="main" style="width: 100vw;height: 100vh;"></div>

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

    <script>

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var option = {

            title: {

                text: '堆叠区域图'

            },

            tooltip: {

                trigger: 'axis',

                axisPointer: {

                    type: 'cross',

                    label: {

                        backgroundColor: '#6a7985'

                    }

                }

            },

            legend: {

                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']

            },

            toolbox: {

                feature: {

                    saveAsImage: {}

                }

            },

            grid: {

                left: '0%',

                right: '4%',

                bottom: '3%',

                containLabel: true

            },

            xAxis: [

                {

                    type: 'category',

                    boundaryGap: false,

                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

                }

            ],

            yAxis: [

                {

                    type: 'value'

                }

            ],

            series: [

                {

                    name: '邮件营销',

                    type: 'line',

                    stack: '总量',

                    areaStyle: {},

                    data: [120, 132, 101, 134, 90, 230, 210]

                },

                {

                    name: '联盟广告',

                    type: 'line',

                    stack: '总量',

                    areaStyle: {},

                    data: [220, 182, 191, 234, 290, 330, 310]

                },

                {

                    name: '视频广告',

                    type: 'line',

                    stack: '总量',

                    areaStyle: {},

                    data: [150, 232, 201, 154, 190, 330, 410]

                },

                {

                    name: '直接访问',

                    type: 'line',

                    stack: '总量',

                    areaStyle: { normal: {} },

                    data: [320, 332, 301, 334, 390, 330, 320]

                },

                {

                    name: '搜索引擎',

                    type: 'line',

                    stack: '总量',

                    label: {

                        normal: {

                            show: true,

                            position: 'top'

                        }

                    },

                    areaStyle: { normal: {} },

                    data: [820, 932, 901, 934, 1290, 1330, 1320]

                }

            ]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</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. CodeForces-1265E（期望）

    题意 有1~n镜子,每个镜子说你漂亮的概率是pi/100,如果第i个回答你漂亮那么就一直问到第n个说漂亮为止,否则重新从1开始问,一天只问一个镜子,问直到镜子n说你漂亮的期望天数. 思路 设Ei为问到 ...

  2. JSON.parse和JSON.stringify方法

    1.JSON.parse(“要转换的数据”) 2.JSON.stringify(“要转化的数据”) 3.首先,两个方法的用法是有差别的: ①.JSON.stringify是从一个对象中解析出字符串 ② ...

  3. fiddler 进行Android/IOS代理配置抓包

    1.准备:Android+IOS设备 下载:fiddler抓包工具,不是最新版的链接:   链接:https://pan.baidu.com/s/1BaBfu2H4xgpsh1wmkfC8aQ     ...

  4. ubuntu18.04因java路径原因启动jenkins失败

    我的云服务器ubuntu18.04上本来装了jenkins,今天安装完tomcat后,将原有的openjdk卸载了,安装了jdk8u192, 此时浏览器访问8080端口显示的就是tomcat安装成功的 ...

  5. 浅谈python面向对象编程和面向过程编程的区别

    面向过程:分析出解决问题所需要的步骤,然后用函数把这些步骤一步步实现,使用的时候再一个个的依次调用即可. 优点:性能高 缺点:相较于面向对象而言,不易维护,不易复用,不易扩展 适合于小型的项目面向对象 ...

  6. java获取当前年份、月份和日期字符串等

    Java获取当前年份.月份和日期是通过Calendar类的实例对象来获取的. 首先创建一个Calendar类的实例对象,Calendar类属于java.util包. Calendar calendar ...

  7. 前端之JavaScript基础及使用方法

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

  8. .net core 反射的介绍与使用

      1. 概述反射 通过反射可以提供类型信息,从而使得我们开发人员在运行时能够利用这些信息构造和使用对象. 反射机制允许程序在执行过程中动态地添加各种功能.   2. Type类的介绍  是BCL(基 ...

  9. C#中在多个地方调用同一个触发器从而触发同一个自定义委托的事件

    场景 在Winfom中可以在页面上多个按钮或者右键的点击事件中触发同一个自定义的委托事件. 实现 在位置一按钮点击事件中触发 string parentPath = System.IO.Directo ...

  10. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...