<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			@import url("css/iconfont.css");

			* {
				margin: 0;
				padding: 0;
			}

			.contents {
				width: 100%;
				height: 100vh;
				background: #fff;
			}

			.content {
				width: 100%;
				height: 100vh;
				background: #ededed;
			}

			.echarts {
				position: relative;
			}

			.landscape_echarts {
				transform: rotate(90deg);
				-ms-transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				-webkit-transform: rotate(90deg);
				-o-transform: rotate(90deg);
			}

			.vertical_echarts {
				width: 100%;
				background-color: #fff;
			}

			.landscape {
				width: 100vh;
				height: 100vw;
			}

			.vertical {
				width: 100%;
				height: 5rem;
			}

			.title {
				display: flex;
				align-items: center;
				/* transform: translateY(.5rem); */
				position: absolute;
				top: 0;
				justify-content: space-between;
				z-index: 999;
			}

			.landscape_title {
				width: 100vh;
				height: 1rem;
			}

			.vertical_title {
				width: 100%;
				height: 1rem;
			}

			.title h5 {
				text-indent: .3rem;
				font-size: .4rem;
			}

			.title span {
				display: block;
				width: .4rem;
				height: .4rem;
				font-size: .4rem;
				margin-right: .4rem;
			}
		</style>
	</head>
	<body>
		<div id='app' :class="!isFull?'content':'contents'">
			<div :class="['echarts', !isColumnar?'vertical_echarts':'landscape_echarts']">
				<div :class="['title',!isColumnar?'vertical_title':'landscape_title']">
					<h5>柱状图</h5>
					<span :class="['iconfont', !isColumnar?'icon-hengping':'icon-shuping' ]" @click='columnar()'></span>
				</div>
				<div id="main" :class="!isColumnar?'vertical':'landscape'"></div>
			</div>
		</div>
	</body>
</html>
<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data() {
			return {
				myChart: null, // 图表需要字段
				isFull: false,
				isColumnar: false,
				option: null,
			}
		},
		methods: {
			echarts() {
				// 基于准备好的dom，初始化echarts实例
				this.myChart = echarts.init(document.getElementById('main'));

				// 指定图表的配置项和数据
				this.option = {
					dataZoom: [{
						type: 'inside'
					}],
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "衬衫", "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋",
							"袜子", "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"
						]
					},
					yAxis: {

					},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20, 5, 5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(this.option);
			},
			resize() {
				this.myChart.resize() // 窗口大小发生变化的时候重置
			},
			columnar() {
				this.isColumnar = !this.isColumnar;
				this.isFull = !this.isFull;
			}

		},
		destroyed() {
			// 移除监听，echarts自适应
			window.removeEventListener('resize', this.resize)
		},
		mounted() {
			// echarts图表自适应
			window.addEventListener('resize', this.resize); // 添加监听
			this.echarts();
		},
		watch: {
			isColumnar: {
				handler() {
					//监听当屏幕发生转变时，重新渲染echarts
					if (this.myChart) {
						this.$nextTick(() => this.resize())
						this.myChart.setOption(this.option, true);
					}
				}
			},
		}
	})
</script>

效果如下图：
在这里插入图片描述
在这里插入图片描述
此法只实现了基本样式，至于会不会有什么bug，后面再看吧！

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区