Renderings:
Introduce:
import * as echarts from 'echarts'
layout:
<div id="bar3d" style="height: 260px;width:580px;margin: 0 auto;"></div>
The specific implementation code:
mounted() {
this.initChart()
},
methods:{
initChart() {
//绿色
const data = [1700,800, 1700, 600,800,1700,800,1700,1700,800,1700,800];
//蓝色
const data2 = [2600,1400, 3350, 1400, 1400, 3350, 1400, 3350, 2600,1400,3350,1400];
const sideData = data.map(item => item + 90);
const sideData2 = data.map(item => item + 90);
var serveTBar = echarts.init(document.getElementById('bar3d'));
serveTBar.setOption(getEcharts3DBar());
function getEcharts3DBar () {
//左侧 右侧 顶部
//蓝色
var colorArr2 = ["rgba(11, 83, 128)", "rgba(2, 143, 224)", "rgba(11, 83, 128)"];
//绿色
var colorArr = ["rgb(12, 109, 122)", "rgba(1, 241, 228)", "rgb(12, 109, 122)"];
//绿色
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],
},
],
};
var color2 = {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: colorArr2[0],
},
{
offset: 0.5,
color: colorArr2[0],
},
{
offset: 0.5,
color: colorArr2[1],
},
{
offset: 1,
color: colorArr2[1],
},
],
};
//柱子宽度
var barWidth = 15;
var option = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
var str = params[0].name + ":";
params.filter(function (item) {
if (item.componentSubType == "bar") {
str += "<br/>" + item.seriesName + "：" + item.value;
}
});
return str;
},
},
//图表大小位置限制
grid:{
x:'10%',
x2:'5%',
y:'15%',
y2:'15%',
},
// legend: {
// show:false,
// data:['绿色','蓝色'],
// textStyle:{
// color:'#fff',
// fontSize:'20'
// }
// },
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月'],
//坐标轴
axisLine :{
show:true,
lineStyle: {
width: 1,
color: '#214776'
},
textStyle:{
color:'#fff',
fontSize:'10'
}
},
type : 'category',
axisLabel :{
textStyle:{
color: '#C5DFFB',
fontWeight: 500,
fontSize:'14'
}
},
axisTick :{
textStyle:{
color:'#fff',
fontSize:'16'
},
show: false,
},
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
type:'dashed',//线的类型 虚线
color: '#DEDEDE',
},
},
},
yAxis: {
name: '厂屋租凭统计：',
nameTextStyle: {
color: '#DEDEDE',
fontSize: 12,
padding: 10,
},
min: 0,//最小
max: 3500,//最大
interval: 500,//相差
type : 'value',
splitLine: {
show: true,
lineStyle: {
type:'dashed',//线的类型 虚线0
opacity:0.2//透明度
},
},
axisTick :{
show:false
},
axisLine: {
show: false,
},
//坐标值标注
axisLabel: {
show: true,
textStyle: {
color: '#C5DFFB',
}
},
},
series: [
//中
{
z: 1,
name: '绿色',
type: "bar",
barWidth: barWidth,
barGap: "0%",
data: data,
itemStyle: {
normal: {
color: color,
//柱形图上方标题
label: {
show: true,
position: 'top',
textStyle: {
color: 'rgb(1, 255, 250)',
fontSize: 8
}
},
}
},
},
//下
{
z: 2,
name: '绿色',
type: "pictorialBar",
data: sideData,
symbol: "diamond",
symbolOffset: ["-75%", "50%"],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: color
},
},
tooltip: {
show: false,
},
},
//上
{
z: 3,
name: '绿色',
type: "pictorialBar",
symbolPosition: "end",
data: data,
symbol: "diamond",
symbolOffset: ["-75%", "-50%"],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
itemStyle: {
normal: {
borderWidth: 2,
color: colorArr[2]
},
},
tooltip: {
show: false,
},
},
{
z: 1,
name: '蓝色',
type: "bar",
barWidth: barWidth,
barGap: "50%",
data: data2,
itemStyle: {
normal: {
color: color2,
//柱形图上方标题
label: {
show: true,
position: 'top',
textStyle: {
color: 'rgb(2, 157, 246)',
fontSize: 8
}
},
}
},
},
{
z: 2,
name: '蓝色',
type: "pictorialBar",
data: sideData2,
symbol: "diamond",
symbolOffset: ["75%", "50%"],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: color2
},
},
tooltip: {
show: false,
},
},
{
z: 3,
name: '蓝色',
type: "pictorialBar",
symbolPosition: "end",
data: data2,
symbol: "diamond",
symbolOffset: ["75%", "-50%"],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
itemStyle: {
normal: {
borderWidth: 2,
color: colorArr2[2]
},
},
tooltip: {
show: false,
},
},
],
};
return option;
}
},
},
Does anyone know how to change it to a gradient from top to bottom? ε=(´ο｀*)))