echarts 柱形

最新推荐文章于 2024-04-06 21:02:16 发布
最新推荐文章于 2024-04-06 21:02:16 发布
阅读量423 收藏
点赞数
分类专栏： echarts 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songqiu821/article/details/121675665
版权

在这里插入图片描述

上图是最终实现的效果，话不多说，直接上代码记录下

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>渐变柱状</title>
		<!-- 引入 echarts.js -->
		<script src="./js/echarts4.60.min.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>
    <style>
        body{
            background-color: #00062E;
        }
    </style>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var data =  [50, 200, 400, 600];
            var sum = 0;
            for(var i = 0;i < data.length;i++){
                sum += data[i];
            }
           // 指定图表的配置项和数据
			myChart.setOption({
				title: {
					// text: '柱状图渐变'
				},
				tooltip: {},
				legend: {
					// data: ['销量']
				},
				xAxis: {
                    data: ["上年同期", "本年计划", "本年实际"],
                    axisTick: {
                        alignWithLabel: true,
                        show: false // 纵轴
                    },
                    axisLine: { // 横轴
                        show: true,
                        lineStyle: {
                            color:'#212A51'
                        }
                    }, 
                    axisLabel: {
                        textStyle: {
                            show:true,
                            fontFamily:'微软雅黑',
                            color: "#fff",
                            fontSize: '14',
                        },                           
                    }
				},
				yAxis: {
                   
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color:["#20294F"],
                            width:2.5,
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            show:true,
                            fontFamily:'微软雅黑',
                            color: "#fff",
                            fontSize: '12',
                        },                           
                    },
                    axisTick: {
                        alignWithLabel: false,
                        show: false 
                    },
                    axisLine: {
                        show: false
                    },
                },
				series: [{
					// name: '销量',
                    type: 'bar',
                    barWidth:20,
  	                barGap:'80%',/*多个并排柱子设置柱子之间的间距*/
  	                barCategoryGap:'50%',/*多个并排柱子设置柱子之间的间距*/
					itemStyle: {
						normal: {    
                            barBorderRadius:[15, 15, 0, 0],柱形图圆角，初始化效果
                            width:5,
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: '#FFCA4A',
                                    fontSize: 12
                                },
                                distance:20,
                                formatter: function(params) {//核心部分 formatter 可以为字符串也可以是回调 
                        　　　　　　if(params.value){//如果当前值存在则拼接
                        　　　　　　　　return params.value + '万元' 
                        　　　　　　}else{//否则返回个空
                        　　　　　　　　return '';
                        　　　　　　}
                        　　　　},
                            },
                            color: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                                    type: 'linear',
                                    x: 0,
                                    y: 1,
                                    x2: 0, //从左到右 0-1
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#FFCA4A" // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.2,
                                            color: "#FFCA4A" // 60% 处的颜色
                                        }, 
                                        {
                                            offset: 0.4,
                                            color: "#FFCA4A" // 60% 处的颜色
                                        }, 
                                        {
                                            offset: 0.6,
                                            color: "#FFCA4A" // 60% 处的颜色
                                        },
                                        {
                                            offset: 0.8,
                                            color: "#88DDA2" // 60% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#30EBE2" // 100% 处的颜色
                                        }
                                    ],
                                },
							// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            //     {
                            //         offset: 0,
                            //         color: "#FFCA4A" // 0% 处的颜色
                            //     },
                            //     {
                            //         offset: 0.2,
                            //         color: "#FFCA4A" // 60% 处的颜色
                            //     }, 
                            //     {
                            //         offset: 0.4,
                            //         color: "#FFCA4A" // 60% 处的颜色
                            //     }, 
                            //     {
                            //         offset: 0.6,
                            //         color: "#FFCA4A" // 60% 处的颜色
                            //     },
                            //     {
                            //         offset: 0.8,
                            //         color: "#88DDA2" // 60% 处的颜色
                            //     },
                            //     {
                            //         offset: 1,
                            //         color: "#30EBE2" // 100% 处的颜色
                            //     }
                            // ], false)
                        }, 
                    },
                    data: data,
                    markPoint: {
                        symbol:'arrow',
                        // symbol:'image://http://echarts.baidu.com/images/favicon.png',
                        itemStyle:{
                            normal:{
                                label:{
                                    show:true,
                                    color:'#fff',
                                },
                                color:'#00F5F0',
                            }
                        },
                        symbolSize:[8, 8],
                        symbolOffset:[0,-10],
                        data:[
                            {name:'上年同期',coord:[0,50]},
                            {name:'本年计划',coord:[1,200]},
                            {name:'本年实际',coord:[2,400]},
                        ],
                    },
                    markLine : {
                        data : [
                            {
                                yAxis: 400,
                                name: '标杆水平',
                                lineStyle: {
                                    type: 'solid',
                                    color: '#C14833'
                                },
                                label:{
                                    show:true,
                                    position:'end',
                                    // formatter:"平均值 : "+sum/data.length,
                                    formatter:"标杆水平",
                                }
                            },
                            // {
                            // yAxis: 100,
                            // name: '上限',
                            // lineStyle: {
                            //     type: 'dashed',
                            //     color: '#b17063'
                            // },
                        　    {
                                type :'average', 
                                name: '平均值',
                                label:{
                                    show:true,
                                    position:'end',
                                    // formatter:"平均值 : "+sum/data.length,
                                    formatter:"平均水平",
                                }
                            },
                    　  ],
                        symbol: ['none', 'none'],
                        position:"insideTopCenter",
                        itemStyle:{
                            normal:{
                                lineStyle:{
                                    type:'solid',
                                    color:'#CCA607'
                                },
                                // label:{
                                //     sh   ow:true,
                                //     position:'end',
                                //     // formatter:"平均值 : "+sum/data.length,
                                //     // formatter:"平均水平",
                                // }
                            }
                        },
                        large:true,
                        effect:{
                            show: false,
                            loop: true,
                            period: 0,
                            scaleSize : 2,
                            color : null,
                            shadowColor : null,
                            shadowBlur : null
                        },
                    },         
                    // markLine: {
                    //     data: [
                    //         {type: 'average', name: '平均值'}
                    //     ]
                    // } 
				}]
			});
		</script>
	</body>
</html>
小宋子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts柱形图异步加载(可直接执行).zip
06-03
在本压缩包中，"echarts柱形图异步加载(可直接执行).zip" 提供了一个关于如何使用ECharts实现柱形图异步加载的示例。 首先，我们来看`index.html`文件，这是网页的主入口文件。在HTML中，通常我们会有一个`<div>`...
Echarts柱状图
03-16 2万+
图1： <template> <div id="chartBar" style="width: 700px; height: 300px"></div> </template> <script> import echarts from "echarts"; export default { data() { return { chartBar: null, category: [
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
Web_chicken的博客
10-09 5206
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点 先看效果图 我们可以看到图中图表不仅有渐变色，同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来，我们一起来实现一下这个效果 1. HTML部分 <div id="ParkingLotLoadRanking" ref="ParkingLotLoadRanking" style="height:16.875rem;width:25%;"></div> 2. JS部分 // 获取DOM元素 let m
Echarts 柱形图最全详解
热门推荐
PinkCoder
04-15 14万+
Echarts 柱形图
ECharts柱状图
萤烛末光,增辉日月
08-26 1699
了解和使用ECharts柱状图，包括基础设置，双柱图，堆叠柱状图，动态排序柱状图，瀑布图等。
echarts 柱状图 详解与使用集合
最新发布
2401_84097996的博客
04-06 2251
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。[外链图片转存中…(img-NOms0EC5-1712408489074)][外链图片转存中…(img-FnncgeKm-1712408489075)]
echarts数据分页
09-27
在数据分析和可视化领域，ECharts 是一款非常流行的开源 JavaScript 图表库，由百度开发并维护。它提供了丰富的图表类型，包括柱状图、折线图、饼图等，且具有高度自定义和交互性，广泛应用于Web应用中。然而，当...
JS 使用 ECharts 实现柱形图
08-14
在本文中，我们将深入探讨如何使用ECharts在JavaScript中实现柱形图。 首先，确保你已经正确引入了ECharts库。你可以通过CDN（内容分发网络）链接或下载ECharts库到本地项目中。通常，引入ECharts的方式是在HTML...
echarts图表柱状图折线图动态轮播tooltip窗
08-12
引入该包，在 myChart.setOption(option)注册表后，调用该方法 tools.loopShowTooltip(myChart, option, { loopSeries: true }) 注：myChart为echarts实例，option为该表配置。配置中必须要有tooltip的配置才可生效
炫光特效，模拟迁徙效果的echarts
12-13
ECharts 是一个基于 JavaScript 的数据可视化库，广泛用于创建交互式的图表和图形。在这个特定的资源中，我们关注的是如何利用 ECharts 实现炫光特效和模拟迁徙效果。ECharts 最新版本虽然可能增加了复杂性，但这个...
ECharts: 绘制立体柱状图【圆柱体】
m0_58293192的博客
01-10 9273
ECharts: 绘制立体柱状图【圆柱体】
echarts 柱状图【立体】
小菜张的博客
04-28 1万+
立体柱状 echarts 柱状图上面显示文字 series: [ { name: 'a', tooltip: { show: false, }, data: this.data, type: 'bar', barWidth: 16, // 柱条的宽度，不设时自适应。 barGap: 200, // 不同系列的柱间距离
1947-2020 NBA总冠军次数排行榜
大数据
01-18 2387
导读：你的主队排第几？关注数据叔视频号，看更多好玩视频????划重点????干货直达????人工智能三大关键能力，终于有人讲明白了数据缺失值的3种处理方式，终于有人讲明白了5G时代不可或...
ECharts基础柱状图
shaonianmoyou的博客
08-23 9275
。
ECharts常用图表（柱状图）
qq_41891425的博客
11-06 9971
7大图表 柱状图 描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以以清晰的看出每个分类数据的排名情况。 图表1：柱状图 实现步骤 ECharts最基本的代码结构： 引入js文件，DOM容器，初始化对象，设置option X轴数据： 数组1：[‘张三’，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’] Y轴数据： 数组2：[88,92,63,77,94,80,72,86] 图表类型 在series设置type:bar //bar是柱状图，line是线状，pie
echarts画出特殊形状的柱状图
谎言三叶草
04-25 7457
通常echarts画出的柱状图都是矩形，怎样用echarts画出特殊形状的柱状图呢？例如：代码配置参数如下：option = {    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis: {        type: 'val...
vue3 echarts绘制柱状图，三角形的柱子，每个柱子不一样的颜色且渐变
qq_44035882的博客
07-27 3118
vue3 echarts绘制柱状图，三角形的柱子，每个柱子不一样的颜色且渐变
echarts柱状图集合
qq_45230033的博客
11-08 757
菱形头部带背景柱状图、横向柱状图标题文字超出长度换行、柱状带区域折线图，图表横向自动滚动实现
echarts柱状图 双柱状图基本用法
m0_62285976的博客
06-27 8554
echarts柱状图 双柱状图基本用法
echarts柱形图
09-10
Echarts柱形图是百度针对数据报表展现的一个产品。它具有丰富的属性和API，可以通过官方网站[Echarts官网](https://echarts.apache.org/)了解详细教程和API。要实现柱状图，需要先定义x轴和y轴的数据，然后在series...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值