<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id='bar' style="width:450px;height:300px;"></div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="js/echarts.simple.min.js" ></script>
<script>
//['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
//[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
function bar(id,legend,xdata,mes){
var bar=echarts.init(document.getElementById(id));
var option={
title:{
text:"练习接口柱状图",
x:"center"
},
color:['#0fb4d6'],
tooltip : {
trigger: 'axis'
},
legend: {
data:legend
},
xAxis:[
{
type:'category',
data:xdata,
axisTick : { // 轴标记
show:false
},
axisLine : { // 轴线
show: true,
lineStyle: {//水平州的颜色
color: '#3a3c4c',
type: 'solid',
width: 1
}
},
axisLabel : {
show:true,
textStyle: {//水平轴字体颜色
color: '#333',
fontSize: 12,
}
},
splitLine : {//去掉背景曲线
show:false,
}
}
],
yAxis:[
{
type:'value',
position: 'left',
axisTick : { // 轴标记
show:false,
},
splitLine : {//去掉背景曲线
show: false
},
axisLabel : {
show:true,
textStyle: {//垂直轴字体颜色
color: '#333',
fontSize: 12,
}
}
}
],
series : [
{
name: '产量',
type: 'bar',
barWidth:14,//柱的宽度
barGap:'10',
data:mes
}
]
}
bar.setOption(option);
}
var _legend=[];
$.ajax({
dataType:"json",
url:"js/bar.json",
type:"get",
success:function(data){
console.log(data.categories);
_legend=data.legend;
var x_data=data.categories;
var _mes=data.data;
console.log(_mes)
bar("bar",_legend,x_data,_mes);
}
})
</script>
</html>
{
"legend":"产量",
"categories": [
"苹果",
"橘子",
"荔枝",
"桃子",
"栗子",
"梨子",
"柿子"
],
"data": [
500,
280,
386,
190,
107,
207,
452
]
}