最近学习了Echarts的数据可视化展示从官网上看到一些数值是直接手打赋值的，但是一些复杂且数据量庞大的数据再继续用手一个一个敲上去会十分的繁琐，所以如何直接调用数据是一个关键。
下面是官网上最简单的一个入门柱状图用它作为演示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>先准备一个json文件如下我命名为data.json json文件我是直接从上面的扣下来的
{"categories":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋 ","袜子"],"data":[5,20,36,10,10,20]}正常的图表需要一个echarts.js文件就可以，但是这里还需要一个jquery.js的文件都是可以找到的 用get方法就可以请求json数据 完整代码在下面根据自己需要自行更改
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> <script src="jquery-2.2.1.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> $(document).ready(function () { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 myChart.setOption({ title: {text: '异步Json数据加载'}, tooltip: {}, legend: {data:['销量']}, xAxis: {data: []}, //数据空着 yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] //一样 }] }); $.get('data.json').done(function (data) { console.dir(data); // 填入数据 myChart.setOption({ xAxis: {data:data.categories}, //赋值给上面空格 series: [{ name:'销量', data:data.data }] }) }); }); </script> </body> </html>可以继续简化如下
<script type="text/javascript"> $(document).ready(function () { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 $.get('data.json').done(function (data) { console.dir(data); // 填入数据 myChart.setOption({ title: {text: '异步Json数据加载'}, tooltip: {}, legend: {data:['销量']}, xAxis: {data:data.categories}, //赋值 yAxis: {}, series: [{ name:'销量', type: 'bar', data:data.data //赋值 }] }) }); }); </script>异步加载ajax数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> <script src="jquery-2.2.1.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> $(document).ready(function () { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 $.ajax({ type:"get", async:true, url:'data.json', data:{}, dataType: 'json', success:function (data) { myChart.setOption({ title: {text: '异步ajax数据加载'}, tooltip: {}, legend: {data:['销量']}, xAxis: {data:data.categories}, yAxis: {}, series: [{ name:'销量', type: 'bar', data:data.data }] }); }, error:function (error) { console.log(error); } }) }); </script> </body> </html>