echart-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

echart

简介:   先介绍echart:      官网: http://echarts.baidu.com  看名字就知道是百度出品的。       ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

  先介绍echart:

     官网: http://echarts.baidu.com  看名字就知道是百度出品的。

      ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。具体不说了,可以看官网的介绍。

    demo如下:

  1.

      

    如图:直接引入echart.js就可以开发了。现在地址: http://echarts.baidu.com/download.html

  2.写一个盛放图表的div

   <div id="main" style="width: 600px;height:400px;"></div>

   3.复制官方提供的api代码,自己可以修改:    

<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:400, name:'搜索引擎'},
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:274, name:'联盟广告'},
{value:235, name:'视频广告'}
]
}
],
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
backgroundColor: '#2c343c',
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
})
</script>

效果如图:

 

我们看代码:这个图表需要传入的数据就是 我们的data数组,所以我们在实际开发的时候就需要传入需要的data;下面是另一组数据,来自模拟数据放入指定的数组中:

1.大体的结构:

这里是我们模拟的需要取数据的html结构:

下面的是js部分:

效果图这样:

做这个demo很简单,主要是框架api给的好,这里主要记录两点:

 一.js取dom的数据时,两种数据,一次循环取出,放在不同的数组中,js如下: 

  var categorie = $(".data_items ul li");
  var categories = [],price =[];
  for(var i = 0;i < categorie.length;i++){
    //categorie[i]==><li>....</li> js 对象 转化为 jq对象
    categories.push($(categorie[i]).find("span").html());
    price.push($(categorie[i]).find("b").html());
  }

    categories和price是一个数组,是为下面需要的数据接口,定义的数据;需要注意的是。循环出来的 categorie[i] (每个Li)是js对象,需要用后面的jq 的find方法,需要用$("xxx")转化一下,push方法就不多啰嗦了,向数组压进数据,每循环一次,就压进一个。

二.在模拟的异步请求数据,用的是setTimeout函数,具体的函数调用看下面具体的代码

  function fetchData(cb) {

    // 通过 setTimeout 模拟异步加载
    setTimeout(function () {
      cb({
        categories: categories,//纯属组
        data: price// 纯属组
      });
    }, 1000);
  }

low B 的所有代码如下:

   code:

   

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="js/jquery-1.11.3.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<div class="data_items">
<ul>
<li><span>衬衫</span>: <b>5</b></li>
<li><span>羊毛衫</span>: <b>30</b></li>
<li><span>雪纺衫</span>: <b>20</b></li>
<li><span>裤子</span>: <b>10</b></li>
<li><span>高跟鞋</span>: <b>15</b></li>
<li><span>袜子</span>: <b>65</b></li>
</ul>
</div>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var categorie = $(".data_items ul li");
var categories = [],price =[];
for(var i = 0;i < categorie.length;i++){
//categorie[i]==><li>....</li> js 对象 转化为 jq对象
categories.push($(categorie[i]).find("span").html());
price.push($(categorie[i]).find("b").html());
}

function fetchData(cb) {
// 通过 setTimeout 模拟异步加载
setTimeout(function () {
cb({
categories: categories,//纯属组
data: price// 纯属组
});
}, 1000);
}

// 初始 option
option = {
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
};

fetchData(function (data) {
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
</script>
</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: