2020-08-26

最新推荐文章于 2024-09-14 08:09:14 发布

学游泳的飞鱼

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量145

点赞数

文章标签： jquery html vue.js

本文链接：https://blog.csdn.net/qq_45140055/article/details/108243141

版权

自定义echarts横向条形图

在这里插入图片描述

                                        这里是实际的效果图

<html>
//这里是html页面，只有一个画布，和一些引用文件
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" />
		<link rel="stylesheet" href="./css/series/mybar.css" />
		<link rel="stylesheet" href="./css/base.css" />
		<script src="./js/echarts.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="main"></div>
		</div>
		<script type="text/javascript" src="./js/vue.js"></script>
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
		<script src="./js/series/mybar.js"></script>
	</body>
</html>

//在vue中使用的时候，注意对画布的操作要写在methods中，然后在mounted()挂载，而不是在created()进行初始化。具体的样式属性可以去Echarts官方文档查找。https://echarts.apache.org/zh/index.html
const _vue=new Vue({
	el:"#app",
	data:{
		yAxisData:['安阳学院', '驻马店学院', '平顶山学院', '新乡学院', '郑州学院'],
		seriesOne:[182, 234, 290, 104, 131],
		seriesTwo:[193, 234, 310, 121, 134],
		seriesThree:[169, 133, 230, 161, 136]
		
		
	},
	methods:{
		showEcharts(){
			var myChart = echarts.init(document.getElementById('main'));
			
			option = {
				title: {
					text: '近三十天院校数据（开发)',
					textStyle: {
						color: '#335ec3',
						fontSize: 14
					},
					top: 40
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {
					textStyle: {
						color: '#ffffff'
					},
					data: [{
							name: '大一',
							icon: 'rect',
							textStyle: {
								color: '#ffffff'
							}
						},
						{
							name: '大二',
							icon: 'rect',
							textStyle: {
								color: '#ffffff'
							}
						},
						{
							name: '大三',
							icon: 'rect',
							textStyle: {
								color: '#ffffff'
							}
						}
					],
					icon: 'rect',
					selected: {
						'大二': false,
						'大三': false
					},
					selectedMode: 'single',
					left: 200,
					top: 40
			
				},
				grid: {
					y: 80,
					y2: 30,
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
					width: 400
				},
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.02],
					splitLine: {
						show: false
					},
					max: 400,
			
					//横轴的样式
					axisLine: {
						show:false,
						lineStyle: {
							color: "#bfbfbf"
						}
					}
					/* 网格样式
						splitLine:{
							show:true,
							lineStyle:{
								color:['#262732'],
								width:1,
								type:'solid'
							}
						} */
			
				},
				yAxis: {
					type: 'category',
					data:this.yAxisData ,
					splitLine: {
						show: false
					},
					axisLine: {
						show:false,
						lineStyle: {
							color: "#bfbfbf"
						}
					}
					/* 网格样式
					 splitLine:{
					  	show:true,
					  	lineStyle:{
					  		color:['#262732'],
					  		width:1,
					  		type:'solid'
					  	}
					  } */
				},
				series: [{
						name: '大一',
						type: 'bar',
						data:this.seriesOne,
						barWidth: 15,
						itemStyle: {
							color: '#d3424b',
							barBorderRadius: [10, 10, 10, 10],// （顺时针左上，右上，右下，左下）
							borderColor:'#aa55ff',
							borderWidth:2
			
						},
						showBackground: true,
						backgroundStyle: {
							color: '#15172a',
							barBorderRadius: [10, 10, 10, 10],
							shadowColor: '#eb40a1',
							shadowBlue: 50,
							shadowOffsetX: 0,
							shadowOffsetY: 0.1
						}
					},
					{
						name: '大二',
						type: 'bar',
						data:this.seriesTwo ,
						barWidth: 15,
						itemStyle: {
							color: '#d3424b',
							barBorderRadius: [10, 10, 10, 10], // （顺时针左上，右上，右下，左下）
							shadowColor: '#eb40a1',
							shadowBlue: 10,
							borderColor:'#aa55ff',
							borderWidth:2
						},
						showBackground: true,
						backgroundStyle: {
							color: '#15172a',
							barBorderRadius: [10, 10, 10, 10],
							shadowColor: '#eb40a1',
							shadowBlue: 50,
							shadowOffsetX: 0,
							shadowOffsetY: 0.3
						}
			
					},
					{
						name: '大三',
						type: 'bar',
						data:this.seriesThree ,
						barWidth: 15,
						itemStyle: {
							color: '#d3424b',
							barBorderRadius: [10, 10, 10, 10], // （顺时针左上，右上，右下，左下）
							shadowColor: '#eb40a1',
							shadowBlue: 10,
							borderColor:'#aa55ff',
							borderWidth:2
						},
						showBackground: true,
						backgroundStyle: {
							color: '#15172a',
							barBorderRadius: [10, 10, 10, 10],
							shadowColor: '#eb40a1',
							shadowBlue: 50,
							shadowOffsetX: 0,
							shadowOffsetY: 0.3
						}
					}
				]
			};
			myChart.setOption(option);
			
		}
	},
	mounted() {
		this.showEcharts();
	}
})