echarts柱状图开发中，我们需要在柱状图的顶部添加定义小方块盖在柱状图上面，让柱状图看起来像盖了一个帽子，柱状图的底部增加一个三角形装饰图标。
效果解析
颜色渐变
首先柱状图是自下而上颜色渐渐变淡的效果，我们使用颜色渐变graphic.LinearGradient来实现。
{
name: '分布',
type: 'bar',
data: this.list.map(obj => obj.value),
barWidth: '16',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(94, 238, 255, 0.1)'
}, {
offset: 1,
color: 'rgba(94, 238, 255, 1)'
}], false),
}
},
},
增加一个小帽子
接下来我们给柱状图的顶部增加一个小帽子
我们使用markPoint来实现。如果我们想要使用其他的图标,比如圆形，可以在iconfont自行寻找图标进行替换.
markPoint: {
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
symbolSize: [16, 4], // 设置扁圆的宽和高
itemStyle: {
color: 'rgba(94, 238, 255, 1)' // 圆盘颜色
},
data: this.list.map((obj, index) => ({
xAxis: index, // 对应柱子的横坐标
yAxis: obj.value + 0 // 柱子的值加上一些偏移量
}))
},
底部小三角
接下来，我们需要在柱状图底部增加一个三角装饰 ，我们使用pictorialBar自定义图标来实现。
{
name: '七日出入', // 底部
type: 'pictorialBar',
symbol: 'image://' + sanjiao,
symbolSize: [5, 3],
z: 10,
tooltip: {
show: false
},
data: this.list.map(obj => obj.value), // 设置固定高度
barWidth: 5,
symbolOffset: [0, 2]
},
完整实例代码
getData() {
let names = ['幼儿园', '小学', '初中', '高中', '成年', '老年', '未知'];
this.list = names.map(name => {
return {
name: name,
value: Math.floor(Math.random() * 100) + 1
};
});
this.drawEcharts(); // 绘制图表
},
drawEcharts() {
window.addEventListener('resize', this.drawEcharts)
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(this.$refs.echarts)
var option = {
title: {
text: '百分比', // 标题文本
left: '15', // 标题的位置，默认是居中，可以是：'left'、'right'、'center'
top: '10', // 标题的垂直位置，可以是：'top'、'bottom'、'middle'
textStyle: { // 主标题文本样式
color: 'rgba(123, 140, 166, 1)', // 主标题文字的颜色
fontSize: 12, // 主标题文字字体大小
fontFamily: 'MiSans', // 主标题文字的字体系列
fontWeight: 500, // 粗体
}
},
grid: {
top: '50px',
bottom: '10px',
left: '20px',
right: '20px',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 174, 0, 0.1)'
}, {
offset: 1,
color: 'rgba(255, 174, 0, 0.5)'
}], false),
}
}
},
legend: {
top: 0,
right: 20,
show: false,
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: 'rgba(157, 185, 233, 1)',
fontSize: '12'
},
},
xAxis: [{
data: this.list.map(obj => obj.name),
axisLabel: {
margin: 10,
interval: 0,
color: 'rgba(123, 140, 166, 1)',
textStyle: {
fontSize: 13
},
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.12)',
width: 1,
}
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(39, 76, 129, 0.26)',
width: 1,
}
},
axisTick: {
show: false
},
}],
yAxis: [
{
type: 'value',
splitNumber: 3,
axisLabel: {
color: 'rgba(123, 140, 166, 1)',
textStyle: {
fontSize: 12
},
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(8, 61, 98, 1.00)',
type: 'dashed',
width: 1,
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.12)',
type: 'dashed',
width: 1,
}
}
}],
series: [
{
name: '七日出入',
type: 'bar',
data: this.list.map(obj => obj.value),
barWidth: '16',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(94, 238, 255, 0.1)'
}, {
offset: 1,
color: 'rgba(94, 238, 255, 1)'
}], false),
}
},
markPoint: {
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
symbolSize: [16, 4], // 设置扁圆的宽和高
itemStyle: {
color: 'rgba(94, 238, 255, 1)' // 圆盘颜色
},
data: this.list.map((obj, index) => ({
xAxis: index, // 对应柱子的横坐标
yAxis: obj.value + 0 // 柱子的值加上一些偏移量
}))
},
},
{
name: '七日出入', // 底部
type: 'pictorialBar',
symbol: 'image://' + sanjiao,
symbolSize: [5, 3],
z: 10,
tooltip: {
show: false
},
data: this.list.map(obj => obj.value), // 设置固定高度
barWidth: 5,
symbolOffset: [0, 2]
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
