Vue渐变圆边柱状图

最新推荐文章于 2023-12-21 07:54:10 发布

原创最新推荐文章于 2023-12-21 07:54:10 发布 · 548 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #echarts #javascript

Vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

Echarts

4 篇文章

订阅专栏

文章展示了如何在Vue项目中通过Echarts库创建一个具有渐变圆边效果的柱状图。代码示例包括模板、脚本部分，详细配置了图表的样式，如颜色渐变、边角圆润等。

通过引入Echarts来实现渐变圆边柱状图效果，话不多说直接上样式代码！

实现效果：

代码：

<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import * as echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'

	const animationDuration = 6000

	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '320px'
			}
		},
		data() {
			return {
				chart: null
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart()
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			initChart() {
				this.chart = echarts.init(this.$el, 'macarons')

				this.chart.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						top: '5%',
						left: '5%',
						right: '3%',
						bottom: '5%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['1号实验室', '2号实验室', '3号实验室', '4号实验室', '5号实验室', '6号实验室'],
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#000000',
							}
						},
					}],
					yAxis: [{
						type: 'value',
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#000000',
							}
						},
					}],
					series: [{
						name: '当前平均湿度(%RH):',
						type: 'bar',
						stack: 'vistors',
						barWidth: '20%',
						itemStyle: {
							//柱形图圆角，初始化效果
							borderRadius: [15, 15, 15, 15],
							color: new echarts.graphic.LinearGradient(
								0, 1, 0, 0, [{ //只要修改前四个参数就ok
										offset: 0,
										color: '#45d0cb'
									}, //柱图渐变色
									{
										offset: 1,
										color: '#1d8ff0'
									}
								]
							),
						},
						data: [69, 52, 20, 34, 62, 33],
						animationDuration
					}]
				})
			}
		}
	}
</script>