间隔变色柱状图echarts image://./static/images/guang-circle.png配置项内容和展示
tooltip数据颜色会随数据变化而变色。
配置项如下
option = {
数据节点1: 30,
数据节点2: 80,
backgroundColor: "#0a1216",
color: ['rgba(218, 52, 110,', 'rgba(255, 234, 56,', 'rgba(63, 212, 255,'],
dataset: {
"source": [
["product", "data1", "data2", "data3"],
["休闲", "57", "56", "86"],
["运动", "23", "57", "77"],
["商务", "68", "42", "88", ],
["户外", "50", "57", "75"],
["童装", "42", "23", "81"],
]
},
tooltip: {
trigger: "axis",
axisPointer: {
type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
crossStyle: {
color: '#fff'
}
},
borderWidth: 1,
borderColor: "rgba(63, 212, 255, 1)",
backgroundColor: "#16244b",
formatter: function formatter(params) {
var colorList1 = "#fff";
let num1 = option.数据节点1
let num2 = option.数据节点2
if (params[0].data[3] < num1) {
colorList1 = "#da346e"
}
if (params[0].data[3] >= num1 && params[0].data[3] <= num2) {
colorList1 = "#ffea38"
}
if (params[0].data[3] > num2) {
colorList1 = "#3fd4ff"
}
let html = params[0].name + "<br/>";
html += "<span>目标：" + params[0].value[1].toLocaleString() + "%</span><br/><span style=color:#3fd4ff>实际：" + params[0].value[2].toLocaleString() + "%</span><br/><span style=color:" + colorList1 + ">完成率：" + params[0].value[3].toLocaleString() + "%</span>";
return html;
},
textStyle: {
rich: {
word1: {
color: "#fff",
fontSize: 16,
padding: [0, 50]
},
word2: {
color: function(params) {
let color = option.color[0] + "1)"
},
fontSize: 30,
fontFamily: "DIN"
},
word3: {
color: function(params) {
let color = option.color[1] + "1)"
},
fontSize: 30,
fontFamily: "DIN"
},
word4: {
color: function(params) {
let color = option.color[2] + "1)"
},
fontSize: 30,
fontFamily: "DIN"
}
}
},
extraCssText: "z-index:96"
},
xAxis: {
type: "category",
position: "top",
show: false,
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
color: "#fff",
interval: "0",
formatter: function(params) {
return "{kuang|" + params + "}"
},
rich: {
"kuang": {
color: "#fff",
align: "center",
verticalAlign: "middle",
width: "15",
height: "30",
backgroundColor: {
image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPsAAAAqCAYAAAB1EC0sAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFFRUNDOThCRjYyNjExRUFBOUM4RkMzMDc1NjMyNUY5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFFRUNDOThDRjYyNjExRUFBOUM4RkMzMDc1NjMyNUY5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUVFQ0M5ODlGNjI2MTFFQUE5QzhGQzMwNzU2MzI1RjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUVFQ0M5OEFGNjI2MTFFQUE5QzhGQzMwNzU2MzI1RjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6TgdboAAAGDklEQVR42uyd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"
}
}
},
}
},
yAxis: {
type: "value",
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
series: [{
type: "bar",
barWidth: "3%",
showBackground: true,
backgroundStyle: {
color: "rgba(14, 248, 254,.01)",
borderColor: "rgba(14, 248, 254,.05)",
borderWidth: 30,
},
itemStyle: {
color: function(params) {
//console.log(params)
var colorList = []
let num1 = option.数据节点1
let num2 = option.数据节点2
let odd = params.dataIndex % 2;
if (odd == 0) {
colorList[params.dataIndex] = option.color[2] + ".4)"
} else {
colorList[params.dataIndex] = option.color[0] + ".4)"
}
// if (params.data[1] < num1) {
// colorList[params.dataIndex] = option.color[0] + ".4)"
// }
// if (params.data[1] >= num1 && params.data[1] < num2) {
// colorList[params.dataIndex] = option.color[1] + ".4)"
// }
// if (params.data[1] >= num2) {
// colorList[params.dataIndex] = option.color[2] + ".4)"
// }
return colorList[params.dataIndex];
},
},
label: {
show: true,
distance: 20,
position: "bottom",
formatter: function(params) {
return "{kuang|" + params.data[0] + "}"
},
rich: {
"kuang": {
width: "4",
height: "30",
fontSize: 10,
color: "#fff",
align: "center",
verticalAlign: "middle",
backgroundColor: {
image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAzCAYAAAA94+4/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVCMDVBOUZCRjYyNjExRUFCMjcyQjQ2MTM2RkE5REU2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVCMDVBOUZDRjYyNjExRUFCMjcyQjQ2MTM2RkE5REU2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUIwNUE5RjlGNjI2MTFFQUIyNzJCNDYxMzZGQTlERTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUIwNUE5RkFGNjI2MTFFQUIyNzJCNDYxMzZGQTlERTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6RDwxrAAAAYElEQVR42uzQMQ0AMAgAsLFnyfyrxAQ4IAhoJTR+1jusXQXChAkTJgxhwoQJE4YwYcKECROGMGHChAlDmDBhwoQJQ5gwYcKEIUyYMGHChCFMmDBhwhAmTJgwYcIYtAADAHPPAmCzcz3cAAAAAElFTkSuQmCC"
}
}
},
},
"encode": {
"y": "data1"
}
},
{
type: "pictorialBar",
symbol: "path://M341.3,682.7C152.8,682.7,0,529.8,0,341.3C0,152.8,152.8,0,341.3,0c188.5,0,341.3,152.8,341.3,341.3 C682.7,529.8,529.8,682.7,341.3,682.7L341.3,682.7z M341.3,51.2c-160.2,0-290.1,129.9-290.1,290.1c0,160.2,129.9,290.1,290.1,290.1 c160.2,0,290.1-129.9,290.1-290.1C631.5,181.1,501.6,51.2,341.3,51.2L341.3,51.2z M341.3,496.3c-85.6,0-155-69.4-155-155 c0-85.6,69.4-155,155-155c85.6,0,155,69.4,155,155c0,41.1-16.3,80.5-45.4,109.6C421.9,480,382.4,496.3,341.3,496.3L341.3,496.3z M341.3,496.3",
symbolSize: ["20", "20"],
symbolPosition: "end",
symbolOffset: [0, -10],
itemStyle: {
color: function(params) {
var colorList = []
let num1 = option.数据节点1
let num2 = option.数据节点2
let odd = params.dataIndex % 2;
if (odd == 0) {
colorList[params.dataIndex] = option.color[2] + "1)"
} else {
colorList[params.dataIndex] = option.color[0] + "1)"
}
// if (params.data[1] < num1) {
// colorList[params.dataIndex] = option.color[0] + "1)"
// }
// if (params.data[1] >= num1 && params.data[1] < num2) {
// colorList[params.dataIndex] = option.color[1] + "1)"
// }
// if (params.data[1] >= num2) {
// colorList[params.dataIndex] = option.color[2] + "1)"
// }
return colorList[params.dataIndex];
},
},
label: {
show: false,
position: "top",
formatter: function(params) {
return params.data[1] + "%"
},
fontFamily: "DIN",
fontSize: 15
}
},
{
name: "达成率",
type: "line",
"encode": {
"y": "data3"
},
smooth: false,
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: 'circle',
symbolSize: 10,
itemStyle: {
color: 'rgba(63, 212, 255,1)',
},
lineStyle: {
show: true,
normal: {
color: 'rgba(63, 212, 255,0.4)',
width: 3,
}
}
}
]
};
截图如下
