echarts二维柱状图做3D效果，先看下效果：
废话不多说，直接上代码：
initBarEchart(){
//柱状图
let option_bar = this.setOption()
let array = [{name:'5-10',value:232},{name:'5-11',value:132},{name:'5-12',value:432},{name:'5-13',value:632},{name:'5-14',value:252}]
let x_array = []
let y_array = []
array.forEach(item =>{
x_array.push(item.name)
y_array.push(item.value)
})
option_bar.xAxis.data = x_array
option_bar.series[0].data = y_array
option_bar.series[1].data = y_array
option_bar.series[2].data = y_array
var myEchart = echarts.init(document.getElementById('bar_echart'))
myEchart.setOption(option_bar)
},
setOption(){
return {
grid: {
top: 45,
bottom: 60,
left: "13%",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: 'none'
},
},
xAxis: {
type: "category",
data: [],
axisLabel: {
color: "#ffffff",
interval: 0,
rotate: 315,
fontSize: 12,
},
},
yAxis: {
type: "value",
axisLabel: {
color: "#ffffff",
fontSize: 12,
},
},
series: [{
name: 'A',//柱状A面
data: [],
type: "bar",
barWidth: 14,
showSymbol: false,
hoverAnimation: false,
itemStyle: {
//柱状图渐变色
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#05D7FF"
},
{
offset: 1,
color: "#00A8F9"
},
]),
}
},
{
name: 'B',//柱状B面
type: "bar",
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#05D7FF"
},
{
offset: 1,
color: "#00A8F9"
},
]),
},
barGap: 0,
data: [],
},
{
//柱状顶部
tooltip: {
show: false,
},
type: "pictorialBar",
itemStyle: {
borderWidth: 1,
borderColor: "#0571D5",
color: "#0571D5",
},
symbol: "diamond",
symbolSize: ["24", "10"],
symbolOffset: ["0", "-5"],
symbolPosition: "end",
data: [],
z: 3,
},
],
};
}
在配置option时，可以根据自己需求重新定义，柱状图实现3D效果的大致思路就是这样的
记录一下echarts数据更新刷新柱状图
let array = [] //新数据
let x_array = []
let y_array = []
array.forEach(item =>{
x_array.push(item.name)
y_array.push(item.value)
})
//获取已存在的echarts
let myEchart = echarts.getInstanceByDom(document.getElementById('bar_echart'))
//获取option
let option = myEchart.getOption()
option.xAxis[0].data = x_array
option.series[0].data = y_array
//重新赋值
myEchart.setOption(option)
好文链接
您阅读本篇文章共花了：
发表评论