var captions = [1, 2, 3, 4, 5]
// 用电量
var values = [1, 2, 3, 4, 5]
// 同比
var dataTbList = [12, -23, 56, 45, -6]
// 柱子直径
const widthBar = 20
// 数据
// x轴
var xData = captions
// 柱形图值
var barData = values
let xAxisData = xData;
let seriesData = barData
let seriesData1 = [];
let ciolData = [];
let sum = 0;
let min = 0;
let max = 0;
let bottomData = [];
let topData = [];
//底半圆
let ciolColor1 = [
'#fdbb58',
'#10b8fe',
'#025ad3',
];
//底半圆
let ciolColor0 = [
'#fdbb58',
'#10b8fe',
'#025ad3',
];
//柱上半圆
let bottomColor0 = [
'#fdc258',
'#0fb6fe',
'#014dcd',
];
//柱下半圆
let bottomColor1 = [
'#fddc5f',
'#63f8f4',
'#0ec1fe',
];
//柱顶半圆+阴影顶
let header0 = [
'#fddc5f',
'#63f8f4',
'#0ec1fe',
];
let header1 = [
'#a37b49',
'#1585b2',
'#033c97',
];
//阴影
let bottom = [
'rgb(253,179,88,0.4)',
'rgb(31,194,252,0.4)',
'rgb(1,80,207,0.4)',
];
xAxisData.forEach((item, index) => {
const value = Math.abs(seriesData[index])
seriesData1.push({
name: '',
value: value
});
ciolData.push({
name: '',
value: '0'
});
if (max < value) {
max = value
}
if (min > value) {
min = value
}
sum = min + max
});
xAxisData.forEach((item, index) => {
bottomData.push({
name: '',
value: sum * 1.5 - Math.abs(seriesData[index])
});
topData.push({
name: '',
value: sum * 1.5
});
});
option = {
backgroundColor: 'red',
grid: {
top: '11%',
left: '0%',
right: '0%',
bottom: '10%',
},
tooltip: {
show: false,
backgroundColor: '#34aadc',
borderColor: 'transparent',
trigger: 'axis',
textStyle: {
fontSize: 30,
color: '#ffffff',
fontWeight: 'normal'
},
formatter: (params) => {
// console.log(params)
const axisValue = params[0].axisValue
const dataIndex = params[0].dataIndex
const seriesName = params[0].seriesName
return `${axisValue}<br/>${seriesName} ${values[dataIndex]}`
}
},
xAxis: {
offset: 20,
data: xAxisData,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
margin: 0,
textStyle: {
color: '#e9b57a',
fontSize: 20,
fontweight: 'bold',
},
},
},
yAxis: {
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
textStyle: {
color: '#e9b57a',
fontSize: 25,
},
},
},
series: [
//'最低下的圆片',
{
name: '评价得分',
stack: 'a',
type: 'effectScatter',
symbolSize: [widthBar - 4, 12],
symbolOffset: [0, 0],
z: 22,
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: ciolColor0[params.dataIndex % 3],
},
{
offset: 0,
color: ciolColor1[params.dataIndex % 3],
},
]);
},
},
},
data: ciolData,
},
//下半截柱状图
{
name: '评价得分',
stack: 'a',
type: 'bar',
barWidth: widthBar,
z: 2,
barGap: '-100%',
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: bottomColor1[params.dataIndex % 3],
},
{
offset: 0,
color: bottomColor0[params.dataIndex % 3],
},
]);
},
},
},
data: seriesData1,
},
//替代柱状图 默认不显示颜色，是最下方柱图的value值 - 20'
{
name: '评价得分',
// stack: '',
type: 'bar',
barWidth: widthBar,
barGap: '-100%',
itemStyle: {
color: 'transparent',
},
data: seriesData1,
},
//头部1-下部
{
name: '评价得分',
stack: 'a',
type: 'pictorialBar',
symbolSize: [widthBar, 12],
symbolOffset: [0, -6],
z: 22,
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: header1[params.dataIndex % 3],
},
{
offset: 0,
color: header0[params.dataIndex % 3],
},
]);
},
},
},
symbolPosition: 'end',
label: {
formatter: (params) => {
// console.log(params)
const dataIndex = params.dataIndex
const vData = seriesData[dataIndex]
console.log()
if (vData > 0) {
return `{q|+${vData}%}`
}
if (vData == 0) {
return `{z|--%}`
}
return `{f|${vData}%}`
},
rich: {
q: {
color: '#ffffff',
fontSize: 25,
},
z: {
color: '#00ffcc',
fontSize: 25,
},
f: {
color: '#ff852e'
}
},
offset: [0, -5],
show: true,
position: 'top',
fontSize: 30,
color: 'transparent',
fontWeight: 400,
fontFamily: 'zcool-gdh',
},
data: seriesData1,
},
//头部2-上部
{
name: '评价得分',
stack: 'a',
type: 'pictorialBar',
symbolSize: [widthBar, 12],
symbolOffset: [0, -6],
symbolPosition: 'end',
z: 22,
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: header1[params.dataIndex % 3],
},
{
offset: 0,
color: header0[params.dataIndex % 3],
},
]);
},
},
},
label: {
// offset: [0, -10],
color: '#fdb502',
fontSize: 20,
formatter: (params) => {
// console.log(params)
const dataIndex = params.dataIndex
const dataTb = dataTbList[dataIndex]
if (dataTb > 0) {
return `{z|+${dataTb}%}`
}
if (dataTb == 0) {
return ` {z|--%}`
}
return ` {f|${dataTb}%}`
},
rich: {
c: {
color: '#fff',
fontSize: 10,
},
z: {
color: '#ffe500',
fontSize: 12,
},
f: {
color: '#ffe500'
}
},
show: true,
position: 'top',
fontSize: 8,
fontWeight: 700,
fontFamily: 'zcool-gdh',
},
data: topData,
},
//底色
{
name: '评价得分',
stack: 'a',
type: 'bar',
barWidth: [widthBar + 20],
z: 2,
barGap: '-100%',
// stack: '',
symbolPosition: 'end',
itemStyle: {
normal: {
color: function (params) {
return bottom[params.dataIndex % 3];
},
},
},
data: bottomData,
},
],
};