echarts 柱形

最新推荐文章于 2024-06-25 15:34:07 发布
最新推荐文章于 2024-06-25 15:34:07 发布
阅读量467 收藏
点赞数
分类专栏： echarts 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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>
echarts 实现形状为圆柱形、三角形的柱状图表
来杯卡布奇诺的博客
05-16 1513
PS：上面柱状图背景是添加了一个柱形图实现的。柱形图 bar 可以通过 backgroundStyle 来实现背景，象形柱图 pictorialBar 没有找到直接设置的方法，有知道可以下面留言。，是一种可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。外观上是一个圆柱形，实际上是由一个柱形图和两个象形柱图拼接而成。这个图实际上就是复习一下上面的象形柱图，也是利用。
echarts 柱形图多个legend值 同一个柱形图分不同颜色展示
红烧咸咸鱼
03-25 1233
echarts 柱形图多个legend值 同一个柱形图分不同颜色展示
Echarts柱状图
03-16 3万+
图1： <template> <div id="chartBar" style="width: 700px; height: 300px"></div> </template> <script> import echarts from "echarts"; export default { data() { return { chartBar: null, category: [
使用Echarts绘制柱状图
qq_52569656的博客
06-25 3020
本文基于React18+Echarts5来实现柱状图表，主要就是记录了一些常见的问题处理方式，希望对你有所帮助吧。
echarts 柱状图 详解与使用集合
2401_84097996的博客
04-06 2759
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。[外链图片转存中…(img-NOms0EC5-1712408489074)][外链图片转存中…(img-FnncgeKm-1712408489075)]
Echarts 柱形图最全详解
热门推荐
PinkCoder
04-15 14万+
Echarts 柱形图
echarts柱形图异步加载(可直接执行).zip
06-03
在本压缩包中，"echarts柱形图异步加载(可直接执行).zip" 提供了一个关于如何使用ECharts实现柱形图异步加载的示例。 首先，我们来看`index.html`文件，这是网页的主入口文件。在HTML中，通常我们会有一个`<div>`...
Echarts 柱形图的图例与X轴标签一致，并自定义每个柱形颜色
m0_49923745的博客
01-19 1651
1首先是柱形图的设计 function chart(data1) { var seriesData = []; //定义颜色 var colorList = ['#8BD0FF', '#A0EBCA', '#F8E0BC', '#FCBBCC', '#B2EDFC', '#C9C4F7', '#A7BBF9', '#FFDBA7', '#E8DEB6', '#BFB0F7'] for (var i = 0; i < data1.length; i++) { ...
vue echarts柱形图动态效果
xn的博客
10-20 885
图例只截取了一点点 <template> <div id="multipleXAxes" :style="{ width: '100%', height: '100%' }"></div> </template> <script> import echarts from "echarts"; export default { name: "hello", data() { return { msg: "We.
echarts柱形图y轴最小刻度
最新发布
01-23
### 如何设置 ECharts 柱形图 Y 轴最小刻度值 为了确保 ECharts 柱形图的 Y 轴具有指定的最小刻度值，可以利用 `minInterval` 参数来实现这一功能[^5]。 具体配置如下所示： ```javascript option = { xAxis: { ...
echarts-折线图与柱状图，图形的标记，堆叠
m0_74019046的博客
05-21 2499
如果要画一个图标就需要在series里加一个对象。data中定义图标的数据。xAxisIndex、yAxisIndex、polarIndex(radiusAxis,angleAxis等) 用来选择使用哪条坐标轴。coordinateSystem 用来选择坐标系是什么坐标系，默认是直角坐标系。id,name用来给图表一个唯一的标识，用于setOption的更新或用id获取图表。
03-echarts如何画立体柱状图
jiuliangliang的博客
04-15 5440
这个方法里面先创建三个形状的空壳子，并注册，如下图，并且注册完成以后在这个方法里面调用构建图表的方法initChart，在初始化页面的时候就不用调用initChart方法了。那么坐标是怎么看的，那么左上角的话就是（0，0），右上角就是（500，0），左下角就是（0，500），右下角就是（500，500），相当于右边是X轴正轴，往下看是Y轴正轴。根据官网提示，需要返回一个type为group的对象，并且将三个面都加到children里面，如下图，P2：【基础X轴坐标点+侧面宽度，顶部Y轴坐标点- 斜角高度】
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
Web_chicken的博客
10-09 5721
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点 先看效果图 我们可以看到图中图表不仅有渐变色，同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来，我们一起来实现一下这个效果 1. HTML部分 <div id="ParkingLotLoadRanking" ref="ParkingLotLoadRanking" style="height:16.875rem;width:25%;"></div> 2. JS部分 // 获取DOM元素 let m
❤echarts柱状图详细配置
林太白
08-24 1万+
❤echarts柱状图使用和配置
echarts 柱状图【立体】
小菜张的博客
04-28 1万+
立体柱状 echarts 柱状图上面显示文字 series: [ { name: 'a', tooltip: { show: false, }, data: this.data, type: 'bar', barWidth: 16, // 柱条的宽度，不设时自适应。 barGap: 200, // 不同系列的柱间距离
ECharts基础柱状图
shaonianmoyou的博客
08-23 9416
。
echarts柱状图 双柱状图基本用法
m0_62285976的博客
06-27 8995
echarts柱状图 双柱状图基本用法
echarts实现3d柱状图的两种方式
weixin_69773376的博客
12-06 1万+
echarts实现3d柱状图效果
echarts 柱状图圆柱_手把手教你用ECharts画柱状图
weixin_42548893的博客
01-26 4830
01 简单的柱状图在ECharts中制作柱状图也十分简单，通过将series中的type设置为bar即可，代码如下：option={xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},series:[{data:[100,150,1...
echarts柱形图animation
12-31
### ECharts 柱形图动画效果实现方法 #### 初始化ECharts实例并设置基础配置项 为了创建带有动画效果的柱形图，首先需要初始化ECharts实例，并指定DOM容器。通过`setOption()`函数来定义图表的具体样式和数据。 ```javascript var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title: { text: '动态加载示例' }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20], animationDuration: 2800, animationEasing: "quadraticOut" }] }); ``` 上述代码展示了如何构建一个简单的柱状图，并为其应用了渐入式的动画效果[^3]。 #### 添加自定义动画属性 对于更复杂的动画需求，可以在`series`对象内增加特定参数来自定义动画行为： - `animation`: 是否开启动画，默认开启。 - `animationThreshold`: 开启动画的数据量阈值，在此数量以上关闭所有图形的过渡动画优化性能表现。 - `animationDuration`: 初始动画持续时间；可以是一个固定的毫秒数或是回调函数返回不同系列的不同数值。 - `animationEasing`: 定义初始动画缓动方式，支持更多种类的选择如线性、弹性等。 - `animationDelay`: 设置延迟执行的时间间隔，同样接受固定值或计算逻辑作为输入。 例如，要让柱体逐渐增长而不是瞬间显示出来，则可以通过调整`animationDuration`以及选择合适的`animationEasing`曲线达成理想的效果。 #### 特殊视觉特效——闪烁效果 如果希望给某些特殊情况下突出显示某根柱条，还可以利用额外插件或者自定义渲染器添加特殊的视觉反馈机制。比如下面的例子实现了当鼠标悬停时触发短暂的闪光提示功能[^2]: ```javascript itemStyle:{ emphasis : { shadowBlur: 10, shadowColor: '#fff', borderWidth: 0, borderColor: '#fff' } } ``` 这里并没有直接使用官方文档提到过的`twinkle`选项而是采用了阴影叠加的方式来模拟类似的视觉感受。实际开发过程中可以根据具体场景灵活运用多种手段组合创造出更加丰富的交互体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值