1.bar
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
color:['#07a6ba''],
grid: {
x:10,
y:15,
x2:20,
y2:50,
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
interval: 0,
margin: 2,
textStyle: {
color: "#5e859e"
}
},
axisLine:{
lineStyle:{
color:'#5e859e',
width:2//这里是为了突出显示加上的
}
},
splitLine:{
show:false
}
},
yAxis: {
type: 'category',
data:data.categories.split(","),
axisLabel: {
textStyle: {
color: '#5e859e'**//坐标数据的颜色**
},
formatter: function(value) {
if (value.length > 8) {
return value.substring(0, 8) + "...";
} else {
return value;
}
}//文字过长省略
},
axisLine:{
lineStyle:{
color:'#5e859e',**//坐标线的颜色**
width:2//这里是为了突出显示加上的
}
}
},
series: [
{
name: '总数',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
barWidth : 8,//柱子宽度
data: data.dataList,
symbolSize:2,
itemStyle: {
normal: {
// color:['#07a6ba','#4bc0c9','#3b56d9','#dbbb32','03ecef','#8648e7','#0fb2db']
color: function(params) {//**每个柱子颜色不一样**
var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB'];
return colorList[params.dataIndex]
}
}
}
}
]
};
2.bar
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
x:10,
y:15,
x2:20,
y2:50,
containLabel: true
},
color:['#04dfe2'],
xAxis : [
{
type : 'category',
data.data.category.split(","),
axisLabel: {
textStyle: {
color: "#5e859e"
},
formatter: function(value) {
if (value.length > 7) {
return value.substring(0, 7);
} else {
return value;
}
}**//文字过长省略**
},
axisLine:{
lineStyle:{
color:'#5e859e',
width:2//这里是为了突出显示加上的
}
},
splitLine:{
show:false
}
}
],
yAxis: {
type: 'value',
axisLabel: {
interval: 0,
margin: 2,
textStyle: {
color: "#5e859e"
}
},
axisLine:{
lineStyle:{
color:'#5e859e',
width:2//这里是为了突出显示加上的
}
}
},
series : [
{
name:'总量',
type:'bar',
data: data.dataList,
barWidth :8,
itemStyle: {
normal: {
// color:['#07a6ba','#4bc0c9','#3b56d9','#dbbb32','03ecef','#8648e7','#0fb2db']
color: function(params) {//柱子颜色
var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB'];
return colorList[params.dataIndex]
}
}
}
}
]
};
3.line
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data:[
{name: '人脸抓拍',
textStyle:{color:"#fff"}
},
{name:'车辆抓拍',
textStyle:{color:"#fff"}
},
{name: '门禁感知',
textStyle:{color:"#fff"}
},
{name:'水电煤感知',
textStyle:{color:"#fff"}
}
]
},
grid: {
left: '3%',
right: '4%',
bottom: '20%',
containLabel: true
},
/*toolbox: {保存图标
feature: {
saveAsImage: {}
}
},*/
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#5e859e',
width: 2
}
},
boundaryGap: false,
data: [2, 4, 6, 8, 10, 12, 14,16,18,20,22,24]
// data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: '#5e859e',
width: 2
}
}
},
series: [
{
name:'人脸抓拍',
type:'line',
stack: '总量',
color:'#3d55da',
data:[120, 132, 101, 134, 90, 230, 210,120,150,168,215,149]
},
{
name:'车辆抓拍',
type:'line',
stack: '总量',
color:'#d08028',
data:[220, 182, 191, 234, 290, 330, 310,101, 134, 90, 230, 210]
},
{
name:'门禁感知',
type:'line',
stack: '总量',
color:'#c55839',
data:[10, 32, 51, 154, 190, 330, 110,191, 234, 290, 130, 38]
},
{
name:'水电煤感知',
type:'line',
stack: '总量',
color:'#ccac20',
data:[120, 82, 201, 34, 90, 30, 120, 132, 201, 254, 190, 130]
}
]
};