先上图,就是介样子的:

  所模拟的效果就是讲左下角的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),模拟数据导入篇相关推荐

  1. Splunk系列:Splunk数据导入篇(二)

    一.简单概述 splunk支持多种多样的数据源,支持上传文件,监控本地的文件,配置通用转发器等方式.所有的设置基本上都可以通过Web页面.splunk CLI命令和直接修改配置文件(需重启splunk ...

  2. Hive面试-情景题总结【包含:建表脚本、数据导入脚本、模拟数据】

    文章目录 前言: 建表语句 load脚本 常见sql情景题 前言: Hive面试除了理论知识外 情景题也占据了很大的比重 总结一下有代表性的几道情景题,可以根据这些情景题来推演其他相似的题型 本锦集并 ...

  3. 广告小程序后端开发(4.导入地区数据,修改adminx,修改models,手动添加模拟数据)...

    1.将地区数据引入Area表: 1.全国地区的json数据: {"110000": {"name": "北京市","child&q ...

  4. cmd imp导入dmp文件_这是一篇长篇入门级数据库讲解:oracle数据库数据导入导出步骤...

    正如标题一样,本文内容主要介绍了浅谈入门级oracle数据库数据导入导出步骤,文章通过步骤解析介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧!!! ...

  5. vue本地模拟数据之mockjs安装 - cmd篇

    一.引言: 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 官网描述mockjs是: 前后端分离 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 数据类型丰富 通 ...

  6. oracle临时表经常被锁_这是一篇长篇入门级数据库讲解:oracle数据库数据导入导出步骤

    正如标题一样,本文内容主要介绍了浅谈入门级oracle数据库数据导入导出步骤,文章通过步骤解析介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧!!! ...

  7. 【Python数据处理篇——DataFrame数据准备】DataFrame的创建、增删改查、数据导入等

    欢迎访问我搞事情的[知乎账号]:Coffee 以及我的[B站漫威剪辑账号]:VideosMan 若我的笔记对你有帮助,请用小小的手指,点一个大大的赞哦. 关于DataFrame的相关知识,我还进行了汇 ...

  8. Solr 7 - 中文分词、数据导入、查询 基本使用篇

    接着之前的 Solr 7 - CentOS 部署篇 继续 Go! 准备一下 /opt/solr-7.6.0 实际安装目录 /opt/solr 指向实际安装目录的链接 我们先链接一份 solr 命令到 ...

  9. sqlbulkcopy mysql_c# SqlBulkCopy实现批量从数据集中把数据导入到数据库中

    今天遇到了一个导入类第一次见 SqlBulkCopy 可以实现从一个数据集导入到数据库中的表中 本来想从数据集中一条条遍历insert到库中 有了这个后发现: 只在把表与数据集的列做一下对应关系,再走 ...

最新文章

  1. (C++)变长数组vector的常见用法
  2. Could not find com.afollestad:material-dialogs:0.7.3.1解决
  3. R语言编程 第一讲 变量与赋值
  4. 一个按钮,如果5分钟内点击再次点击给予提示操作频繁,在JS里可以这样写
  5. java中的jdk切换(无需卸载原有jdk)
  6. php rmdir 返回值,php通过rmdir删除目录的简单用法
  7. mapreduce介绍_MapReduce:简单介绍
  8. 斯坦福大学博士后王鸿伟: 知识图谱辅助的个性化推荐系统
  9. 深度学习推理性能优化,一个越来越重要的话题
  10. ZebraDesigner-设计label
  11. ArcMap通过空间校正工具转换BJ-54坐标系到WGS-84坐标系
  12. 易语言 Sqlite表.读字段值 失败的解决方法
  13. android 拍照和选择相册图片剪切
  14. 几何光学学习笔记(20)- 5.3视场光阑
  15. 精美网页设计案例_用户体验设计的精美艺术
  16. amd服务器6300系列,AMD新款Opteron 6300服务器CPU终极评测
  17. Altium Designer画板子步骤
  18. 张勋说:简述球磨机内介质(钢球|钢棒|衬板)运动动力学(图文)
  19. 温度PID的整定过程
  20. unity 实现水的波纹效果

热门文章

  1. 55:Mysql用户管理|常用sql语句|mysql数据库备份恢复
  2. RocketMQ(六):namesrv再探
  3. 服务器市场步步为营:Intel发布新款至强Xeon E5-4600v4四路处理器
  4. 福师计算机导论在线作业一,福师《计算机导论》在线作业一..doc
  5. c# 添加中文描述 给enum_理解C# 核心概念 – C# 程序集本地化
  6. Ansible — Overview
  7. 5G 信令流程 — 5GC 的移动性管理(MM,Mobility Management)
  8. Linux 操作系统原理 — 文件系统 —文件
  9. 计算机组成原理 — CPU 中央处理器
  10. Linux_文件系统磁盘分区