var xData2 = ["柱子一", "柱子二", "柱子三", "柱子四", "柱子五", "柱子六"];
var data1 = [200, 100, 200, 200, 100, 123];
var data2 = [300, 200, 300, 300, 400, 143];
option = {
backgroundColor: "#001829",
tooltip: {
trigger: 'axis',
formatter: function (params) {
let html = ''
params.forEach(v => {
console.log(v)
html = `
<span style="display:block;margin-right:5px;border-radius:10px;width:8px;height:8px;"></span>
${v.name}：
<span style="font-weight:500;font-size: 14px">${v.value}条</span>
`
})
return html
},
borderColor: '#171d3c',
extraCssText: 'background: #171d3c; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #fff;',
axisPointer: {
type: 'line',
lineStyle: {
color: '#8fa8d3'
}
}
},
grid: {
containLabel: true,
left: 40,
right: 20,
bottom: 10,
top: 50,
},
xAxis: {
data: xData2,
show: true,
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'gray',
opacity: 1
}
},
// lineStyle: {
// show: true,
// type: 'solid'
// },
axisLabel: {
interval: 0,
textStyle: {
color: '#fff',
fontSize: 14,
},
// margin: 20, //刻度标签与轴线之间的距离。
},
},
yAxis: {
name: '（条）',
nameTextStyle: {
color: 'white',
fontSize: 14,
align: 'right',
lineHeight: 20
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
opacity: 0.5
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 14,
},
}
},
series: [{ //三个最低下的圆片
"name": "",
"type": "pictorialBar",
"symbolSize": [18, 12],
"symbolOffset": [0, 5],
"z": 12,
itemStyle: {
opacity: 1,
color: function (params) {
var a = params.name.slice(0, 2);
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFDA15' // 0% 处的颜色
}, {
offset: 1,
color: '#FFDA15' // 100% 处的颜色
}], false)
}
},
"data": [0.5, 0.5, 0.5, 0.5, 0.5, 0.5]
},
//下半截柱状图
{
name: '2020',
type: 'bar',
barWidth: 18,
barGap: '-100%',
itemStyle: { //lenged文本
opacity: .7,
color: function (params) {
var a = params.name.slice(0, 2);
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#F98902' // 0% 处的颜色
}, {
offset: 1,
color: '#FFDA15' // 100% 处的颜色
}], false)
}
},
data: data1
},
{ // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
type: 'bar',
barWidth: 18,
barGap: '-100%',
stack: '广告',
itemStyle: {
color: 'transparent'
},
data: data1
},
{
"name": "", //头部
"type": "pictorialBar",
"symbolSize": [18, 12],
"symbolOffset": [0, -5],
"z": 12,
"symbolPosition": "end",
itemStyle: {
color: '#163F7A',
opacity: 1,
},
"data": data2
},
{
"name": "",
"type": "pictorialBar",
"symbolSize": [18, 12],
"symbolOffset": [0, -5],
"z": 12,
itemStyle: {
opacity: 1,
color: function (params) {
var a = params.name.slice(0, 2);
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFDA15' // 0% 处的颜色
}, {
offset: 1,
color: '#FFDA15' // 100% 处的颜色
}], false)
}
},
"symbolPosition": "end",
"data": data1
},
{
name: '2019',
type: 'bar',
barWidth: 18,
barGap: '-100%',
z: 0,
itemStyle: {
color: '#163F7A',
opacity: .7,
},
data: data2
}
]
};