echart(2),模拟数据导入篇
2024-10-20 09:36:24
先上图，就是介样子的：
所模拟的效果就是讲左下角的li里面的数据取出来，然后用环形图的展示出数据。
看代码截图：
1.总的框架图：
2.循环取数据的js代码：
3.echart提供额官方api的代码
先来说一下for循环取出的数据吧：
var categorie = $(".data_items ul li");
var categories = [];
for(var i = 0;i < categorie.length;i++){
obj = {};
obj.name = $(categorie[i]).find("span").html();
obj.value = $(categorie[i]).find("b").html();
categories.push(obj);
}
用jq的方法取出dom树上的数据，categorie是一个数组，循环这个数组，取数据。在for循环外面声明一个空数组， categories = []，里面声明一个对象（一定在里面声明），在外面声明的对象，在将obj压进数组的时候，会一直保存循环的最后一个值。然后给obj添加属性作为echart的数据接口。最后，categories.push(obj)，obj压进数组。这个还是比较简单的。categories这个数组将是我们往下面的框架中添加的数据接口的数组。就是上面图示的位置。
下面一段是api的代码，没啥好说的，有兴趣的可以研究这个框架的数据结构，设计模式，看看它为什么这么设计这段代码：
// 指定图表的配置项和数据
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:categories
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:categories
}
]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
结束：
echart还是很容易上手的，图表丰富，接口简单。很适合像我这样的小白学习。
最新文章
- c# 面向方面编程
- 【小贴士】探一探javascript中的replace
- 由Vue引发的getter和setter思考
- MySQL主从数据库同步
- Wpf实现图片自动轮播自定义控件
- mysql 变量set
- poj3261 -- Milk Patterns
- easyui-combobox绑定json数据
- 【Luogu1879】玉米田（状态压缩，动态规划）
- C语言函数嵌套调用作业
- Audio播放
- Lua的内存管理
- charles重复发送一个网络请求&同时发送N次
- CentOS7升级默认内核
- centos7 安装mysql5.7.20（yum方式）
- java线程中的notifyAll唤醒操作
- pytbull：入侵检测/预防系统测试框架 （转）
- 如何在Visual Studio 2013中连接中国版的Azure
- 转战JS(1) 初探与变量类型、运算符、常用函数与转换
- latex 转word