echarts5.4立体柱状图

最新推荐文章于 2024-04-15 15:37:18 发布
十二月未完
最新推荐文章于 2024-04-15 15:37:18 发布
阅读量481
点赞数 1
文章标签： echarts 前端 javascript
本文链接：https://blog.csdn.net/lctmei/article/details/128302804
版权
资源下载：https://www.jsdelivr.com/package/npm/echarts
效果图：
借鉴资源：echarts 如何绘制三维 3D 立体柱状图 - 简书
代码示例：
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 500px; height:300px;background-color:#7caeeb;border-radius:20px;padding-top: 10px  "></div>
<!-- ECharts单文件引入 -->
<script src="./echarts5.4.1.min.js"></script>
<script type="text/javascript">
    // 渲染平台资源数量统计图表
    renderStatisticsPlatform()
   function  renderStatisticsPlatform(){
       var myChart = echarts.init(document.getElementById("main"));
       var leftColor="#c7deeb";  //柱形左侧颜色
       var rightTopColor="#fefeff";//柱形右侧和顶部颜色
       var statisticsplatformData = [
            ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], //横坐标
            [500, 2000, 4000, 1014, 6540, 250] //纵坐标
       ];
       myChart.setOption({
           title: {
               text: 'IT人的工作指南',
               //subtext: 'Example in MetricsG',
               left: 'center',
               textStyle: {
                   fontSize: 20 ,// 让字体变大
                   fontFamily:'MicrosoftYaHei-Bold, MicrosoftYaHei',
                   fontWeight:'bold',
                   color:'#FFFFFF'
               }
           },
            tooltip: {
                trigger: "item"
            },
            grid: {
                top: "15%",
                left: "8%",
                right: "12%",
                bottom: "15%",
                containLabel: true
            },
            xAxis: {
                type : 'category',
                data: statisticsplatformData[0],
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    symbol: ['none'],
                    symbolSize: [10, 17],
                    lineStyle: {
                        color: '#FFF',
                        //width: 0, //  改变坐标线的宽，使其不展现
                    },
                },
                offset:8,
                axisLabel: {
                    //调整x轴的lable
                    textStyle: {
                        fontSize: 11 ,// 让字体变大
                        fontFamily:'MicrosoftYaHei-Bold, MicrosoftYaHei',
                        fontWeight:'bold',
                        color:'#FFFFFF'
                    }
                }
            },
            yAxis: {
                splitLine: {    //刻度线
                    show: false,
                },
                splitArea:{     //柱状图后面的背景色
                    show:false,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    color: '#ffffff',
                    fontSize: 12 // 字体大小
                },
                axisLine: {
                    symbol: ['none'],
                    symbolSize: [15, 17],
                    lineStyle: {
                        color: 'rgba(0 0 0 0)',
                        width: 0 //  改变坐标线的颜色
                    }
                }
            },
            axisPointer: {
                show: false,
                link: {xAxisIndex: 'all'},
                type: 'shadow' ,
                label: {
                    backgroundColor: '#777'
                }
            },
            series: [
                {
                    name: "资源数量统计",
                    type: "bar",
                    showSymbol: false,
                    hoverAnimation: false,
                    data: statisticsplatformData[1],
                    barWidth: 10, //柱图宽度
                    itemStyle: { //左面
                        normal: {
                            color:function(params) {
                                let colorList = [leftColor];
                                return colorList[0];
                            },
                            barBorderRadius:[4,0,0,100],
                        }
                    }
                },{
                    name:'资源数量统计',
                    tooltip:{
                        show:true
                    },
                    type: 'bar',
                    barWidth:10,
                    itemStyle:{       //右面
                        normal:{
                            color:function(params) {
                                let colorList = [rightTopColor];
                                return colorList[0];
                            },
                            borderWidth:0.1,
                            barBorderRadius:[0,5,100,0]
                        }
                    },
                    data: statisticsplatformData[1],
                    barGap:0
                },{
                    name:'b',
                    tooltip:{
                        show:false
                    },
                    type: 'pictorialBar',
                    itemStyle: {  //顶部
                        normal: {
                            color:function(params) {
                                let colorList = [rightTopColor];
                                return colorList[0];
                            },
                            borderColor:'#000',
                            borderWidth:0.1,
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color :'#FFFFFF',
                                    fontSize: 14,
                                    fontFamily:'微软雅黑',
                                },
                                offset:[0,-2]
                            }
                        }
                    },
                    symbol: 'diamond',
                    symbolSize: ['20.5','13'],
                    symbolOffset:[0,'-38%'],
                    symbolPosition: 'end',
                    data: statisticsplatformData[1],
                    z:3
                },{
                    name:'d',
                    tooltip:{
                        show:false
                    },
                    type: 'pictorialBar',
                    itemStyle: {  //底部
                        normal: {
                            color:function(params) {
                                let colorList = [rightTopColor];
                                return colorList[0];
                            },
                            borderColor:'#000',
                            borderWidth:0.1,
                            label: {
                                show: false, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color :'#FFFFFF',
                                    fontSize: 14,
                                    fontFamily:'微软雅黑',
                                },
                                offset:[0,-2]
                            }
                        }
                    },
                    symbol: 'diamond',
                    symbolSize: ['20.5','17'],
                    symbolOffset:[0,'2.5'],
                    symbolPosition: 'start',
                    data: statisticsplatformData[1],
                    z:0
                }
            ]
        })
    }
</script>


</body>