2021-11-10

echarts 画伪3D柱状图

1. 效果

2. 代码

var value = 0;
var colors = [
    {
        type: 'linear',
        x: 0,
        x2: 0,
        y: 0,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: '#30a4cf',
            },
            {
                offset: 1,
                color: '#3070cf',
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 0,
        y: 0,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: '#78cc40',
            },
            {
                offset: 1,
                color: '#2fd28d',
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 0,
        y: 0,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: '#f5a43a',
            },
            {
                offset: 1,
                color: '#c4742d',
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 0,
        y: 0,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: 'rgba(245,89,58,0.78)',
            },
            {
                offset: 1,
                color: 'rgba(196,45,45,1)',
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 0,
        y: 0,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: '#f5593a',
            },
            {
                offset: 1,
                color: '#c42d2d',
            },
        ],
    },
];
var maxData = 300;
var redData = 270;
var orangeData = 260;
var yellowData = 240;
var datas =''
if (value ===0) {
    datas=0.1
}else {
    datas=value
}
option = {
    backgroundColor: '#0e202d',

    grid: {
        top: 240,
        bottom: 150,
        right: '55%',
    },
    // tooltip: {},
    xAxis: {
        data: [],
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        // axisLabel: {
        //     interval: 0,
        //     textStyle: {
        //         color: '#beceff',
        //         fontSize: 20,
        //     },
        //     margin: 80, //刻度标签与轴线之间的距离。
        // },
    },
    yAxis: {
        show: true,
        splitNumber: 4,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#80D4FF',
            },
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            color: '#FFFFFF',
        },
        axisTick: {
            show: true,
        },
    },
    series: [
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [200, 45],
            symbolOffset: [-10, -20],
            z: 13,
            data: [
                {
                    name: '',
                    value: value,
                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            borderColor:'#438FC2',
                            color: 'RGBA(40, 91, 134, .8)' //圆柱顶部颜色
                        },
                    },
                },
            ],
        },
        {
            name: '',
            type: 'pictorialBar',
            animation: false,
            symbolSize: [200, 45],
            symbolOffset: [-10, 24],
            z: 11,
            data: [
                {
                    name: '',
                    value: datas,
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            color: 'RGBA(62, 140, 218, 1)',
                            // color: 'RGBA(40, 91, 134, 1)',
                            borderColor: '#418DBA',
                        },
                    },
                },
            ],
        },
        // 内部柱子
        {
            type: 'bar',
            // silent: true,
            barWidth: 200,
            // "barGap": "-1100%",

            data: [
                {
                    name: '',
                    value: value,

                    label: {
                        normal: {
                            show: true,
                            // formatter: '{c}',
                            position: 'top',
                            distance: 24,
                            textStyle: {
                                color: '#fff', //柱子对应数值颜色
                                fontSize: 18,
                            },
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                type: 'linear',
                                global: false,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'RGBA(47, 116, 173, 1)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'RGBA(64, 146, 222, 1)', //底部渐变颜色
                                    },
                                ],
                            },
                        },
                    },
                },
            ],
        },

        //往上是内部柱状图
        //往下是外部柱状图

        {
            name: '',
            type: 'pictorialBar',
            animation: false,
            symbolSize: [240, 45],
            symbolOffset: [-10, -20],
            z: 12,
            data: [
                {
                    name: '',
                    value: maxData,

                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            color: 'RGBA(40, 69, 147, .6)',
              borderColor: '#4674BF' //圆柱顶部颜色
                        },
                    },
                },
            ],
        },
        // 红色预警
        {
            name: '',
            type: 'pictorialBar',
            animation: false,
            symbolSize: [240, 45],
            symbolOffset: [-10, 0],
            z: 12,
            data: [
                {
                    name: '',
                    value: redData,

                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            color: '#443349',
                            borderColor: '#F42626',
                            borderWidth: 1,
                        },
                    },
                    label: {
                        show: true,
                        position: 'insideTop',
                        distance: 10, //20%位置
                        rich: {
                            a: {
                                color: '#F42626',
                                fontSize: 14,
                                align: 'left',
                                padding: [0, 0, 0, 270],
                                width: 40,
                                height: 16,
                                lineHeight: 16,
                            },
                        },
                        formatter: (params) => {
                            return '{a|' + '红色预警}';
                        },
                    },
                },
            ],
        },
        // 橙色预警
        {
            name: '',
            type: 'pictorialBar',
            animation: false,
            symbolSize: [240, 45],
            symbolOffset: [-10, 0],
            z: 11,
            data: [
                {
                    name: '',
                    value: orangeData,

                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            color: '#3F4744',
                            borderColor: '#FC9F44',
                            borderWidth: 1,
                        },
                    },
                    label: {
                        show: true,
                        position: 'insideTop',
                        distance: 15, //20%位置
                        rich: {
                            a: {
                                color: '#FC9F44',
                                fontSize: 14,
                                align: 'left',
                                padding: [0, 0, 0, 270],
                                width: 40,
                                height: 16,
                                lineHeight: 16,
                            },
                        },
                        formatter: (params) => {
                            return '{a|' + '橙色预警}';
                        },
                    },
                },
            ],
        },
        // 黄色预警
        {
            name: '',
            type: 'pictorialBar',
            animation: false,
            symbolSize: [240, 45],
            symbolOffset: [-10, 0],
            z: 10,
            data: [
                {
                    name: '',
                    value: yellowData,

                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            color: '#425A45',
                            borderColor: '#FFCD1F',
                            borderWidth: 1,
                        },
                    },
                    label: {
                        show: true,
                        position: 'insideTop',
                        distance: 20, //20%位置
                        rich: {
                            a: {
                                color: '#FFCD1F',
                                fontSize: 14,
                                align: 'left',
                                padding: [0, 0, 0, 270],
                                width: 40,
                                height: 16,
                                lineHeight: 16,
                            },
                        },
                        formatter: (params) => {
                            return '{a|' + '黄色预警}';
                        },
                    },
                },
            ],
        },
        {
            name: '',
            type: 'pictorialBar',
            animation: false,
            symbolSize: [240, 75],
            symbolOffset: [-10, 41],
            z: 12,
            data: [
                {
                    name: '',
                    value: maxData,

                    itemStyle: {
                        normal: {
                            color: 'transparent',
              borderColor: 'rgba(0,255,252,0.4)' //圆柱底部颜色
                        },
                    },
                },
            ],
        },
        //   外部柱子
        {
            type: 'bar',
            silent: true,
            barWidth: 240,
            animation: false,
            barGap: '-110%',
            data: [
                {
                    name: '',
                    value: maxData,

                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                             color: 'RGBA(21, 58, 93, .3)'
                        },
                    },
                },
            ],
        },
    ],
};