echarts 3D柱状图

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
        -->

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;



var xList = ['2014', '2015', '2016', '2017', '2018', '2019', '2020'];
var bottomList = [1, 1, 1, 1, 1, 1, 1];
var typeOneList = [10, 50, 100, 35, 55, 30, 20]; //上衣
var typeTwoList = [15, 25, 90, 40, 26, 30, 20]; //裤子
var standardValues = [40, 85, 230, 95, 100, 60, 50]; // 标准

var HighestList = [];
var topList = [];
for (let i = 0; i < typeOneList.length; i++) {
    HighestList.push(typeOneList[i] + typeTwoList[i]);
}
for (let i = 0; i < typeOneList.length; i++) {
    topList.push(typeOneList[i]);
}

option = {
    backgroundColor: '#000E1A', //背景色
    tooltip: {
        trigger: 'axis',
        borderColor: 'rgba(255,255,255,.3)',
        backgroundColor: 'rgba(13,5,30,.6)',
        textStyle: {
            color: 'white', //设置文字颜色
        },
        borderWidth: 1,
        padding: 5,
        formatter: function (parms) {
            var str =
                '年份:' +
                parms[0].axisValue +
                '</br>' +
                parms[0].marker +
                '上衣:' +
                parms[0].value +
                '</br>' +
                parms[1].marker +
                '裤子:' +
                parms[1].value +
                '</br>' +
                parms[2].marker +
                '标椎:' +
                parms[2].value;
            return str;
        },
    },
    textStyle: {
        color: '#C9C9C9',
    },

    // color: ['#fbc292', '#06fbfe',  '#f06e91'],
    legend: {
        type: 'scroll',
        orient: 'vertical',
        selectedMode: false, //图例点击失效
        right: '10%',
        top: '15%',
        textStyle: {
            color: '#ffffff',
            fontSize: 25,
        },

    },
    grid: {
        containLabel: true,
        left: '10%',
        top: '20%',
        bottom: '10%',
        right: '10%',
    },
    xAxis: {
        type: 'category',
        data: xList,
        axisLine: {
            show: false,
            lineStyle: {
                color: '#B5B5B5',
            },
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            margin: 20, //刻度标签与轴线之间的距离。
            textStyle: {
                fontFamily: 'Microsoft YaHei',
                color: '#FFF',
            },
            fontSize: 25,
            fontStyle: 'bold',
        },
    },
    yAxis: [
        {
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#B5B5B5',
                },
            },
            splitLine: {
                show: false,
                // lineStyle: {
                //     // 使用深浅的间隔色
                //     color: ["#B5B5B5"],
                //     type: "dashed",
                //     opacity: 0.5,
                // },
            },
            axisLabel: {
                show: false,
                textStyle: {
                    fontFamily: 'Microsoft YaHei',
                    color: '#FFF',
                },
                fontSize: 20,
            },
        },
        {
            show: false,
            type: 'value',
        },
    ],
    series: [
        {
            type: 'bar',
            name: '上衣',
            type: 'bar',
            data: typeOneList,
            stack: 'zs',
            barMaxWidth: 'auto',
            barWidth: 60,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: 'linear',
                    global: false,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#017ebb',
                        },
                        {
                            offset: 1,
                            color: '#06fbfe',
                        },
                    ],
                },
            },
        },

        {
            name: '裤子',
            type: 'bar',
            data: typeTwoList,
            stack: 'zs',
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 60,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: 'linear',
                    global: false,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#fbc292',
                        },
                        {
                            offset: 1,
                            color: '#f06e91',
                        },
                    ],
                },
            },
        },
        {
            name: '标准',
            type: 'line',
            data: standardValues,
            smooth: true,
            symbol: 'none',
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(255, 227, 168, 0)',
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(255, 227, 168, 1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(255, 227, 168, 0)',
                            },
                        ]),
                        shadowColor: 'rgba(255, 120, 0,1)',
                        shadowBlur: 8,
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(197, 106, 255, 0.6)',
                            },
                            {
                                offset: 0.6,
                                color: 'rgba(255, 120, 0, 0)',
                            },
                        ]),
                    },
                },
            },
        },

        {
            data: bottomList, // 最小面平面
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbol: 'diamond',
            symbolOffset: [0, '50%'],
            symbolSize: [60, 20],
            zlevel: 2,
            itemStyle: {
                normal: {
                    color: '#06fbfe',
                },
            },
        },
        {
            data: topList, // 第一个和第二个之间平面
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [60, 20],
            zlevel: 2,
            itemStyle: {
                normal: {
                    color: '#06fbfe',
                },
            },
        },
        {
            data: HighestList, // 最上方平面
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [60, 20],
            zlevel: 2,
            itemStyle: {
                normal: {
                    color: '#fbc292',
                },
            },
        },
    ],
};


if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>

echarts 3D柱状图

 

上一篇:el-table反复报错:ResizeObserver loop limit exceeded 解决办法


下一篇:keil错误 FATAL ERROR L250: CODE SIZE LIMIT IN RESTRICTED VERSION EXCEEDED 全部解决方法