柱状图蓝色echarts 配置项内容和展示
配置项如下
option = {
backgroundColor:'#333',
"tooltip": {
"trigger": "axis",
},
"grid": {
"left": "80",
"right": "3%",
"bottom": "10%"
},
"xAxis": [
{
"type": "category",
"data": [
"03-06",
"",
"03-07",
"",
"03-08",
"",
"03-09",
"",
"03-10",
"",
"03-11",
"",
],
"axisLabel": {
"color": "#b3e5ff",
// margin: 0,
// width: '20',
// align: "left",
// padding: [0, 0, 0, 100],
// align: "center",
// backgroundColor: "rgba(187, 6, 228, 1)"
},
show: false,
"axisLine": {
"show": false
},
"axisTick": {
// "show": false
},
"axisPointer": {
"show": true,
"lineStyle": {
"color": "transparent"
}
}
},
{
"type": "category",
"axisLine": {
"show": false
},
"axisTick": {
// "show": false
},
position: "bottom",
"axisLabel": {
"color": "#ddd"
},
show: false,
"axisPointer": {
"show": true,
"lineStyle": {
"color": "transparent"
}
},
"data": [
"",
"03-06",
"",
"03-07",
"",
"03-08",
"",
"03-09",
"",
"03-10",
"",
"03-11",
]
},
{
"type": "category",
position: "bottom",
"data": [
"03-06",
"03-07",
"03-08",
"03-09",
"03-10",
"03-11",
],
"axisLabel": {
"color": "#b3e5ff",
// margin: 0,
// width: '20',
// align: "left",
// padding: [0, 0, 0, 100],
// align: "center",
// backgroundColor: "rgba(187, 6, 228, 1)"
},
// show: false,
"axisLine": {
"show": false
},
"axisTick": {
// "show": false
},
"axisPointer": {
"show": true,
"lineStyle": {
"color": "transparent"
}
}
},
// {
// "type": "value",
// max: 600
// }
],
"yAxis": [
{
"type": "value",
"axisTick": {
"show": false
},
"nameTextStyle": {
"color": "#b3e5ff"
},
"axisLabel": {
"color": "#b3e5ff"
},
"axisLine": {
"show": true,
"lineStyle": {
"color": "#042e60"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": "#042e60",
"width": 1
}
}
}
],
"dataZoom": [
{
"type": "inside",
"zoomLock": true,
"xAxisIndex": [
0,
1
],
"disabled": false,
"start": 0,
"end": 100
}
],
dataZoom: [{
type: 'inside',
zoomLock: true,
xAxisIndex: [0, 1, 2],
disabled: false,
maxSpan: 60,
start: 0,
end: 100
}],
"series": [
{
"itemStyle": {
"normal": {
"color": "#034162"
}
},
"name": "东风本部",
"type": "bar",
"data": [
{
"name": "2021-03-06",
"value": 10000,
},
'',
{
"name": "2021-03-07",
"value": 20000,
},
'',
{
"name": "2021-03-08",
"value": 30000,
},
'',
{
"name": "2021-03-09",
"value": 40000,
},
'',
{
"name": "2021-03-10",
"value": 50000,
},
'',
{
"name": "2021-03-11",
"value": 35000,
},
'',
],
// 'barGap': '50%',
"barWidth": '20%'
},
{
"itemStyle": {
"normal": {
"color": "#00e5ff"
}
},
"name": "东风本部",
"type": "bar",
"data": [
{
"name": "2021-03-06",
"value": 5000,
},
'',
{
"name": "2021-03-07",
"value": 15000,
},
'',
{
"name": "2021-03-08",
"value": 25000,
},
'',
{
"name": "2021-03-09",
"value": 35000,
},
'',
{
"name": "2021-03-10",
"value": 45000,
},
'',
{
"name": "2021-03-11",
"value": 30000,
},
'',
],
// "xAxisIndex": 1,
'barGap': '-75%',
"barWidth": '10%'
},
{
"itemStyle": {
"normal": {
"color": "rgb(51,248,255)"
}
},
"name": "东风本部",
"type": "line",
"data": [
7000,
'',
22000,
'',
32000,
'',
42000,
'',
35000,
'',
30000,
'',
],
"label": {
"normal": {
"show": true,
"position": "top",
"color": "#b3e5ff"
}
},
// symbolOffset: ['50%',0],
connectNulls: true,
// "xAxisIndex": 2,
},
{
"itemStyle": {
"normal": {
"color": "#014676"
}
},
"name": "陕重汽",
"type": "bar",
"data": [
'',
{
"name": "2021-03-06",
"value": 21000,
},
'',
{
"name": "2021-03-07",
"value": 28000,
},
'',
{
"name": "2021-03-08",
"value": 20000,
},
'',
{
"name": "2021-03-09",
"value": 50000,
},
'',
{
"name": "2021-03-10",
"value": 55000,
},
'',
{
"name": "2021-03-11",
"value": 45000,
}
],
"xAxisIndex": 1,
// 'barGap': '50%',
"barWidth": '20%'
},
{
"itemStyle": {
"normal": {
"color": "#009cff"
}
},
"name": "陕重汽",
"type": "bar",
"data": [
'',
{
"name": "2021-03-06",
"value": 15000,
},
'',
{
"name": "2021-03-07",
"value": 18000,
},
'',
{
"name": "2021-03-08",
"value": 50000,
},
'',
{
"name": "2021-03-09",
"value": 30000,
},
'',
{
"name": "2021-03-10",
"value": 20000,
},
'',
{
"name": "2021-03-11",
"value": 10000,
}
],
// 'barGap': '200%',
"xAxisIndex": 1,
'barGap': '-75%',
"barWidth": '10%'
},
{
"itemStyle": {
"normal": {
"color": "rgb(255,51,235)"
}
},
"name": "陕重汽",
"type": "line",
"data": [
'',
14000,
'',
10000,
'',
18000,
'',
15000,
'',
10000,
'',
20000,
],
"label": {
"normal": {
"show": true,
"position": "top",
"color": "#b3e5ff"
}
},
// symbolOffset: ['50%',0],
connectNulls: true,
"xAxisIndex":1,
}
]
};
截图如下
