echart(2),模拟数据导入篇
先上图,就是介样子的:
所模拟的效果就是讲左下角的li里面的数据取出来,然后用环形图的展示出数据。
看代码截图:
1.总的框架图:
2.循环取数据的js代码:
3.echart提供额官方api的代码
先来说一下for循环取出的数据吧:
1 var categorie = $(".data_items ul li"); 2 var categories = []; 3 for(var i = 0;i < categorie.length;i++){ 4 obj = {}; 5 obj.name = $(categorie[i]).find("span").html(); 6 obj.value = $(categorie[i]).find("b").html(); 7 categories.push(obj); 8 }
用jq的方法取出dom树上的数据,categorie是一个数组,循环这个数组,取数据。在for循环外面声明一个空数组, categories = [],里面声明一个对象(一定在里面声明),在外面声明的对象,在将obj压进数组的时候,会一直保存循环的最后一个值。然后给obj添加属性作为echart的数据接口。最后,categories.push(obj),obj压进数组。这个还是比较简单的。categories这个数组将是我们往下面的框架中添加的数据接口的数组。就是上面图示的位置。
下面一段是api的代码,没啥好说的,有兴趣的可以研究这个框架的数据结构,设计模式,看看它为什么这么设计这段代码:
1 // 指定图表的配置项和数据 2 option = { 3 tooltip: { 4 trigger: 'item', 5 formatter: "{a} <br/>{b}: {c} ({d}%)" 6 }, 7 legend: { 8 orient: 'vertical', 9 x: 'left', 10 data:categories 11 }, 12 series: [ 13 { 14 name:'访问来源', 15 type:'pie', 16 radius: ['50%', '70%'], 17 avoidLabelOverlap: false, 18 label: { 19 normal: { 20 show: false, 21 position: 'center' 22 }, 23 emphasis: { 24 show: true, 25 textStyle: { 26 fontSize: '30', 27 fontWeight: 'bold' 28 } 29 } 30 }, 31 labelLine: { 32 normal: { 33 show: false 34 } 35 }, 36 data:categories 37 } 38 ] 39 }; 40 41 // 使用刚指定的配置项和数据显示图表。 42 myChart.setOption(option);
结束:
echart还是很容易上手的,图表丰富,接口简单。很适合像我这样的小白学习。
echart(2),模拟数据导入篇相关推荐
- Splunk系列:Splunk数据导入篇(二)
一.简单概述 splunk支持多种多样的数据源,支持上传文件,监控本地的文件,配置通用转发器等方式.所有的设置基本上都可以通过Web页面.splunk CLI命令和直接修改配置文件(需重启splunk ...
- Hive面试-情景题总结【包含:建表脚本、数据导入脚本、模拟数据】
文章目录 前言: 建表语句 load脚本 常见sql情景题 前言: Hive面试除了理论知识外 情景题也占据了很大的比重 总结一下有代表性的几道情景题,可以根据这些情景题来推演其他相似的题型 本锦集并 ...
- 广告小程序后端开发(4.导入地区数据,修改adminx,修改models,手动添加模拟数据)...
1.将地区数据引入Area表: 1.全国地区的json数据: {"110000": {"name": "北京市","child&q ...
- cmd imp导入dmp文件_这是一篇长篇入门级数据库讲解:oracle数据库数据导入导出步骤...
正如标题一样,本文内容主要介绍了浅谈入门级oracle数据库数据导入导出步骤,文章通过步骤解析介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧!!! ...
- vue本地模拟数据之mockjs安装 - cmd篇
一.引言: 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 官网描述mockjs是: 前后端分离 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 数据类型丰富 通 ...
- oracle临时表经常被锁_这是一篇长篇入门级数据库讲解:oracle数据库数据导入导出步骤
正如标题一样,本文内容主要介绍了浅谈入门级oracle数据库数据导入导出步骤,文章通过步骤解析介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧!!! ...
- 【Python数据处理篇——DataFrame数据准备】DataFrame的创建、增删改查、数据导入等
欢迎访问我搞事情的[知乎账号]:Coffee 以及我的[B站漫威剪辑账号]:VideosMan 若我的笔记对你有帮助,请用小小的手指,点一个大大的赞哦. 关于DataFrame的相关知识,我还进行了汇 ...
- Solr 7 - 中文分词、数据导入、查询 基本使用篇
接着之前的 Solr 7 - CentOS 部署篇 继续 Go! 准备一下 /opt/solr-7.6.0 实际安装目录 /opt/solr 指向实际安装目录的链接 我们先链接一份 solr 命令到 ...
- sqlbulkcopy mysql_c# SqlBulkCopy实现批量从数据集中把数据导入到数据库中
今天遇到了一个导入类第一次见 SqlBulkCopy 可以实现从一个数据集导入到数据库中的表中 本来想从数据集中一条条遍历insert到库中 有了这个后发现: 只在把表与数据集的列做一下对应关系,再走 ...
最新文章
- (C++)变长数组vector的常见用法
- Could not find com.afollestad:material-dialogs:0.7.3.1解决
- R语言编程 第一讲 变量与赋值
- 一个按钮,如果5分钟内点击再次点击给予提示操作频繁,在JS里可以这样写
- java中的jdk切换(无需卸载原有jdk)
- php rmdir 返回值,php通过rmdir删除目录的简单用法
- mapreduce介绍_MapReduce:简单介绍
- 斯坦福大学博士后王鸿伟: 知识图谱辅助的个性化推荐系统
- 深度学习推理性能优化,一个越来越重要的话题
- ZebraDesigner-设计label
- ArcMap通过空间校正工具转换BJ-54坐标系到WGS-84坐标系
- 易语言 Sqlite表.读字段值 失败的解决方法
- android 拍照和选择相册图片剪切
- 几何光学学习笔记(20)- 5.3视场光阑
- 精美网页设计案例_用户体验设计的精美艺术
- amd服务器6300系列,AMD新款Opteron 6300服务器CPU终极评测
- Altium Designer画板子步骤
- 张勋说:简述球磨机内介质(钢球|钢棒|衬板)运动动力学(图文)
- 温度PID的整定过程
- unity 实现水的波纹效果
热门文章
- 55:Mysql用户管理|常用sql语句|mysql数据库备份恢复
- RocketMQ(六):namesrv再探
- 服务器市场步步为营:Intel发布新款至强Xeon E5-4600v4四路处理器
- 福师计算机导论在线作业一,福师《计算机导论》在线作业一..doc
- c# 添加中文描述 给enum_理解C# 核心概念 – C# 程序集本地化
- Ansible — Overview
- 5G 信令流程 — 5GC 的移动性管理(MM,Mobility Management)
- Linux 操作系统原理 — 文件系统 —文件
- 计算机组成原理 — CPU 中央处理器
- Linux_文件系统磁盘分区