echarts柱状图案列及效果

下面echarts 柱状图

首先效果图

下面开始堆代码

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>

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