Echarts 3D立体柱状图(源码+例图)

Echarts 3D立体柱状图,3D长方体柱状图,直接cope源码可用(源码+例图)

废话不多说,直接上代码!!! 

Echarts 3D立体柱状图(源码+例图)_第1张图片

// HTML 代码
// JS 代码 data(){ return { chart:null } }; mounted(){ // 3D立体柱状图 this.litiBar(); }, methods:{ litiBar() { this.chart = echarts.init(document.getElementById('litiBar')); // 创建立方体正面图形 const cubeShape1 = echarts.graphic.extendShape({ shape: { x: 0, y: 0, width: 110, // 长方体宽度 zWidth: 8, // 阴影折角高 zHeight: 4 // 阴影折角宽 }, buildPath: (ctx, shape) => { const api = shape.api; const xAxisPoint = api.coord([shape.xValue, 0]); const p0 = [shape.x, shape.y]; const p1 = [shape.x - shape.width / this.xAxisText.length, shape.y]; const p4 = [shape.x + shape.width / this.xAxisText.length, shape.y]; const p2 = [xAxisPoint[0] - shape.width / this.xAxisText.length, xAxisPoint[1]]; const p3 = [xAxisPoint[0] + shape.width / this.xAxisText.length, xAxisPoint[1]]; // 绘制正面 ctx.moveTo(p0[0], p0[1]); //0 ctx.lineTo(p1[0], p1[1]); //1 ctx.lineTo(p2[0], p2[1]); //2 ctx.lineTo(p3[0], p3[1]); //3 ctx.lineTo(p4[0], p4[1]); //4 ctx.lineTo(p0[0], p0[1]); //0 ctx.closePath(); } }) // 创建立方体的顶和侧面 const cubeShape2 = echarts.graphic.extendShape({ shape: { x: 0, y: 0, width: 110, zWidth: 8, zHeight: 4 }, buildPath: (ctx, shape) => { const api = shape.api; const xAxisPoint = api.coord([shape.xValue, 0]); const p1 = [shape.x - shape.width / this.xAxisText.length, shape.y]; const p4 = [shape.x + shape.width / this.xAxisText.length, shape.y]; const p6 = [shape.x + shape.width / this.xAxisText.length + shape.zWidth, shape.y - shape.zHeight]; const p7 = [shape.x - shape.width / this.xAxisText.length + shape.zWidth, shape.y - shape.zHeight]; const p3 = [xAxisPoint[0] + shape.width / this.xAxisText.length, xAxisPoint[1]]; const p5 = [xAxisPoint[0] + shape.width / this.xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight]; // 绘制侧面 ctx.moveTo(p4[0], p4[1]); //4 ctx.lineTo(p3[0], p3[1]); //3 ctx.lineTo(p5[0]+6, p5[1]-6); //5 ctx.lineTo(p6[0]+7, p6[1]-8); //6 ctx.lineTo(p4[0], p4[1]); //4 // 绘制顶部 ctx.moveTo(p4[0], p4[1]); //4 ctx.lineTo(p6[0]+7, p6[1]-8); //6 ctx.lineTo(p7[0]+7, p7[1]-8); //7 ctx.lineTo(p1[0], p1[1]); //1 ctx.lineTo(p4[0], p4[1]); //4 ctx.closePath(); } }) echarts.graphic.registerShape('cubeShape1', cubeShape1) echarts.graphic.registerShape('cubeShape2', cubeShape2) this.initECharts() }, initECharts() { const option = { title: { left: 20, top: 20 }, textStyle:{ fontSize:15, color: '#10D5DF' }, tooltip: {}, xAxis: { type: 'category', // max: 'dataMax',// 柱状图以数据最大的为顶点 data: this.xAxisText, interval: 0, axisLabel: { color: '#44f0ff' }, axisTick: { show: false, },// 隐藏X刻度线 axisLine: { show: true, lineStyle: { color: 'rgba(28, 180, 215,0.5)' } } }, yAxis: { type: 'value', splitLine: { lineStyle:{ color: 'rgba(224,224,224,0.1)'// 分割轴线的颜色 } }, axisLine: { show: true, lineStyle: { color: 'rgba(28, 180, 215,0.5)' } } }, grid: { top: 80, bottom: 30 }, series: [{ // name: '销量统计', type: 'custom', label: { show: true, position: 'top', }, // barWidth:20, renderItem: (params, api) => { let location = api.coord([api.value(0), api.value(1)]) return { type: 'group', children: [{ type: 'cubeShape1', // 正方体正面 shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1] }, style: { fill: new echarts.graphic.LinearGradient(0,0,0,1, [{ offset: 0.1, color: 'rgba(27, 202, 242, 1)' },{ offset: 1, color: 'rgba(29, 111, 130, 1)' }]) } }, { type: 'cubeShape2', // 正方体侧面和顶 shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1] }, style: { fill: new echarts.graphic.LinearGradient(0,0,0,1, [{ offset: 0.1, color: 'rgba(29, 111, 130, 1)' },{ offset: 1, color: 'rgba(27, 202, 242, 1)' }]) } }] } }, data: this.yAxisData }] } this.chart.setOption(option) }, }

你可能感兴趣的:(ECharts图表,Vue,前端,echarts,vue,vue.js,1024程序员节)