运输次数echarts shadow' // }, // formatter: function(params) { // const item = params[1] // return item.name + ' : ' + item.value + '次'; // } // }, grid: { left: 40, right: 40, bottom: 100, top: 100, containLabel: true }, xAxis: { type: 'category配置项内容和展示

百分比3D正体柱状图

      // 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function(ctx, shape) {
        // 该方法官方文档有详细的介绍，先看官网再看此此demo有助于理解
        // 绘画路径是canves中的路径绘制方法
        // shape参数是下面series里面的shap，
        //外边的参数shape是默认值，即如果低下的shap中没有会采用默认值x:0，y:0
        // 换算后的值跟canvas上一致，往下往右为正
        const xAxisPoint = shape.xAxisPoint
        ctx.moveTo(shape.x, shape.y);
        ctx.lineTo(shape.x - 15, shape.y - 3);
        ctx.lineTo(xAxisPoint[0] - 15, xAxisPoint[1] - 3);
        ctx.lineTo(xAxisPoint[0], xAxisPoint[1]);
        ctx.closePath()
    }
})
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function(ctx, shape) {
        const xAxisPoint = shape.xAxisPoint
        ctx.moveTo(shape.x, shape.y);
        ctx.lineTo(shape.x + 15, shape.y - 3);
        ctx.lineTo(xAxisPoint[0] + 15, xAxisPoint[1] - 3);
        ctx.lineTo(xAxisPoint[0], xAxisPoint[1]);
        ctx.closePath()
    }
})
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function(ctx, shape) {
        ctx.moveTo(shape.x, shape.y);
        ctx.lineTo(shape.x + 15, shape.y - 3);
        ctx.lineTo(shape.x, shape.y - 6);
        ctx.lineTo(shape.x - 15, shape.y - 3);
        ctx.closePath()
    }
})
// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)

const MAX = [8, 8, 8, 8, 8]
const VALUE = [7, 6, 4, 2, 2]
const MAX_VALUE = 8
option = {
    backgroundColor: "#334253",
    title: {
        text: '运输次数',
        top: 32,
        left: 18,
        textStyle: {
            color: 'white',
            fontSize: 20
        }
    },
    // tooltip: {
    //     trigger: 'axis',
    //     axisPointer: {
    //         type: 'shadow'
    //     },
    //     formatter: function(params) {
    //         const item = params[1]
    //         return item.name + ' : ' + item.value + '次';
    //     }
    // },
    grid: {
        left: 40,
        right: 40,
        bottom: 100,
        top: 100,
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['沪A0731', '沪A0732', '沪A0733', '沪A0734', '沪A0735'],
        axisLine: {
            show: true,
            lineStyle: {
                color:'#586473'
            }
        },
        offset: 10,
        axisTick: {
            show: false
        },
        axisLabel: {
            color:'#F5F5F5'
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: false,
            // axisLabel未定义color时采用此color
            lineStyle: {
                color: 'white'
            }
        },
        splitLine: {
            lineStyle:{
              color:'#586473'
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            formatter: function (val) {
                return parseInt(val/MAX_VALUE * 100)  + '%' ;
            }
        },
    },
    series: [{
        type: 'custom',
        renderItem: function(params, api) {
            // coord 是将数值转换成坐标系上的点
            // x轴与y轴上的值转化为坐标点,也可以理解为维度0,1
            // 如 data:[['沪A0731',7]]，api.value(0)为沪A0731，api.value(1)]为7
            const location = api.coord([api.value(0), api.value(1)])
            return {
                type: 'group',
                children: [{
                    type: 'CubeLeft',
                    shape: {
                        x: location[0],
                        y: location[1],
                        // x轴上的坐标点此时y轴value为0
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: 'rgba(86,105,126,.5)'
                    }
                }, {
                    type: 'CubeRight',
                    shape: {
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: 'rgba(86,105,126,.5)'
                    }
                }, {
                    type: 'CubeTop',
                    shape: {
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: 'rgba(86,105,126,.5)'
                    }
                }]
            }
        },
        data: MAX,
        silent:true
    }, {
        type: 'custom',
        renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            return {
                type: 'group',
                children: [{
                    type: 'CubeLeft',
                    shape: {
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#C8753C'
                            },
                             {
                                offset: 0.25,
                                color: '#C8753C'
                            },
                             {
                                offset: 0.75,
                                color: '#70B2CA'
                            },
                            {
                                offset: 1,
                                color: '#70B2CA'
                            }
                        ])
                    }
                }, {
                    type: 'CubeRight',
                    shape: {
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#C8753C'
                            },
                            {
                                offset: 0.25,
                                color: '#C8753C'
                            },
                             {
                                offset: 0.75,
                                color: '#70B2CA'
                            },
                            {
                                offset: 1,
                                color: '#70B2CA'
                            }
                        ])
                    }
                }, {
                    type: 'CubeTop',
                    shape: {
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill:'#C8753C'
                    }
                }]
            }
        },
        data: VALUE
    },{
        type: 'bar',
        label: {
            show: true,
            position: 'top',
            formatter: (params) => {
                return  params.value + '次'
            },
            color: '#fff',
            offset: [0, -5]

        },
        itemStyle: {
            color: 'transparent'
        },
        data: VALUE
    }]
}