<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>柱状图测试</title> <script type="text/javascript" src="jquery-2.1.0.js" ></script> <script type="text/javascript" src="echarts.min.js" ></script> <style> #main div{ width: 240px; height: 120px; background-color: #fff; margin-bottom: 20px; } </style> </head> <body> <div id="main"></div> <!--动态获取json数据--> <script type="text/javascript" > // 异步加载数据 $.get('data.json').done(function(data) { // 填入数据 for(i = 0; i < data.length; i++) { //创建空白div var num = "test" + i; var div = document.createElement("div"); div.id = num; document.getElementById("main").appendChild(div); //插件效果初始化 var myChart = echarts.init(document.getElementById(num)); myChart.setOption({ title: { //text: '异步数据加载示例' }, tooltip: {}, legend: { //data: ['销量'] }, grid: { x: 30, y: 30, x2: 0, y2: 5, borderWidth: 1 }, yAxis: { min: 0, max: 100, interval: 20, }, xAxis: { data: data[i].categories }, series: [{ // 根据名字对应到相应的系列 name: '销量', type: 'bar', itemStyle: { normal: { //好,这里就是重头戏了,定义一个list,然后根据所以取得不同的值,这样就实现了, color: function(params) { // build a color map as your need. var colorList = [ '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0' ]; return colorList[params.dataIndex] }, //以下为是否显示,显示位置和显示格式的设置了 label: { show: true, position: 'top', formatter: '{b}\n{c}' } } }, data: data[i].data }] }); } }); </script> </body> </html>
[ { "categories": [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ], "data": [ 0, 80, 36, 97, 72, 53 ] }, { "categories": [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ], "data": [ 5, 20, 36, 10, 10, 20 ] }, { "categories": [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ], "data": [ 80, 90, 100, 30, 70, 50 ] } ]
欢迎分享本文,转载请保留出处:前端ABC » 百度echarts使用体会,一个页面根据json数组生成多张表格效果