学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~\
如果大家喜欢，可以点赞或留言💕~~，谢谢大家⭐️⭐️⭐️~
这里是对echarts特殊柱状图表实现的方式记录
1.echarts双柱状图里边带小方格
代码如下：
mychart() {
myChart = echarts.init(document.getElementById('profitTotal5'));
let colors = [{
one: "#67E0E3",
two: "#0181DE",
}, {
one: "#9336FF",
two: "#146AFF",
}, {
one: "#082757",
two: "#02B093",
}];
let echartData = [{
name: "火电",
value: 254.00,
value2: 254.00,
},
{
name: "水电",
value: 914.87,
value2: 254.00,
},
{
name: "风电",
value: 319.59,
value2: 254.00,
},
{
name: "光伏",
value: 738.01,
value2: 254.00,
},
{
name: "煤炭",
value: 448.69,
value2: 254.00,
},
{
name: "化工",
value: 566.43,
value2: 254.00,
},
{
name: "运输",
value: 16.31,
value2: 2254.00,
},
{
name: "其他",
value: 1021.87,
value2: 254.00,
}
];
let xAxisData = echartData.map(v => v.name);
let yAxisData = echartData.map(v => v.value);
let yAxisData2 = echartData.map(v => v.value2);
//计算最大值
// let maxy = Math.max(...yAxisData)
let maxy = 4000;
let yAxisDatabig = [];
yAxisData.map(item => {
yAxisDatabig.push(maxy)
})
option = {
grid: {
left: '15%',
top: '20%',
right: '8%',
bottom: '28%',
},
legend: {
data: ['累计投资计划', '累计投资完成额'],
orient: "horizontal",//vertical
x: 'center',
// y: 'bottom',
bottom: '4%',
icon: "roundRect",
selectedMode: false,//取消图例上的点击事件
itemWidth: 16, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 10,// 设置间距
textStyle: {
//文字根据legend显示
color: "#FFFFFF",
fontSize: 12,
},
},
xAxis: {
type: 'category',
data: xAxisData,
triggerEvent: true,//设置坐标点击事件
axisLine: {
show: false
},
axisLabel: {
color: "#FFFFFF",
fontSize: '14',
},
axisTick: {
// show: false,
alignWithLabel: true,
lineStyle: {
color: 'rgba(12, 87, 169, 1)',
type: 'solid'
}
}
},
yAxis: {
type: 'value',
max: maxy,
axisLine: {
show: true,
lineStyle: {
color: "#0C4F81"
}
},
nameTextStyle: {
color: '#81ACCF',
fontSize: '60%',
},
axisLabel: {
color: "#4F88BD",
fontSize: '12',
formatter: '{value}'
},
splitLine: {
lineStyle: {
type: "dotted",
color: "#0C4F81"
}
},
axisTick: {
show: false
},
},
series: [
{
name: '累计投资计划',
type: 'pictorialBar', //设置类型为象形柱状图
symbol: 'roundRect', //图形类型，带圆角的矩形
symbolOffset: [-5, 0],
symbolMargin: '1', //图形垂直间隔
barWidth: '14', //柱图宽度
// animationDelay: (dataIndex, params) => {
// //每个图形动画持续时间
// return params.index * 50;
// },
itemStyle: {
normal: {
color:'#FF4A8C',
},
},
//设置图表上方显示文字
//label: {
//show: true,
//position: 'top',
//color: '#ffffff',
//zlevel: 4,
//z: 10,
//formatter:'{c}'
//},
z: 1,
barGap: 0, //柱间距离
symbolRepeat: true, //图形是否重复
symbolSize: [14, 5], //图形元素的尺寸
animationEasing: 'elasticOut', //动画效果
stack: '2',
data: yAxisData,
},
{
name: '累计投资完成额',
type: 'pictorialBar', //设置类型为象形柱状图
symbol: 'roundRect', //图形类型，带圆角的矩形
barWidth: '14', //柱图宽度
symbolOffset: [5, 0],
barMaxWidth: '26', //最大宽度
symbolMargin: '1', //图形垂直间隔
// animationDelay: (dataIndex, params) => {
// //每个图形动画持续时间
// return params.index * 50;
// },
itemStyle: {
normal: {
color: '#359EFF',
},
},
z: 1,
barGap: 0, //柱间距离
symbolRepeat: true, //图形是否重复
symbolSize: [14, 5], //图形元素的尺寸
animationEasing: 'elasticOut', //动画效果
stack: '1',
data: yAxisData2,
},
{
name: '背景',
type: 'bar',
barWidth: '15',
barGap: 0.5,
itemStyle: {
normal: {
color: '#21477F',
barBorderRadius: 6,
borderColor: '#AB3F66',
},
},
z: -1,
symbolOffset: [5, 0],
data: yAxisDatabig,
},
{
name: '背景',
type: 'bar',
barWidth: '15',
barGap: 0.5,
itemStyle: {
normal: {
color: '#21477F',
barBorderRadius: 6,
borderColor: '#53ACFF',
},
},
z: -1,
symbolOffset: [5, 0],
data: yAxisDatabig,
},
]
};
myChart.setOption(option);
window.onresize = () => {
myChart.resize()
}
window.addEventListener('resize', () => {
myChart.resize()
})
},2.echarts双柱状图制作
代码如下：
mychart() {
myChart = echarts.init(document.getElementById('profitTota4'));
let colors = [{
one: "#F6F68C",
two: "#FC8F3E",
}, {
one: "#F6F68C",
two: "#FC8F3E",
}, {
one: "#F6F68C",
two: "#FC8F3E",
}];
let echartData = [{
name: "火电",
value: 254.00,
value2: 454.00,
},
{
name: "水电",
value: 514.87,
value2: 454.00,
},
{
name: "风电",
value: 319.59,
value2: 454.00,
},
{
name: "光伏",
value: 438.01,
value2: 254.00,
},
{
name: "煤炭",
value: 748.69,
value2: 454.00,
},
{
name: "化工",
value: 756.43,
value2: 454.00,
},
{
name: "运输",
value: 316.31,
value2: 454.00,
},
{
name: "其他",
value: 321.87,
value2: 454.00,
}
];
let xAxisData = echartData.map(v => v.name);
let yAxisData = echartData.map(v => v.value);
let yAxisData2 = echartData.map(v => v.value2);
option = {
color: ['#00D1B6'], //图例颜色
grid: {
left: '15%',
top: '20%',
right: '8%',
bottom: '28%'
},
legend: {
data: ['年度投资计划', '年度投资完成额'],
orient: "horizontal",//vertical
x: 'center',
// y: 'bottom',
bottom: '4%',
icon: "roundRect",
selectedMode: false,//取消图例上的点击事件
itemWidth: 16, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 10,// 设置间距
textStyle: {
//文字根据legend显示
color: "#FFFFFF",
fontSize: 12,
},
},
axisPointer: {
type: 'shadow',
label: {
show: true
}
},
xAxis: {
type: 'category',
data: xAxisData,
axisLine: {
show: false
},
axisLabel: {
color: "#FFFFFF",
fontSize: '14',
// interval: 0,
// rotate: "45"//文字旋转角度
},
axisTick: {
// show: false,
alignWithLabel: true,
lineStyle: {
color: '#0C4F81',
type: 'solid'
}
}
},
yAxis: {
type: 'value',
// max:100,
axisLine: {
lineStyle: {
color: "#0C4F81",
}
},
nameTextStyle: {
color: '#81ACCF',
fontSize: '60%',
},
axisLabel: {
color: "#4F88BD",
fontSize: '12',
formatter: '{value}'
},
splitLine: {
lineStyle: {
type: "dotted",
color: "#0C4F81"
}
},
axisTick: {
show: false
}
},
series: [
{
name: '年度投资计划',
barMaxWidth: 10,
itemStyle: {
normal: {
barBorderRadius: [100, 0, 100, 0],
label: {
show: false,
position: 'top',
color: '#ffffff'
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(255, 213, 45, 1)"
},
{
offset: 1,
color: "rgba(0, 255, 240, 1)"
}
]),
}
},
data: yAxisData,
type: 'bar'
},
{
name: '年度投资完成额',
barMaxWidth: 10,
itemStyle: {
normal: {
barBorderRadius: [100, 0, 100, 0],
label: {
show: false,
position: 'top',
color: '#ffffff'
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(214, 126, 236, 1)"
},
{
offset: 1,
color: "rgba(123, 118, 252, 1)"
}
]),
}
},
data: yAxisData2,
type: 'bar'
},
]
};
myChart.setOption(option);
window.onresize = () => {
myChart.resize()
}
window.addEventListener('resize', () => {
myChart.resize()
})
},感谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕💕💕
后续会持续更新记录😊~~~
