// var circleColors = [
// ['#FFE0B3', '#FFC64C'],
// ['#FE9C9F', '#FF6165'],
// ['#FCFFAF', '#C8C50B'],
// ['#D3FEC9', '#93FF5D'],
// ['#D3FEC9', '#93FF5D'],
// ];
// var datasColors = [
// [{'0': '#CB9F60', '1': '#F5C682'}, {'0': '#C38501', '1': '#FCAC00'}],
// [{'0': '#C56062', '1': '#EA777A'}, {'0': '#C00208', '1': '#FD0209'}],
// [{'0': '#BBBF50', '1': '#F2F685'}, {'0': '#878505', '1': '#AEAB04'}],
// [{'0': '#7EBB70', '1': '#B6F2A8'}, {'0': '#43BF04', '1': '#55FF00'}],
// [{'0': '#7EBB70', '1': '#B6F2A8'}, {'0': '#43BF04', '1': '#55FF00'}],
// ];
// var data= [
// {
// name:'预计',
// data:[
// {name:'星期一',value:20,},
// {name:'星期二',value:22,},
// {name:'星期三',value:25,},
// {name:'星期四',value:27,},
// {name:'星期五',value:25,}
// ]
// },
// {
// name:'实际',
// data:[
// {name:'星期一',value:18,},
// {name:'星期二',value:17,},
// {name:'星期三',value:26,},
// {name:'星期四',value:25,},
// {name:'星期四',value:28,},
// {name:'星期五',value:22,}
// ]
// }
// ];
// var seriesData = [];
// data.forEach((item, index) => {
// seriesData.push(
// // 数据顶部小圆圈
// {
// name: '',
// type: 'pictorialBar',
// symbolSize: [22, 10],
// symbolOffset: index === 0 ? ['-60%', -6] : ['60%', -6],
// z: 3,
// symbolPosition: 'end',
// label: {
// show: false,
// },
// silent: true,
// data: item.data.map((ix, ind) => {
// return {
// name: ix.name,
// value: ix.value,
// itemStyle: {
// normal: {
// opacity: 1,
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 1,
// y2: 1,
// colorStops: [
// {
// offset: 1, color: circleColors[ind][index] // 100% 处的颜色
// }
// ],
// global: false // 缺省为 false
// }
// }
// }
// }
// })
// },
// //底部小圆圈
// {
// name: '',
// type: 'pictorialBar',
// symbolSize: [22, 12],
// symbolOffset: index === 0 ? ['-60%', -6] : ['60%', -6],
// z: 1,
// symbolPosition: 'end',
// label: {
// show: false,
// },
// silent: true,
// data: item.data.map((ix, ind) => {
// return {
// name: '',
// value: 2,
// itemStyle: {
// normal: {
// opacity: 1,
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 1,
// y2: 0,
// colorStops: [
// {
// offset: 0, color: datasColors[ind][index]['0'] // 0% 处的颜色
// },
// {
// offset: 0.4, color: datasColors[ind][index]['0'] // 40% 处的颜色
// },
// {
// offset: 0.6, color: datasColors[ind][index]['1'] // 60% 处的颜色
// },
// {
// offset: 1, color: datasColors[ind][index]['1'] // 100% 处的颜色
// }
// ],
// global: false // 缺省为 false
// }
// }
// },
// }
// })
// },
// //数据的柱状图
// {
// name: item.name,
// type: 'bar',
// barWidth: 22,
// z: 2,
// axisLabel: {
// show: false,
// },
// data: item.data.map((ix, ind) => {
// return {
// name: ix.name,
// value: ix.value,
// itemStyle: {
// normal: {
// opacity: 1,
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 1,
// y2: 0,
// colorStops: [
// {
// offset: 0, color: datasColors[ind][index]['0'] // 0% 处的颜色
// },
// {
// offset: 0.4, color: datasColors[ind][index]['0'] // 40% 处的颜色
// },
// {
// offset: 0.6, color: datasColors[ind][index]['1'] // 60% 处的颜色
// },
// {
// offset: 1, color: datasColors[ind][index]['1'] // 100% 处的颜色
// }
// ],
// global: false // 缺省为 false
// }
// }
// },
// }
// })
// },
// )
// });
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
},
// color: new echarts.graphic.LinearGradient(
// 0, 0, 1, 0,
// [
// {
// offset: 0,
// color: '#CB9F60'
// },
// {
// offset: 0.4,
// color: '#CB9F60'
// },
// {
// offset: 0.6,
// color: '#F5C682'
// },
// {
// offset: 1,
// color: '#F5C682' // 100% 处的颜色
// }
// ],
// 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
},
// color: new echarts.graphic.LinearGradient(
// 0, 0, 1, 0,
// [
// {
// offset: 0,
// // color: 'rgba(51, 204, 167, 1)' // 0% 处的颜色
// color: 'blue'
// },
// {
// offset: 1,
// color: 'rgba(148, 255, 254, 1)' // 100% 处的颜色
// }
// ],
// 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]
},
]
};