效果：
图一：Y轴显示百分比 柱状图定点显示数量个数
图二：x轴 相同日期对应的每个柱子显示不同类型的数量
代码：
容器：
<div id="badQuaAnalyze"></div>
<div id="unqualified"></div>
配置项：
//图1
var badQuaAnalyze = echarts.init(document.getElementById('badQuaAnalyze'));
//图2
var unqualified = echarts.init(document.getElementById('unqualified'));
//配置项和数据
//图1
var badQuaAnalyzeOption = {
backgroundColor: 'rgba(255, 255, 255, 1)',
legend: {
data:[{name:'数量',icon:'rect'}],
textStyle:{
color:'#222222',
fontSize:12
},
y: 'bottom',
x: 'center' ,
},
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
},
formatter: function (params) {
var str = params[0]['axisValue'] + '<br>' + '不合格百分比:'+params[0]['value'] + '%';
return str;
}
},
xAxis: [
{
type: 'category',
axisLine:{
lineStyle:{
color:'#999999',
width:1
}
},
data: [],
axisPointer: {
type: 'shadow'
},
axisLabel:{
interval:0,
rotate:0,
formatter:function(value){
// return value.length > 5?value.substring(0,5)+'...':value;
return value;
}
}
}
],
yAxis: [
{
type: 'value',
splitLine:{
show:true ,
lineStyle:{
color:'#021439',
width: 1
}
},
axisLine:{
lineStyle:{
color:'#999999',
width:1
}
},
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} %'
},
name: '单位（%）',
}
],
};
//图2
var unqualifiedOption = {
backgroundColor: 'rgba(255, 255, 255, 1)',
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
},
formatter: function (params) {
var str = params[0]['axisValue'] + '<br>';
$.each(params,function (i,v) {
if (v.value) {
str += v.seriesName + ':' + v.value + '<br>';
}
})
return str;
}
},
xAxis: [
{
type: 'category',
axisLine:{
lineStyle:{
color:'#999999',
width:1
}
},
data: [],
axisPointer: {
type: 'shadow'
},
axisLabel:{
interval:0,
rotate:0,
formatter:function(value){
// return value.length > 10?value.substring(0,10)+'...':value;
return value;
}
}
}
],
yAxis: [
{
type: 'value',
splitLine:{
show:true ,
lineStyle:{
color:'#021439',
width: 1
}
},
axisLine:{
lineStyle:{
color:'#999999',
width:1
}
},
name: '不合格数量',
}
],
};
//使用刚指定的配置项和数据显示图表。
badQuaAnalyze.setOption(badQuaAnalyzeOption);//图1
unqualified.setOption(unqualifiedOption);//图2
getbadQuaAnalyzeData();//图1
getUnqualifiedData();//图2 //获取图表数据并插入
//图1
function getbadQuaAnalyzeData() {
// $.ajax({
// url: '',
// data: {},
// type: "POST",
// dataType: 'json',
// success: function(result){
var result = {
meg:'处理成功',
req:true,
rows:[
{
name: "部件1",
num: 55,//数量
percent: 66,//百分比
},
{
name: "部件2",
num: 45,//数量
percent: 56,//百分比
},
{
name: "部件3",
num: 35,//数量
percent: 46,//百分比
},
{
name: "部件4",
num: 75,//数量
percent: 96,//百分比
},
{
name: "部件5",
num: 5,//数量
percent: 10,//百分比
},
{
name: "部件6",
num: 30,//数量
percent: 36,//百分比
},
{
name: "部件7",
num: 40,//数量
percent: 50,//百分比
}, ]
}
var _name = [], _markPoint = [] , _percent = [];
console.log(result);
if (result.rows!=null&&result.rows.length > 0) {
$.each(result.rows,function (i,v) {
_name.push(v.name);
_percent.push(v.percent);
_markPoint.push({name : '数量', value : v.num, xAxis: i, yAxis: v.percent})
});
badQuaAnalyze.setOption({
series : [
{
name:'数量',
barWidth: '30%',
type:'bar',
itemStyle : {
normal : {
lineStyle:{
color:'#E09C19'
},
color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
}
},
data:_percent,
markPoint : {
data : _markPoint
},
},
],
xAxis : [
{
data:_name
}
]
});
}
// }
// });
}
//图2
function getUnqualifiedData() {
// $.ajax({
// url: '',
// data: {},
// type: "POST",
// dataType: 'json',
// success: function(result){ //图标的数据 是根据数据的顺序来的 如果需要图标X轴的时间顺序 请返回按时间排序的数据
//同一个时间（"2017-05-24"） 相同名称的（类型7） 后者的（num）数量会覆盖前者 并不会累加
var result = {
meg:'处理成功',
req:true,
rows:[
{
title:'标题',
time: "2017-05-24",
name:'类型2',
num: 54,//数量
},
{
title:'标题',
time: "2017-05-24",
name:'类型1',
num: 54,//数量
},
{
title:'标题',
time: "2017-05-24",
name:'类型4',
num: 54,//数量
}, {
title:'标题',
time: "2017-05-23",
name:'类型5',
num: 43,//数量
},
{
title:'标题',
time: "2017-05-23",
name:'类型4',
num: 43,//数量
},
{
title:'标题',
time: "2017-05-23",
name:'类型2',
num: 43,//数量
}, {
title:'标题',
time: "2017-05-22",
name:'类型5',
num: 32,//数量
}, {
title:'标题',
time: "2017-05-22",
name:'类型2',
num: 32,//数量
},
{
title:'标题',
time: "2017-05-22",
name:'类型7',
num: 32,//数量
}, {
title:'标题',
time: "2017-05-25",
name:'类型2',
num: 33,//数量
}, {
title:'标题',
time: "2017-05-21",
name:'类型4',
num: 21,//数量
},
{
title:'标题',
time: "2017-05-21",
name:'类型2',
num: 21,//数量
},
{
title:'标题',
time: "2017-05-21",
name:'类型7',
num: 21,//数量
}, ]
} var _time = [],_name = [],_series = [];
if (result.rows!=null&&result.rows.length > 0) {
$.each(result.rows,function (i,v) {//循环接口返回数据
if ($.inArray(v.time, _time) < 0 ) {//获得X轴横坐标
_time.push(v.time);
}
if ($.inArray(v.name, _name) < 0 ) {//没有出现过的名字（如：类型7） 创建一条
var current = {
name: v.name,
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: []
}
_name.push(v.name);//获取一组图例
$.each(_time,function (l,m) {
if (m === v.time) {
current.data[l] = v.num;//确保插入到对应的时间坐标处
}
})
_series.push(current)
} else {//重复的名字
$.each(_series,function (j,o) {
if (o.name === v.name) {
$.each(_time,function (a,b) {
if (b === v.time) {
o.data[a] = v.num;//确保插入到对应的时间坐标处
}
}) }
})
}
});
unqualified.setOption({
legend: {
data: _name
},
title : {
text: result.rows[0].title,
subtext: '',
x:'left'
},
series : _series,
xAxis : [
{
data:_time
}
]
});
}
// }
// });
}