1、单柱状图
option = {
//你的代码
backgroundColor: "#061740",
tooltip: {
backgroundColor: 'rgba(13, 64, 71, 0.50)',
borderColor: 'rgba(143, 225, 252, 0.60)',
padding: 8,
textStyle: {
color: '#fff',
}
},
grid: {
bottom: 50
},
xAxis: [
{
type: 'category',
data: ['星期一', '星期二', '星期三','星期四','星期五'],
offset: 10,
axisLine: { // 轴线设置
show: true, // 显示轴线
lineStyle: { // 轴线样式设置
color: "#C5C5C5", // 轴线颜色
width: 1, // 轴线宽度
type: "solid" // 轴线类型-虚线
}
},
axisLabel: {
textStyle: {
color: '#F5F5F5', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
}
],
yAxis: [
{
splitLine: {
show: true,
lineStyle: {
color: '#979797',
type: [5, 10],
},
},
axisLabel: {
textStyle: {
color: '#F5F5F5', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
},
],
series: [
// 数据1的柱状图1
{
name: '预计',
type: 'bar',
barWidth: 30,
z: 1,
label: {
show: false
},
itemStyle: {
opacity: 1, // 这个是 透明度
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#CB9F60'
},
{
offset: 0.4,
color: '#CB9F60'
},
{
offset: 0.6,
color: '#F5C682'
},
{
offset: 1,
color: '#F5C682' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
},
data: [100, 110, 120, 130, 140]
},
// 数据1顶部的样式
{
name: '',
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: [0, -8],
z: 2,
itemStyle: {
normal: {
opacity: 1,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 1,
color: '#FFE0B3'
}
],
false
),
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
offset: [0, 0],
textStyle: {
// 数值样式
color: '#FFFFFF',
fontSize: 14,
top: 50
},
formatter: function (param) {
return param.data
}
}
}
},
symbolPosition: 'end',
data: [100, 110, 120, 130, 140]
},
// 数据1底部的样式
{
name: '',
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: [0, -10],
z: 1,
itemStyle: {
normal: {
opacity: 1,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#CB9F60'
},
{
offset: 0.4,
color: '#CB9F60'
},
{
offset: 0.6,
color: '#F5C682'
},
{
offset: 1,
color: '#F5C682' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
label: {
show: false, // 开启显示
}
}
},
symbolPosition: 'end',
data: [0,0,0,0,0] //项目中实际需要0改成1才显示圆圈
},
]
};
2、双柱状图
option = {
//你的代码
backgroundColor: "#061740",
tooltip: {
backgroundColor: 'rgba(13, 64, 71, 0.50)',
borderColor: 'rgba(143, 225, 252, 0.60)',
padding: 8,
textStyle: {
color: '#fff',
}
},
grid: {
bottom: 50
},
legend: {
data: ['预计', '实际'],
icon: 'rect',
itemWidth: 14,
itemHeight: 14,
right: 5,
selectedMode: false, //取消图例上的点击事件
textStyle: {
fontSize: 14,
color: '#FFFFFF'
}
},
xAxis: [
{
type: 'category',
data: ['星期一', '星期二', '星期三','星期四','星期五'],
offset: 10,
axisLine: { // 轴线设置
show: true, // 显示轴线
lineStyle: { // 轴线样式设置
color: "#C5C5C5", // 轴线颜色
width: 1, // 轴线宽度
type: "solid" // 轴线类型-虚线
}
},
axisLabel: {
textStyle: {
color: '#F5F5F5', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
}
],
yAxis: [
{
splitLine: {
show: true,
lineStyle: {
color: '#979797',
type: [5, 10],
},
},
axisLabel: {
textStyle: {
color: '#F5F5F5', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
},
],
// series: seriesData,
series: [
// 数据1的柱状图1
{
name: '预计',
type: 'bar',
barWidth: 30,
z: 1,
label: {
show: false
},
itemStyle: {
opacity: 1, // 这个是 透明度
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#CB9F60'
},
{
offset: 0.4,
color: '#CB9F60'
},
{
offset: 0.6,
color: '#F5C682'
},
{
offset: 1,
color: '#F5C682' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
},
data: [100, 110, 120, 130, 140]
},
// 数据1顶部的样式
{
name: '',
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: ['-60%', -8],
z: 2,
itemStyle: {
normal: {
opacity: 1,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 1,
color: '#FFE0B3'
}
],
false
),
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
offset: [-20, 0],
textStyle: {
// 数值样式
color: '#FFFFFF',
fontSize: 14,
top: 50
},
formatter: function (param) {
return param.data
}
}
}
},
symbolPosition: 'end',
data: [100, 110, 120, 130, 140]
},
// 数据1底部的样式
{
name: '',
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: ['-60%', -10],
z: 1,
itemStyle: {
normal: {
opacity: 1,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#CB9F60'
},
{
offset: 0.4,
color: '#CB9F60'
},
{
offset: 0.6,
color: '#F5C682'
},
{
offset: 1,
color: '#F5C682' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
label: {
show: false, // 开启显示
}
}
},
symbolPosition: 'end',
data: [0,0,0,0,0] //项目中实际需要0改成1才显示圆圈
},
// 数据2的柱状图2
{
name: '实际',
type: 'bar',
barWidth: 30,
z: 2,
itemStyle: {
// lenged文本
opacity: 1, // 这个是 透明度
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#C56062'
},
{
offset: 0.4,
color: '#C56062'
},
{
offset: 0.6,
color: '#EA777A'
},
{
offset: 1,
color: '#EA777A' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
},
data: [90, 100,105, 110, 120]
},
// 数据2的顶部
{
name: '', // 头部
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: ['60%', -8],
z: 12,
symbolPosition: 'end',
itemStyle: {
normal: {
opacity: 1,
color: new echarts.graphic.LinearGradient(
0,
1,
1,
0,
[
{
offset: 1,
color: '#FE9C9F'
}
],
false
),
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
offset: [20, 0],
textStyle: {
// 数值样式
color: '#FFFFFF',
fontSize: 14,
top: 50
},
formatter: function (param) {
return param.data
}
}
}
},
data: [90, 100,105, 110, 120]
},
// 数据2的底部小圆圈
{
name: '', // 头部
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: ['60%', -10],
z: 1,
symbolPosition: 'end',
itemStyle: {
normal: {
opacity: 1,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#C56062'
},
{
offset: 0.4,
color: '#C56062'
},
{
offset: 0.6,
color: '#EA777A'
},
{
offset: 1,
color: '#EA777A' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
label: {
show: false, // 开启显示
position: 'top', // 在上方显示
offset: [20, 0],
textStyle: {
// 数值样式
color: '#FFFFFF',
fontSize: 14,
top: 50
},
formatter: function (param) {
return param.data
}
}
}
},
data: [0, 0, 0,0,0]
},
]
};
3、三柱状图
option = {
//你的代码
backgroundColor: "#061740",
tooltip: {
backgroundColor: 'rgba(13, 64, 71, 0.50)',
borderColor: 'rgba(143, 225, 252, 0.60)',
padding: 8,
textStyle: {
color: '#fff',
}
},
grid: {
bottom: 50
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 14,
right: 5,
selectedMode: false, //取消图例上的点击事件
textStyle: {
fontSize: 14,
color: '#FFFFFF'
}
},
xAxis: [
{
type: 'category',
data: ['星期一', '星期二', '星期三','星期四','星期五'],
offset: 10,
axisLine: { // 轴线设置
show: true, // 显示轴线
lineStyle: { // 轴线样式设置
color: "#C5C5C5", // 轴线颜色
width: 1, // 轴线宽度
type: "solid" // 轴线类型-虚线
}
},
axisLabel: {
textStyle: {
color: '#F5F5F5', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
}
],
yAxis: [
{
splitLine: {
show: true,
lineStyle: {
color: '#979797',
type: [5, 10],
},
},
axisLabel: {
textStyle: {
color: '#F5F5F5', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
},
],
// series: seriesData,
series: [
// 数据1的柱状图1
{
name: '预计',
type: 'bar',
barWidth: 30,
z: 1,
label: {
show: false
},
itemStyle: {
opacity: 1, // 这个是 透明度
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#CB9F60'
},
{
offset: 0.4,
color: '#CB9F60'
},
{
offset: 0.6,
color: '#F5C682'
},
{
offset: 1,
color: '#F5C682' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
},
data: [100, 110, 120, 130, 140]
},
// 数据1顶部的样式
{
name: '',
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: ['-120%', -8],
z: 2,
itemStyle: {
normal: {
opacity: 1,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 1,
color: '#FFE0B3'
}
],
false
),
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
offset: [-40, 0],
textStyle: {
// 数值样式
color: '#FFFFFF',
fontSize: 14,
top: 50
},
formatter: function (param) {
return param.data
}
}
}
},
symbolPosition: 'end',
data: [100, 110, 120, 130, 140]
},
// 数据1底部的样式
{
name: '',
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: ['-120%', -10],
z: 1,
itemStyle: {
normal: {
opacity: 1,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#CB9F60'
},
{
offset: 0.4,
color: '#CB9F60'
},
{
offset: 0.6,
color: '#F5C682'
},
{
offset: 1,
color: '#F5C682' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
label: {
show: false, // 开启显示
}
}
},
symbolPosition: 'end',
data: [0,0,0,0,0] //项目中实际需要0改成1才显示圆圈
},
// 数据2的柱状图2
{
name: '实际',
type: 'bar',
barWidth: 30,
z: 2,
itemStyle: {
// lenged文本
opacity: 1, // 这个是 透明度
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#C56062'
},
{
offset: 0.4,
color: '#C56062'
},
{
offset: 0.6,
color: '#EA777A'
},
{
offset: 1,
color: '#EA777A' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
},
data: [90, 100,105, 110, 120]
},
// 数据2的顶部
{
name: '', // 头部
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: ['0%', -8],
z: 12,
symbolPosition: 'end',
itemStyle: {
normal: {
opacity: 1,
color: new echarts.graphic.LinearGradient(
0,
1,
1,
0,
[
{
offset: 1,
color: '#FE9C9F'
}
],
false
),
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
offset: [0, 0],
textStyle: {
// 数值样式
color: '#FFFFFF',
fontSize: 14,
top: 50
},
formatter: function (param) {
return param.data
}
}
}
},
data: [90, 100,105, 110, 120]
},
// 数据2的底部小圆圈
{
name: '', // 头部
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: ['0%', -10],
z: 1,
symbolPosition: 'end',
itemStyle: {
normal: {
opacity: 1,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#C56062'
},
{
offset: 0.4,
color: '#C56062'
},
{
offset: 0.6,
color: '#EA777A'
},
{
offset: 1,
color: '#EA777A' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
label: {
show: false, // 开启显示
position: 'top', // 在上方显示
offset: [20, 0],
textStyle: {
// 数值样式
color: '#FFFFFF',
fontSize: 14,
top: 50
},
formatter: function (param) {
return param.data
}
}
}
},
data: [0, 0, 0,0,0]
},
// 数据3的柱状图3
{
name: '实际1',
type: 'bar',
barWidth: 30,
z: 2,
itemStyle: {
// lenged文本
opacity: 1, // 这个是 透明度
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#C56062'
},
{
offset: 0.4,
color: '#C56062'
},
{
offset: 0.6,
color: '#EA777A'
},
{
offset: 1,
color: '#EA777A' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
},
data: [90, 100,105, 110, 120]
},
// 数据3的顶部
{
name: '', // 头部
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: ['120%', -8],
z: 12,
symbolPosition: 'end',
itemStyle: {
normal: {
opacity: 1,
color: new echarts.graphic.LinearGradient(
0,
1,
1,
0,
[
{
offset: 1,
color: '#FE9C9F'
}
],
false
),
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
offset: [40, 0],
textStyle: {
// 数值样式
color: '#FFFFFF',
fontSize: 14,
top: 50
},
formatter: function (param) {
return param.data
}
}
}
},
data: [90, 100,105, 110, 120]
},
// 数据3的底部小圆圈
{
name: '', // 头部
type: 'pictorialBar',
symbolSize: [30, 15],
symbolOffset: ['120%', -10],
z: 1,
symbolPosition: 'end',
itemStyle: {
normal: {
opacity: 1,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#C56062'
},
{
offset: 0.4,
color: '#C56062'
},
{
offset: 0.6,
color: '#EA777A'
},
{
offset: 1,
color: '#EA777A' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
label: {
show: false, // 开启显示
position: 'top', // 在上方显示
offset: [20, 0],
textStyle: {
// 数值样式
color: '#FFFFFF',
fontSize: 14,
top: 50
},
formatter: function (param) {
return param.data
}
}
}
},
data: [0, 0, 0,0,0]
},
]
};
