const weatherIcons = [
{
lable: life insurance’,
id: 2,
img: require(@/assets/images/customerModule/title-action.png)
},
{
lable: serious illness’,
id: 3,
img: require(@/assets/images/customerModule/title-action.png)
},
{
lable: medical’,
id: 4,
img: require(@/assets/images/customerModule/title-action.png)
},
{
lable: annuity’,
id: 5,
img: require(@/assets/images/customerModule/title-action.png)
},
{
lable: accident’,
id: 6,
img: require(@/assets/images/customerModule/title-action.png)
}
]
let chartData = [10,10,0,0,0]
option = {
grid: {
top: 20,
right: 0,
left: 0,
Bottom: 50
},
xAxis: [
{
type: category’,
data: [1’, 2’, 3’, 4’, 5’],
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: #F2F2F2’
}
},
axisLabel: {
show: true,
fontSize: 13,
lineHeight: 20,
color: #999’,
formatter: function(value) {
return {’ + value + | }’ + \
’ + weatherIcons[value – 1].lable
},
rich: {
1: {
width: 17,
height: 17,
backgroundColor: {
image: weatherIcons[0].img
}
},
2: {
width: 17,
height: 17,
backgroundColor: {
image: weatherIcons[1].img
}
},
3: {
width: 17,
height: 17,
backgroundColor: {
image: weatherIcons[2].img
}
},
4: {
width: 17,
height: 17,
backgroundColor: {
image: weatherIcons[3].img
}
},
5: {
width: 17,
height: 17,
backgroundColor: {
image: weatherIcons[4].img
}
}
}
}
}
],
yAxis: [
{
show: false
}
],
series: [
{
name: Placeholder’, // Control the distance between the column and the X-axis
type: bar’,
stack: Total’,
itemStyle: {
borderColor: transparent’,
color: transparent’
},
emphasis: {
itemStyle: {
borderColor: transparent’,
color: transparent’
}
},
data: [max0.04,max0.04,max0.04,max0.04,max*0.04] // Configure it yourself here. This needs to be 0.04 higher than the maximum value of chartData. Just fine
},
{
// real data
data: chartData,
name: 'Top disc (top of column chart)',
//symbol mark types include 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' (default is circle)
type: 'pictorialBar', //Specify the type
symbolSize: [29, 6], //Specify size, [width, height]
symbolOffset: [0, -8], //position offset [right, bottom] negative number in the opposite direction
z: 18, // Level (priority display)
itemStyle: {
normal: {
//The color of the cylinder
//Right, down, left, up (1, 0, 0, 0) means starting from the right and gradient to the left
color: function(params) {
var colorList = [
['#7BB0FF', '#4488FF'],
['#FB7C8C', '#F44E62'],
['#AD95FF', '#8762FD'],
['#58DCFF', '#18C1EE'],
['#FFD56E', '#FF9B33']
]
var colorItem = colorList[params.dataIndex]
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: colorItem[0]
},
{
offset: 1,
color: colorItem[1]
}
],
false
)
}
}
},
symbolPosition: 'end'
},
{
name: 'Bottom disc (bottom of column chart)',
type: 'pictorialBar',
symbolSize: [29, 6],
symbolOffset: [0, -2],
z: 18,
itemStyle: {
normal: {
//The color of the cylinder
//Right, down, left, up (1, 0, 0, 0) means starting from the right and gradient to the left
color: function(params) {
var colorList = ['#2370EC', '#F04156', '#6B3BFD', '#21C1EC', '#EB7313']
var colorItem = colorList[params.dataIndex]
return colorItem
}
}
},
// real data
data: chartData
},
{
name: 'Real data column chart',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'top'
},
itemStyle: {
normal: {
//The color of the cylinder
//Right, down, left, up (1, 0, 0, 0) means starting from the right and gradient to the left
color: function(params) {
console.log(params)
var colorList = [
['#93C2FF', '#2E78FF'],
['#FF99A5', '#F44E62'],
['#C6B7FF', '#7144FD'],
['#95E9FF', '#18C1EE'],
['#FFE881', '#FF6C03']
]
var colorItem = colorList[params.dataIndex]
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: colorItem[0]
},
{
offset: 1,
color: colorItem[1]
}
],
false
)
}
}
},
z: 16,
silent: true,
barWidth: 29,
// barGap: '10%',
showBackground: true,
backgroundStyle: {
color: '#f8f8f8'
},
// real data
data: chartData
}
]
}
Realization renderings
