echarts 立体柱状图

最新推荐文章于 2024-07-02 10:45:19 发布
最新推荐文章于 2024-07-02 10:45:19 发布
阅读量698 收藏 7
点赞数 2
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47133092/article/details/128114237
版权 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
    <style>
        #main {
            width: 608px;
            height: 326px;
            background-color: #0d1934;
        }
    </style>
</head>

<body>
    <div id="main"></div>
</body>
<script>
    // 每小时装箱数   每小时压合数   每小时贴标数
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    var xData2 = ["容城谷庄", "雄县七间房", "安新三台", "雄县张岗", "安新寨里", "安新三台", "雄县张岗", "安新寨里"];
    var data1 = [200, 100, 200, 200, 100, 200, 200, 100];
    var data2 = [300, 200, 300, 300, 400, 300, 300, 400];
    option = {
        tooltip: {
            trigger: 'item',
        },
        grid: {
            // left: 100,
            // bottom: 100
        },
        xAxis: {
            data: xData2,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#fff',
                    fontSize: 10,
                },
                margin: 20, //刻度标签与轴线之间的距离。
            },

        },
        yAxis: {
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: 10,
                },
            }
        },
        series: [{ //三个最低下的圆片
                "name": "",
                "type": "pictorialBar",
                "symbolSize": [25, 10],
                "symbolOffset": [0, 5],
                "z": 12,
                itemStyle: {
                    opacity: 1,
                    color: function(params) {
                        var a = params.name.slice(0, 2);
                        if (a === '容城') {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FF9A22' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#FFD56E' // 100% 处的颜色
                            }], false)
                        } else if (a === '雄县' || a === '雄州') {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00EC28' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#5DF076' // 100% 处的颜色
                            }], false)
                        } else if (a === '安新') {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#12B9DB' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#6F8EF2' // 100% 处的颜色
                            }], false)
                        }
                    }
                },
                "data": [1, 1, 1, 1, 1, 1, 1, 1]
            },


            //下半截柱状图
            {
                name: '2020',
                type: 'bar',
                barWidth: 25,
                barGap: '-100%',
                itemStyle: { //lenged文本
                    opacity: .7,
                    color: function(params) {
                        var a = params.name.slice(0, 2);
                        if (a === '容城') {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FF9A22' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#FFD56E' // 100% 处的颜色
                            }], false)
                        } else if (a === '雄县' || a === '雄州') {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00EC28' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#5DF076' // 100% 处的颜色
                            }], false)
                        } else if (a === '安新') {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#12B9DB' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#6F8EF2' // 100% 处的颜色
                            }], false)
                        }
                    }
                },

                data: data1
            },

            { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
                type: 'bar',
                barWidth: 25,
                barGap: '-100%',
                stack: '广告',
                itemStyle: {
                    color: 'transparent'
                },
                data: data1
            },

            {
                "name": "", //头部
                "type": "pictorialBar",
                "symbolSize": [25, 10],
                "symbolOffset": [0, -5],
                "z": 12,
                "symbolPosition": "end",
                itemStyle: {
                    color: '#163F7A',
                    opacity: 1,
                },
                "data": data2
            },

            {
                "name": "",
                "type": "pictorialBar",
                "symbolSize": [25, 10],
                "symbolOffset": [0, -5],
                "z": 12,
                itemStyle: {
                    opacity: 1,
                    color: function(params) {
                        var a = params.name.slice(0, 2);
                        if (a === '容城') {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FF9A22' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#FFD56E' // 100% 处的颜色
                            }], false)
                        } else if (a === '雄县' || a === '雄州') {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00EC28' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#5DF076' // 100% 处的颜色
                            }], false)
                        } else if (a === '安新') {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#12B9DB' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#6F8EF2' // 100% 处的颜色
                            }], false)
                        }
                    }
                },
                "symbolPosition": "end",
                "data": data1
            },

            {
                name: '2019',
                type: 'bar',
                barWidth: 25,
                barGap: '-100%',
                z: 0,
                itemStyle: {
                    color: '#163F7A',
                    opacity: .7,
                },

                data: data2
            }


        ]
    };
    option && myChart.setOption(option);
</script>

</html>

 

城永
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
04-echarts-立体柱状图扩展
jiuliangliang的博客
06-18 430
echarts立体柱状图扩展
Echarts立体柱状图
Summer_JK的博客
11-07 1万+
echarts绘制漂亮的立体柱状图（超详细） 为了做一个漂亮的立体柱状图，几乎吧echarts所有的柱状图都看了一遍，一遍遍的改，终于绘制出我想要的效果，下面是代码： HTML： <div class="content bgBox"> <div class="firstTitle"> <p class="titleName">购买力最强</p> </div> <div id="buyTop" style="width: 100%;h
echarts - 自定义形状 - 实现立体柱状图
qq_35432583的博客
05-13 4229
如果需要复杂的图表样式，echarts 自带的 series 类型无法满足，那么就可以使用 custom 类型，这时就需要通过 canvas 手动绘制图表的形状了。
echarts的图表立体感——实现立体柱状图和立体饼图的详细教程
杜永康的博客
11-01 1万+
准备HTML结构和容器，用于容纳图表的展示。初始化Echarts实例，并将之前创建的容器关联起来。配置图表所需的数据，包括x轴和对应的柱状图的高度值（对于立体柱状图）或每个扇区的名称和对应的数值（对于立体饼图）。配置图表的选项，包括样式、颜色和其他属性。渲染图表并呈现在页面中，通过调用Echarts实例的setOption方法将之前配置好的选项应用到图表中，并通过调用Echarts实例的render方法将图表渲染出来。
echarts实现3D柱状图(视觉层面)
最新发布
qq_44624290的博客
07-02 826
文章知识点与官方知识档案匹配，可进一步学习相关知识。完整实例，copy就可直接使用。完整实例，copy就可直接使用。完整实例，copy就可直接使用。完整实例，copy就可直接使用。完整实例，copy就可直接使用。42665 人正在系统学习中。
echarts 柱状图【立体】
小菜张的博客
04-28 1万+
立体柱状 echarts 柱状图上面显示文字 series: [ { name: 'a', tooltip: { show: false, }, data: this.data, type: 'bar', barWidth: 16, // 柱条的宽度，不设时自适应。 barGap: 200, // 不同系列的柱间距离
echarts立体柱状图
MISS_CJL的博客
12-10 3097
效果图： 安装echarts npm install echarts --save main.js import Vue from 'vue' import App from './App' import echarts from 'echarts' Vue.prototype.$echarts = echarts Vue.use(Element) Vue.config.productionTip = false new Vue({ el: '#app', comp..
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
echarts实现立体柱状图
qq_43651168的博客
08-04 1398
echarts实现立体柱状图。
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10...
Echarts实现柱状图效果
07-07
该文件内包含图表类型：基础柱状图、条纹柱状图、带背景条纹柱状图、堆叠柱状图、横向柱状图、双向柱状图、冰山图、立体柱状图
echarts堆叠柱状图(顶端圆角）.rar
07-30
echarts实现堆叠柱状图(顶端圆角），并统计总数，自定义柱体颜色
echarts 实现圆柱体图形.zip
05-14
在数据分析和可视化领域，ECharts 是一款非常流行的开源 JavaScript 图表库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等。在实际应用中，有时我们需要为图表添加更多的视觉效果，比如将普通的柱状图转化为...
通过Echarts怎样实现立体柱状图
weixin_55123102的博客
02-22 6284
大家好，我是梁木由。之前在做大屏可视化项目时，UI设计了一个立体形状的柱状图，根据之前做的一些图表的项目没有能复用的，没有做过这种立体形状的图表，打开echarts也没看到有相关的demo，看下如何实现`
echarts 实现立体柱状图
热门推荐
liumengyue的博客
07-27 2万+
<div class="dayFluxDetail" id="mainCahrts" style=" width: 100%; height: 8.5rem;"></div> // 配置项 // mainCahrts // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('mainCahrts')); const data = [220
echarts绘制立体柱状图
weixin_43412413的博客
12-26 7041
效果图： <template> <div class="app_rank"> <div id="echart_box"></div> </div> </template> <script> export default { name: 'carRank', components: ...
ECharts之3D立体柱状图一
aaa123aaasqw的博客
04-20 986
在 main.js 文件里引入并注册 ( 这里是。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值