简单echars Demo

很容易从官网上找到这样一个案例

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 400, 150, 80, 70, 110, 130],
type: 'bar'
}]

};

右图显示效果：

当使用的时候，我们可以加些自己的特点和需求

1、在jsp页面中，我们需要加上展示插件的位置DIV；

</div>

2、在JS中

var myYcChart = echarts.init(document.getElementById('myBarByYc'));

//使用刚指定的配置项和数据显示图表。这里的option也就是上面的案例了

myYcChart.setOption(option);

记录下自己写的简单案例吧：

//机构统计
function getDataByJg(data){
var valueX = [];
var valueY = [];
for (var i = 0; i < data.length; i++) {
valueX.push(data[i].orgName);
if(data[i].sum !=0){
valueY.push(data[i].sum);
}
}
var myChart = echarts.init(document.getElementById('myBarByJg'));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: valueX,
axisLabel :{
interval:0,
rotate:30,
textStyle:{
align:"right"
}
}
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
barWidth:25,
symbol: 'none',
data: valueY,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3fa7dc'
}, {
offset: 1,
color: '#0feae3'
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
}
}
}],
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: 'black'
}
}
},
color:['#A6FFFF'],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
//异常统计
function getDataByYc(data){
var valueX = [];
var valueY = [];
valueX.push(data.spyc==0?null:data.spyc);
valueX.push(data.sbyc==0?null:data.sbyc);
valueX.push(data.fscb==0?null:data.fscb);
valueX.push(data.fqcb==0?null:data.fqcb);
valueX.push(data.ystp==0?null:data.ystp);
valueX.push(data.wpxj==0?null:data.wpxj);
valueX.push(data.zhyc==0?null:data.zhyc);
var myYcChart = echarts.init(document.getElementById('myBarByYc'));
optionYc = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['中国','美国','英国','法国','意大利,'日本','澳大利亚']
},
color:['#46A3FF'],
label:{
normal:{
show:true,
position: 'right',
textStyle:{
color:'black'
}
}
},
series: [
{
type: 'bar',
//data: valueX,
symbol: 'none',
data: valueX,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3fa7dc'
}, {
offset: 1,
color: '#0feae3'
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
}
}
}
]
};
//使用刚指定的配置项和数据显示图表。
myYcChart.setOption(optionYc);
}

猜你喜欢