3d柱状图主要是创建左右两个面，也就是两个柱子，左右两个面颜色稍微要有点不一样，形成一点点对比就行，然后上下用 type: "pictorialBar" 象形柱图来实现底部和顶部的效果，下面代码可以复制到echarts官网运行，会看到一个渐变到透明的3d柱子
const industryColor = {
type: 'linear',
x: 1,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#6CB5EB'
},
{
offset: 1,
color: 'rgba(9,36,83,0.27)'
}
]
};
const industryData = [22, 35, 30, 22, 60, 56];
var option = {
backgroundColor: 'rgba(0, 0, 0, 0.6)',
animation: false,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '0%',
right: '4%',
bottom: '0%',
top: '10px',
containLabel: true
},
xAxis: {
type: 'category',
data: ['种植业', '养殖业', '旅游业', '服务业'],
axisLabel: {
color: '#E6F7FF'
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 2555, 0.1)'
}
},
axisTick: {
show: false
},
animation: false
},
yAxis: {
type: 'value',
axisLabel: {
color: '#E6F7FF'
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
},
animation: false
},
series: [
{
name: '产业结构',
type: 'bar',
barWidth: 9,
data: industryData,
itemStyle: {
//柱子左面
normal: {
// 重要的是color配置：线性渐变， 从上往下
color: {
type: 'linear',
x: 1,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#6CB5EB'
},
{
offset: 0.8,
color: 'rgba(9, 36, 83, 0.54)'
}
]
}
}
},
tooltip: {
show: false
}
},
{
name: '产业结构',
tooltip: {
show: true,
padding: 100,
position: [-10, '50%'],
borderWidth: 100
},
type: 'bar',
barWidth: 13,
barCategoryGap: '60%',
itemStyle: {
//柱子右面
normal: {
// 重要的是color配置：线性渐变， 从上往下
color: industryColor,
borderWidth: 0.3,
borderColor: 'rgba(9, 36, 83, 0.1)'
}
},
data: industryData,
// 间隔为0
barGap: 0,
z: 5
},
{
z: 10,
name: '产业结构',
// 这里是柱子的顶部，type: "pictorialBar" 可以自定义图形或者使用内置选项
type: 'pictorialBar',
symbolPosition: 'end',
data: industryData,
symbol: 'diamond',
symbolOffset: [0, -10],
symbolRotate: 90,
symbolSize: [3.5, 19.6],
itemStyle: {
normal: {
borderWidth: 0,
color: 'rgba(124, 201, 250, 1)'
}
},
tooltip: {
show: false
}
}
]
};
普通的3d柱子，可以用一个柱子，做从左到右的渐变。或者用两个柱子，和上面透明渐变一样从上到下渐变
var colorArr = ['#0C628C', '#3887D5', '#2570BB'];
var color = {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: colorArr[0]
},
{
offset: 0.5,
color: colorArr[0]
},
{
offset: 0.5,
color: colorArr[1]
},
{
offset: 1,
color: colorArr[1]
}
]
};
const industryData = [22, 35, 30, 25];
var option = {
backgroundColor: 'rgba(0, 0, 0, 0.6)',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
grid: {
left: '0%',
right: '4%',
bottom: '0%',
top: '10px',
containLabel: true
},
xAxis: {
type: 'category',
data: ['种植业', '养殖业', '旅游业', '服务业'],
axisLabel: {
color: '#E6F7FF'
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 2555, 0.1)'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#E6F7FF'
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
},
series: [
{
itemStyle: {
normal: {
// 这里是用一个柱子，从左到右的渐变。也可以用两个柱子做从上往下的渐变，和上面的透明渐变一样用法
color
}
},
data: industryData,
type: 'bar',
barWidth: 18,
z: 2,
name: '产业结构'
},
{
z: 1,
name: '产业结构',
// 柱子底部
type: 'pictorialBar',
data: industryData,
symbol: 'diamond',
symbolOffset: [0, 4],
symbolSize: [20, 8],
itemStyle: {
normal: {
color: color
}
},
tooltip: {
show: false
}
},
{
z: 3,
name: '产业结构',
type: 'pictorialBar',
// 柱子顶部
symbolPosition: 'end',
data: industryData,
symbol: 'diamond',
symbolOffset: [0, -11],
symbolRotate: 90,
symbolSize: [8, 19],
itemStyle: {
normal: {
borderWidth: 2,
color: colorArr[2]
}
},
tooltip: {
show: false
}
}
]
};
带阴影的3d柱子，主要是上要创建两个x轴，阴影的x轴要不显示。然后创建两个3d的柱子，阴影的柱子要用xAxisIndex关联上阴影的x轴
const situationColor = {
type: 'linear',
x: 1,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#4EF6F6'
},
{
offset: 0.4,
color: '#4EF6F6'
},
{
offset: 1,
color: 'rgba(2, 29, 54, 0.78)'
}
]
};
const industryData = [22, 35, 30, 25];
var option = {
backgroundColor: 'rgba(0, 0, 0, 0.6)',
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
grid: {
left: '0%',
right: '4%',
bottom: '0%',
top: '20px',
containLabel: true
},
// 多个x轴
xAxis: [
{
type: 'category',
data: ['7月', '8月', '9月', '10月'],
axisLine: {
show: false,
lineStyle: {
color: '#E6F2FE'
}
},
axisTick: {
show: false
},
},
// 第二个当作阴影柱子的轴，不显示
{
type: 'category',
data: ['7月', '8月', '9月', '10月'],
axisLine: {
show: false,
lineStyle: {
color: '#E6F2FE'
}
},
axisTick: {
show: false
},
show: false
}
],
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#E6F2FE'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
},
series: [
{
name: '村名情意',
type: 'bar',
showSymbol: false,
hoverAnimation: false,
barWidth: 7,
data: industryData,
itemStyle: {
//实体柱子左面
normal: {
borderWidth: 0,
color: {
type: 'linear',
x: 1,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#267A7B'
},
{
offset: 0.5,
color: '#267A7B'
},
{
offset: 1,
color: 'rgba(2, 29, 54, 0.7)'
}
]
}
}
},
tooltip: {
show: false
},
z: 3
},
{
name: '村名情意',
tooltip: {
show: true
},
type: 'bar',
barWidth: 8,
itemStyle: {
//实体柱子右面
normal: {
color: situationColor,
borderWidth: 0
}
},
data: industryData,
barGap: 0,
z: 5
},
{
//实体柱子顶部
z: 10,
name: '村名情意',
type: 'pictorialBar',
symbolPosition: 'end',
data: industryData,
symbol: 'diamond',
symbolOffset: [0, -8],
symbolRotate: 90,
symbolSize: [3, 15.5],
itemStyle: {
normal: {
borderWidth: 0,
color: '#4EF6F6'
}
},
tooltip: {
show: false
}
},
{
//实体柱子底部
z: 1,
name: '村名情意',
type: 'pictorialBar',
symbolPosition: 'start',
data: industryData,
symbol: 'diamond',
symbolOffset: [0, 7.8],
symbolRotate: 90,
symbolSize: [5, 15],
itemStyle: {
normal: {
borderWidth: 0,
color: 'rgba(2, 29, 54, 0.9)'
}
}
},
{
//阴影柱子左面
name: 'a',
// 关联x轴的第二个轴
xAxisIndex: 1,
type: 'bar',
showSymbol: false,
hoverAnimation: false,
barWidth: 7,
// data 要拿到整组数据的最大值
data: Array(industryData.length).fill(Math.max(...industryData)),
itemStyle: {
normal: {
borderWidth: 0,
color: 'rgba(31, 82, 86, 0.85)',
}
},
tooltip: {
show: false
},
z: 1,
},
{
//阴影柱子右面
name: 'a',
// 关联x轴的第二个轴
xAxisIndex: 1,
tooltip: {
show: false
},
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: 'rgba(53, 140, 144, 0.9)',
borderWidth: 0,
}
},
// data 要拿到整组数据的最大值
data: Array(industryData.length).fill(Math.max(...industryData)),
z: 1,
},
{
//阴影柱子顶部
z: 10,
name: 'a',
type: 'pictorialBar',
symbolPosition: 'end',
// data 要拿到整组数据的最大值
data: Array(industryData.length).fill(Math.max(...industryData)),
symbol: 'diamond',
symbolOffset: [0, -8.2],
symbolRotate: 90,
symbolSize: [3, 15.5],
itemStyle: {
normal: {
borderWidth: 0,
color: 'rgba(53, 140, 144, 0.9)'
}
},
tooltip: {
show: false
}
}
]
};
有时柱子会带一些图标，也可以用type: "pictorialBar" 象形柱图来实现，比如下图发光的小图标。这里不需要用3d，需要渐变
var option = {
backgroundColor: 'rgba(0, 0, 0, 0.6)',
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "0%",
right: "43px",
bottom: "0%",
top: 0,
containLabel: true,
},
xAxis: {
type: "value",
show: false,
axisLine: {
lineStyle: {
color: "#E6F2FE",
},
},
},
yAxis: {
type: "category",
data: ["财务公开", "村务公开", "党务公开", "新媒体宣传", "党员在线教育"],
axisLine: {
show: false,
lineStyle: {
color: "#E6F2FE",
},
formatter: "{value} 个",
},
axisTick: {
show: false,
},
},
series: [
{
itemStyle: {
normal: {
label: {
show: true,
position: [340, 0],
valueAnimation: true,
color: "#01DAEA",
formatter: "{c}个",
},
barBorderRadius: [0, 0, 50, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "#0A74F0", // 0% 处的颜色
},
{
offset: 1,
color: "#49EFFF", // 100% 处的颜色
},
],
},
},
},
data: [91, 78, 157, 435, 672],
type: "bar",
showBackground: true,
barWidth: 12,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.2)",
},
},
{
data: [91, 78, 157, 435, 672],
type: "pictorialBar",
symbolPosition: "end",
symbolRotate: 7,
// 发光的小图标 这里是base64的形式，也可以用网络图片
symbol:
"image://data:image/png;base64,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",
symbolOffset: [20, 0],
symbolSize: [36, 26],
z: 10,
},
],
};
扫一扫
1604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
