一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。
学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
1.echars立体柱状图制作
代码如下：
注：当要展示的柱子比较多时可以将series里的itemStyle color颜色提取出来写个数组感觉会更好
mychart() {
var myChart = echarts.init(document.getElementById('bprofitTotal3'));
var barWidth = 15;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: [{
name: '概算总额',
icon: 'roundRect1',
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(5, 75, 170, 1)' },
{ offset: 1, color: 'rgba(11, 151, 232, 1)' }
]
} //盖子的颜色
}, {
name: '项目投资完成额',
icon: 'roundRect1',
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(90, 45, 192, 1)' },
{ offset: 1, color: 'rgba(184, 91, 225, 1)' }
]
} //盖子的颜色
}, '4'],
selectedMode: false,//取消图例上的点击事件
x: 'center',
bottom: '2%',
itemWidth: 16, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 50,// 设置间距
textStyle: {//文字根据legend显示
color: "#FFFFFF",
fontSize: 12,
},
},
grid: {
left: '8%',
top: '18%',
right: '8%',
bottom: '12%',
containLabel: true
},
xAxis: {
type: 'category',
triggerEvent: true,
axisLine: {
show: false
},
axisLabel: {
color: "#FFFFFF",
fontSize: '14',
// interval: 0,
// rotate: rotate//文字旋转角度
},
axisTick: {
// show: false,
alignWithLabel: true,
lineStyle: {
color: '#0C4F81',
type: 'solid'
}
},
// data: xAxisData,
data: ['新建', '技改', '科技', '信息化', '股权'],
},
yAxis: {
type: 'value',
nameTextStyle: {
color: '#4F88BD',
padding: [0, 25, -5, 0],
fontSize: 12,
fontFamily: 'Microsoft YaHei',
},
axisLine: {
show: true,
lineStyle: {
color: "#0C4F81"
}
},
axisLabel: {
color: "#4F88BD",
fontSize: '12',
formatter: '{value}'
},
splitLine: {
lineStyle: {
type: "dotted",
color: "#0C4F81"
}
},
axisTick: {
show: false
},
},
series: [
{
z: 2,
name: '概算总额',
type: 'pictorialBar',
symbolPosition: 'end',
data: [410, 420, 520, 520, 610],
symbol: 'diamond',
symbolOffset: ['-70%', '-40%'], //盖子的位置
symbolSize: [15, 13], //盖子的大小
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(94, 232, 252, 1)' },
{ offset: 1, color: 'rgba(30, 169, 237, 1)' }
]
} //盖子的颜色
},
tooltip: {
show: false
}
},
{
z: 1,
type: 'bar',
name: '概算总额',
barWidth: barWidth,
barGap: '50%',
data: [410, 420, 520, 520, 610],
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(5, 75, 170, 1)' },
{ offset: 0.5, color: 'rgba(11, 151, 232, 1)' },
{ offset: 0.5, color: 'rgba(10, 57, 123, 1)' },
{ offset: 1, color: 'rgba(117, 77, 253, 1)' }
]
}
}
},
{
z: 2,
name: '项目投资完成额',
type: 'pictorialBar',
symbolPosition: 'end',
data: [310, 120, 420, 220, 510],
symbol: 'diamond',
symbolSize: [15, 13], //盖子的大小
symbolOffset: ['70%', '-40%'],
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(220, 149, 251, 1)' },
{ offset: 1, color: 'rgba(119, 62, 247, 1)' }
]
}
},
tooltip: {
show: false
}
},
{
z: 1,
type: 'bar',
name: '项目投资完成额',
barWidth: barWidth,
// barGap: '-50%',
data: [310, 120, 420, 220, 510],
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(90, 45, 192, 1)' },
{ offset: 0.5, color: 'rgba(184, 91, 225, 1)' },
{ offset: 0.5, color: 'rgba(50, 13, 133, 1)' },
{ offset: 1, color: 'rgba(90, 45, 192, 1)' }
]
}
}
},
]
};
myChart.setOption(option);
},
感谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕💕💕
后续会持续更新记录😊~~~
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
