最近项目中需要用到图表，所以就百度了一下。有什么好用的图表插件，发现了一款特别好用的——echarts。echarts是百度推出的一款纯js图表库。所以也就不依赖任何其他语言，用也特别好用。暂时只是初识，所以以下说的都是基础。首先，上图（以下图在echarts官网上有示例），这里我要介绍用两种方法生成以下图表。
页面效果图
首先，去官网上http://echarts.baidu.com/download.html下载demo文件，我下载的是“源代码”的版本。
页面引用：因为动态加载数据需要用到get请求，所以在这里也引用了jquery。
代码块1
引用好之后，在页面上画个层<div id="main" style="width:600;height:600px;">。画好层后，初始化
var myChart = echarts.init(document.getElementById('main'));
下面就可以把示例的代码考过来。具体代码见官网：记得把 app.title='气泡图'; 删掉。
代码块2
最后不要忘记，调用myChart.setOption(option);
以上介绍的是静态加载图表，实践应用中是需要从数据库后台取数据，动态生成图表。这时候就要用第二种方法：通过get请求，获取后台数据，这里我只是把data里的数据放入json里面，这样页面就可以动态加载数据了。
$.get('data2.json',function(data){
myChart.setOption({
//option里的代码复制过来
});
})
就完成动态图表的加载了，是不是很easy
网友评论