纯js的统计图插件-统计图
第一次写博客，写的不到望大家见谅！
今天给大家分享一个纯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的统计图插件-统计图的更多相关文章
- 纯js客服插件集qq、旺旺、skype、百度hi、msn
原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...
- kPagination纯js实现分页插件
kPagination分页插件 纯js分页插件,压缩版本~4kb,样式可以自定义 demo 使用方法 <div id="pagination"></div> ...
- vue日历(纯 js,没用任何插件和组件)
效果图: 代码: <template> <div class="calender"> <div class="top"> ...
- js 统计图插件chart.js
chart是一个纯js插件,它功能强大小巧使用也很简单. 第一步引入 chart.js . <script type="text/javascript" src=" ...
- baguetteBox.js响应式画廊插件(纯JS)
baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...
- arcgis api for js之echarts开源js库实现地图统计图分析
前面写过一篇关于arcgis api for js实现地图统计图的,具体见:http://www.cnblogs.com/giserhome/p/6727593.html 那是基于dojo组件来实现图 ...
- arcgis api 3.x for js 之 echarts 开源 js 库实现地图统计图分析（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 4.x for js 结合 Echarts4 实现统计图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- js封装成插件
由于项目原因,工作一年多还没用js写过插件,项目太成熟,平时基本都是在使用已经封装好的功能插件.感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件,所以就去网上学习了 ...
随机推荐
- java 坐标系运算 判断一个地理坐标是否在电子围栏 圆、矩形、多边形区域内
转载自:https://blog.csdn.net/Deepak192/article/details/79402694 测试没问题,我用的是原始坐标:要注意的是坐标转换问题,要看当前是属于什么坐标系 ...
- java基础 - 什么是hashmap的负载因子，hashmap的容量（即桶个数）为什么是2的幂次
HashMap的负载因子是指,比如容量为16,负载因子为0.75,则当HashMap的元素个数达到16*0.75=12时,触发扩容.(16和0.75是初始默认的容量和负载因子). HashMap的容量 ...
- TestNG入门教程-12-Java代码执行testng.xml和失败后重跑
前面我们都在IDEA上右键testng.xml文件来运行testng用例,这个在编写测试用例过程是 可以这么做,但是,如果测试用例写完了,也是这么做吗?有没有什么方法,例如自动化去实现.测试脚本维护后 ...
- ansible执行带有环境变量的脚本不生效
1背景 jenkins发布时,使用ansible执行远程主机上的启动tomcat脚本发现不生效,启动tomcat的脚本中有环境变量. ansible主机为:172.16.35.8 tomcat服务器为 ...
- 使用ping网络工具编写Shell脚本程序实现网络连接故障初步排查
在学习ping命令的时候,突发奇想:为何不使用ping命令对网络连接故障进行排查? 具体思路: 1. ping 127.0.0.1 (虚拟网卡地址)以检查主机的TCP/IP协议栈是否正常. 2. p ...
- 解决 vscode 中 nuget 插件无法获取包版本的问题
解决 vscode 中 nuget 插件无法获取包版本的问题 1.问题描述 大概在今年的7月份左右,我忽然发现 NuGet Package Manager 拓展没法正常使用了,只能查询到包: 选完包之 ...
- tensorflow-- Dataset创建数据集对象
tf.data模块包含: experimental 模块 Dataset 类 FixedLengthRecordDataset 类 TFRecordDataset 类 TextLineDataset ...
- Mybatis中返回Map
在Mybatis中,我们通常会像下边这样用: 返回一个结果 User selectOne(User user); <select id="selectOne" paramet ...
- （五十七）c#Winform自定义控件-传送带（工业）-HZHControls
官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...
- 立 Flag
行动目标 立Flag时间 计划开始时间 开始时间 行动寄语 通关目标 打卡1 打卡2 打卡3 打卡4 打卡5 打卡6 C# 7.0 核心技术指南 2019-11-1 1号 1号 打好C#基础 看完.实 ...