echarts柱状图案列及效果

客官°小女子只卖身不卖艺 2022-11-18 13:49 90阅读 0赞

# 下面echarts 柱状图 #

首先效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70]  
下面开始堆代码

### 1、先看一下vue中html ###

<template>
    	<view class="content">
    		
    		<view class="describe">
    			<view class="describeL">
    				<view class="circle"></view>
    				<text>投入金额</text>
    				<text>220亿</text>
    			</view>
    			<view class="describeR">
    				<view class="circle"></view>
    				<text>资产规模</text>
    				<text>36545亿</text>
    			</view>
            </view>
    		
    		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="histogram" class="echarts"></view>
    	</view>
    </template>

### 2.javascript里面配置 ###

<script>
    	export default { 
    		props: { 
    			dataListX: { 
    				type: Array,
    				default: () => [],
    			},
    			dataList: { 
    				type: Array,
    				default: () => [],
    			},
    			operationData:{ 
    				type:Object,
    				default:{ } 
    			}
    		},
    		data() { 
    			return { 
    				echartKey:1,
    			}
    		},
    		computed:{ 
    			option(){ 
    				return { 
    					grid: { 
                                x:30,
    							y:10,
    							x2:20,
    							y2:40,
    							left:40,
    							right:12
                               },
    					tooltip: { 
    						trigger: 'axis',
    						axisPointer: {  // 坐标轴指示器，坐标轴触发有效
    							type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
    							shadowStyle: {  // 阴影指示器样式设置
    								width: 'auto', // 阴影大小
    								color: { 
    											type: 'linear',
    											x: 0,
    											y: 0,
    											x2: 0,
    											y2: 1,
    											colorStops: [{ 
    												offset: 0,
    												color: 'rgba(211, 177, 150, 0.5)' // 0% 处的颜色
    											}, { 
    												offset: 1,
    												color: 'rgba(179, 119, 72, 0)' // 100% 处的颜色
    											}],
    											globalCoord: false // 缺省为 false
    									} // 阴影颜色
    							}
    						}
    					},
    					xAxis: { 
    						type: 'category',
    						data: this.dataListX,
    						axisLabel: {  //字体
    							interval: 0,
    							textStyle: { 
    								color: '#B4B6BC'
    							}
    						},
    						axisLine: {  //线条 
    							lineStyle: { 
    								color: '#E4E8ED',
    							}
    						},
    						axisTick: { 
    							show: false
    						}
    					},
    					yAxis: { 
    						type: 'value',
    						scale : true,
    						max : 300,
    						min : 0,
    						splitNumber : 3,
    						boundaryGap : [ 0.2, 0.2 ],
    						//设置网格线颜色
    						 splitLine: { 
                                    show: true,
                                    lineStyle: { 
                                        color: 'rgba(172, 191, 221, .11)',
                                        width: 1,
                                        type: 'solid'
                                    }
                                },
    						axisTick: { 
    							show: false
    						},
    						axisLabel: { 
    							textStyle: { 
    								color: '#E4E8ED'
    							}
    						},
    						axisLine: { 
    							lineStyle: { 
    
    								color: '#FFFFFF',
    							}
    						},
    					},
    					series: [{ 
    							name: '投入金额',
    							type: 'bar',
    							barWidth:8,
    							data: [2, 2, 4, 7, 16, 17, 20, 26, 26, 38, 29, 33],
    							emphasis: { 
    								focus: 'series'
    							},
    							itemStyle: { 
    								normal: { 
    									barBorderRadius: [2, 2, 0, 0],
    									color: { 
    										type: 'linear',
    										x: 0,
    										y: 0,
    										x2: 0,
    										y2: 1,
    										colorStops: [{ 
    											offset: 0,
    											// rgba(210, 153, 86, 0.4)
    											color: '#D29956' // 0% 处的颜色
    										}, { 
    											offset: 1,
    											// rgba(154, 79, 29, 0.1)
    											color: '#9A4F1D' // 100% 处的颜色
    										}],
    										globalCoord: false // 缺省为 false
    									},
    								},
    
    							},
    						},
    						{ 
    							name: '资产规模',
    							type: 'bar',
    							barWidth:8,
    							data: [3114, 3057, 3102, 3082, 3159, 3170, 3105, 3009, 3160, 3146, 2757, 2684],
    							itemStyle: { 
    								normal: { 
    									//设置圆角
    									barBorderRadius: [2, 2, 0, 0],
    									color: { 
    										type: 'linear',
    										x: 0,
    										y: 0,
    										x2: 0,
    										y2: 1,
    										colorStops: [{ 
    											offset: 0,
    											// rgba(210, 153, 86, 1)
    											color: 'rgba(210, 153, 86, .4)' // 0% 处的颜色
    										}, { 
    											offset: 1,
    											// rgba(154, 79, 29, 1)
    											color: 'rgba(154, 79, 29, .4)' // 100% 处的颜色
    										}],
    										globalCoord: false // 缺省为 false
    									}
    								}
    							},
    						}
    					]
    				}
    			}
    		},
    		methods: { 
    		}
    	}
    </script>
    
    <script module="echarts" lang="renderjs">
    	let myChart
    	export default { 
    		name: 'histogram',
    		mounted() { 
    		var timer =	setTimeout(() => { 
    			if (typeof window.echarts === 'function') { 
    				this.initEcharts()
    			} else { 
    				// 动态引入较大类库避免影响页面展示
    				const script = document.createElement('script')
    				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
    				script.src = 'static/echarts.js'
    				script.onload = this.initEcharts.bind(this)
    				document.head.appendChild(script)
    			}
    				clearTimeout(timer)
    			}, 1000);
    			
    		},
    		methods: { 
    			initEcharts() { 
    				myChart = echarts.init(document.getElementById('histogram'))
    				// 观测更新的数据在 view 层可以直接访问到
    				myChart.setOption(this.option)
    			},
    			updateEcharts(newValue, oldValue, ownerInstance, instance) { 
    				// 监听 service 层数据变更
    				if (this.dataList.length > 0) { 
    					myChart.setOption(newValue)
    				}
    			},
    		}
    	}
    </script>

### 3css代码 ###

<style lang="less" scoped> .title{ 
    	font-size: 32rpx;
    	font-family: PingFangSC-Semibold, PingFang SC;
    	font-weight: 600;
    	color: #2E313C;
    	padding: 0rpx 30rpx;
    	margin-top: 42rpx;
    }
    .wrapper{ padding: 0rpx 30rpx 80rpx;margin-top: 20rpx; .content{ 
            height: 450rpx;
    		background: #FFFFFF;
    		box-shadow: 0px 6px 18px 0px rgba(70, 66, 61, 0.1);
    		border-radius: 12rpx;
    		border: 1px solid rgba(220, 218, 213, .2);
    	}
    }
    </style>

↓↓↓ 个人写的一个公众号，还在完善中 ，欢迎加入↓↓↓ | ᴥ•́ )✧ ↓↓↓

![在这里插入图片描述][0661f432b17d43ec9e943314b3004af1.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70]: /images/20221022/3454146de5c84587ae7f597f0fac82f0.png
[0661f432b17d43ec9e943314b3004af1.jpg_pic_center]: /images/20221022/6833e850cff145448dc73957d724353d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，90人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts 实现电池效果的柱状图

![在这里插入图片描述][198b80c65c724e61a9b1ac41f8ca946e.png_pic_center] 第022个 [点击查看专栏目录][Link 1]

浅浅的花香味﹌/ 2024年03月26日 14:55/ 0 赞/ 65 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 314 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 658 阅读

相关 echarts柱状图案列及效果

下面echarts 柱状图首先效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

客官°小女子只卖身不卖艺/ 2022年11月18日 13:49/ 0 赞/ 91 阅读

相关 Echarts 柱状图及折线图

效果 ![柱状及折线图表][20210228203149221.png] 功能 1. 防止悬浮框溢出 2. 图例图标宽高度修改 3. 柱状图之间间距设置 4

Dear 丶/ 2022年11月03日 15:24/ 0 赞/ 255 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 381 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 339 阅读

相关 echarts柱状统计图

目录一、简单的echarts柱状统计图二、柱状图和折线图混搭三、一个项目里同时用不同版本的echarts画图 -------------------- 一、

àì夳堔傛蜴生んèń/ 2022年01月30日 15:13/ 0 赞/ 750 阅读

相关 ECharts之柱状图

效果图 ![在这里插入图片描述][20190725104919483.gif] 背景图片 ![20190725170845879.png][] 下载EChar

旧城等待，/ 2021年09月29日 22:48/ 0 赞/ 849 阅读

相关 echarts 柱状图(带柱平移动画、进度条效果柱状)、折线图(曲线图)

柱状图: 1、x轴和y轴设置: 水平方向柱状图:x轴和y轴内容互换 xAxis:{ type

我不是女神ヾ/ 2021年07月24日 11:27/ 0 赞/ 3937 阅读