echart(2),模拟数据导入篇
2021-05-13 22:55
134 查看
先上图,就是介样子的:
所模拟的效果就是讲左下角的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} {b}: {c} ({d}%)" 6 }, 7 legend: { 8 orient: 'vertical', 9 x: 'left',10 data:categories11 },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: false34 }35 },36 data:categories37 }38 ]39 };40 41 // 使用刚指定的配置项和数据显示图表。42 myChart.setOption(option);
结束:
echart还是很容易上手的,图表丰富,接口简单。很适合像我这样的小白学习。
相关文章推荐
- 集群环境下 如何导入数据文件(利用文件服务器)如何创建大数据模拟环境
- 导入外部数据+SQL语句的办法不支持参数查询,不过可以通过子查询进行模拟
- [导入] C# ,webBrowser,登录,数据填充,模拟点击链接,运行JS函数
- 模拟生产数据导入(一)
- 学习Postgres 数据导入导出工具架构及源码
- phpexcel导入excel处理大数据
- sqoop oracle导入数据到HBASE
- 模拟场景测试脏数据
- mysql导入数据load data infile用法
- 利用python将execl的数据导入hive
- 将excel文件中的数据导入导出至SQL数据库中(Microsoft.Jet.OLEDB.4.0和Microsoft.ACE.OLEDB.12.0|office2003和office2007)
- oracle数据无法导入表情况之一
- solr4.40导入mysql数据库数据建立索引
- gis数据格式转换(数据导入)ConvertFeaCls
- 大数据时代--Hive之开始动手(导入数据、查询、删除)
- 使用sqoop将oracle数据导入hive或hbase,mysql类似
- vue中实现excel数据导入导出
- 文本文件中的数据导入到Oracle数据库表 .
- mysql 执行 大数据 sql文件 与 集群结构 授权 数据库导出导入
- PowerDesigner导入SQL生成数据模型