冰山图echarts 配置项内容和展示
自定义冰山柱图
配置项如下
option = {
"title": {
"text": "",
"left": "center",
"textStyle": {
"fontSize": 20,
"color": "rgb(85,85,85)"
}
},
"dataset": {
"source": [{
"zzmmmc": "2017",
"人数": 6588
},
{
"zzmmmc": "2018",
"人数": 4343
},
{
"zzmmmc": "2019",
"人数": 3159
},
{
"zzmmmc": "2020",
"人数": 6149
}]
},
"grid": {
"left": "2%",
"right": "2%",
"containLabel": true
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
},
"enterable": true,
"extraCssText": "max-height:300px; overflow-y:auto;",
},
"legend": {
"show": false,
"type": "scroll",
"orient": "horizontal",
"x": "center",
"y": "bottom",
"icon": "rect",
"textStyle": {
"color": "rgb(85,85,85)",
"fontSize": 12
},
"data": ["人数"]
},
"xAxis": [{
"inverse": false,
"name": "",
"type": "category",
"position": "bottom",
"boundaryGap": true,
"axisLine": {
"show": true,
"lineStyle": {
"color": "#2db2ee",
"width": 1
}
},
"splitLine": {
"show": false,
"lineStyle": {
"color": "rgb(221,221,221)"
}
},
"axisLabel": {
"show": true,
"fontSize": 12,
"color": "rgb(85,85,85)",
"rotate": 0
},
"axisTick": {
"show": false
},
"nameTextStyle": {
"color": "rgb(85,85,85)",
"fontSize": 12
}
}],
"yAxis": [{
"inverse": false,
"name": "",
"type": "value",
"boundaryGap": [0, "20%"],
"position": "left",
"axisLabel": {
"show": true,
"fontSize": 12,
"color": "rgb(85,85,85)"
},
"axisLine": {
"show": true,
"lineStyle": {
"color": "#2db2ee",
"width": 1
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": "#2db2ee"
}
},
"axisTick": {
"show": false
},
"nameTextStyle": {
"color": "rgb(85,85,85)",
"fontSize": 12
}
}],
"series": [{
"type": "pictorialBar",
"smooth": true,
"name": "人数",
"barGap": "0%",
"symbol": "path://d='M150 0 L75 200 L225 200 Z'",
"dimensions": ["zzmmmc", "人数"],
"connectNulls": true,
"barWidth": "45%",
"label": {
"normal": {
"show": false,
"textStyle": {
"fontSize": 14,
"color": "#1890ff"
},
"position": "top",
"formatter": "{@[1]}"
}
},
"itemStyle": {
"normal": {
"color": function(params){
let list = [
{
"x": 0,
"y": 0,
"y2": 0,
"x2": 1,
"global": false,
"colorStops": [{
"offset": 0,
"color": "#1ABAE1"
},
{
"offset": 0.5,
"color": "#1ABAE1"
},
{
"color": "#17D1FF",
"offset": 0.5
},
{
"offset": 1,
"color": "#17D1FF"
}],
"type": "linear"
},
{
"x": 0,
"y": 0,
"y2": 0,
"x2": 1,
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgb(28,207,108)"
},
{
"color": "rgb(34,210,113)",
"offset": 0.5
},
{
"offset": 0.5,
"color": "rgb(79,232,147)"
},
{
"offset": 1,
"color": "rgb(79,232,147)"
}],
"type": "linear"
},
{
"x": 0,
"y": 0,
"y2": 0,
"x2": 1,
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgb(228,158,22)"
},
{
"color": "rgb(244,180,57)",
"offset": 0.5
},
{
"offset": 0.5,
"color": "rgb(230,161,26)"
},
{
"offset": 1,
"color": "rgb(244,180,57)"
}],
"type": "linear"
},
{
"x": 0,
"y": 0,
"y2": 0,
"x2": 1,
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgb(217,86,21)"
},
{
"color": "rgb(247,116,51)",
"offset": 0.5
},
{
"offset": 0.5,
"color": "rgb(247,116,51)"
},
{
"offset": 1,
"color": "rgb(244,180,57)"
}],
"type": "linear"
},
]
return list[params.dataIndex];
}
}
}
}]
}
截图如下
