前端ABC<!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数组生成多张表格效果