最近做项目的需要,我不得不接触一下Echarts这个插件。以前看着网上的一些饼图柱形图之类的,我就想这应该只有牛人才做的出来吧!其实好多时候,一叶障目不见泰山,殊不知有好多看似觉得高大上的东西,在你接触过了解后就知道,其实很简单。下面这篇记录一下我用Echarts简单的AJAX动态绑定数据。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="chartmain" style="width: 800px; height: 500px;"></div>
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
myChart.showLoading({
text: '正在努力的读取数据中...', //loading
});
//异步加载的配置项和数据显示图表
function bindData(){
$.ajax({
async: true,
url: 'js/data.json',
type: 'get',
dataType: 'json',
data: {},
success:function(echartData){
if(echartData){
myChart.setOption({
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : echartData.name
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":echartData.data
}
]
})
myChart.hideLoading(); //loading hidden
}
}
})
}
bindData();
</script>
</body>
</html>
{
"name":["Android","IOS","PC","Other"],
"data":[420,200,360,100]
}
因为后台的接口没有写好,我是在本地测试的,记住本地测试路径应该像这样:http://127.0.0.1:8020/echarts%E5%8A%A8%E6%80%81%E7%BB%91%E5%AE%9A%E6%95%B0%E6%8D%AE/index.html?__hbt=1506561862746
不可以类似于这种的file:///D:/
其中原因我说不太清楚