关键词：

npm install echarts --save

yarn add echarts --save

<div id="myChart" :style=" width: '500px', height: '500px' "></div>

export default 
	name: "eCharts",
	data() 
		return ;
	,
	mounted() 
		// 模板挂载完成后调用
		this.drawEcharts();
	,
	methods: 
		drawEcharts() 
			// 基于准备好的dom，初始化echarts实例
			// 第一种写法，不需要在当前页定义标签id
			// let myChart = this.$echarts.init(this.$el);
			
			// 第二种写法
			let myChart = this.$echarts.init(document.getElementById("myChart"));
			// 绘制图表
			myChart.setOption(
				title: 
					text: 'ECharts 入门示例'
				,
				tooltip: ,
				legend: 
					data:['销量']
				,
				xAxis: 
					data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
				,
				yAxis: ,
				series: [
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
				]
			)
		
	    

<div id="myChart" :style=" width: '500px', height: '500px' "></div>

// 引入ECharts
let echarts = require('echarts');

export default 
	mounted() 
		this.$nextTick(() => 
			this.initChart();
		);
	,

	methods: 
    	initChart() 
    		// 方式一
			// let chart = echarts.init(this.$el);
			
			// 方式二
			let chart = echarts.init(document.getElementById("myChart"));
			chart.setOption(
				title: 
					text: "PM 2.5 均值浓度变化情况",
					textStyle: 
						color: "#000",
					,
					x: "center",
					top: "5%",
				,
				backgroundColor: "#fff",
				tooltip: 
					trigger: "axis",
					formatter: "value：c<br/>时间：b",
				,
				// 保存图片
				toolbox: 
					top: "5%",
					right: "5%",
					iconStyle: 
						borderColor: "#1890ff",
					,
					feature: 
						saveAsImage: 
							type: "png",
							name: "PM2.5均值浓度变化情况",
						,
					,
				,
				xAxis: 
					type: "category",
					data: ["2021-09-01 10:00", "2021-09-01 11:00", "2021-09-01 12:00"],
				,
				yAxis: 
					type: "value",
					boundaryGap: false,
					name: "ug/m³",
					splitLine: 
						show: false,
					,
					// y轴不能设置值
					// data: [0, 30, 60, 90],
				,
				series: [
					
						data: [6, 30, 60],
						type: "line",
					,
				],
			);
		,
	

18-vue-cli脚手架项目中组件的使用

在webpack-simple模板中，包括webpck模板。一个.vue文件就是一个组件。      查看详情

vue脚手架

...过脚手架创建vue项目了。通过上面脚手架创建的Vue项目，使用npmrunserve命令之后，打印如下：使用npmrunserve命令并不会自动打开浏览器，下面我们修改端口号，并且让执行命令之后自动打开浏览器。注意：不推荐使用这种配置方... 查看详情

使用vue脚手架进行构建项目

使用iview中脚手架构建步骤：首先在官网上下载脚手架:https://www.iviewui.com/cli解压后打开exe文件，，点击新建工程输入项目信息和git仓库后点击创建工程，再选择一个文件夹进行创建后，自动生成了以下文件目录使用npminstall直接... 查看详情

vue-cli脚手架项目中组件的使用(代码片段)

...这些文件打包成一个.vue的文件。为什么在vue-cli项目中能使用.vue的文件？比如有这之前的一个自定义的组件 查看详情

使用vuecli脚手架搭建第一个vue程序(代码片段)

VUECLI是VUE官方发布的一个快速搭建VUE工程的工具。所以在我们搭建第一个VUE项目之前，需要先来安装VUECLI脚手架。 安装VUECLI脚手架VUECLI脚手架目前已经发布到了4.2的版本了，可以通过cmd或者vscode的终端来查看电脑上已经安装... 查看详情

vue-cli脚手架

...端口运行PORT=8089node./build/dev-server.jsvue组件1在一个组件中使用另一个组件需要是哪个条件使用import命令将该组件导入在父组件中的components里面注册该导入的组件在父组件中的template 查看详情

vue脚手架搭建

...ojectcdmy-projectnpminstallnpmrundevVue.js目录结构上一章节中我们使用了npm安装项目，我们在IDE（Eclipse、Atom等）中打开该目录，结构如下所示：目录解析目录/文件说明build最终发布的代码存放位置。config配置目录，包括端口号等。我们... 查看详情

vue-cli快速搭建脚手架

使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目构建和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无疑效率是低下的，所以通常我们会使用一些脚手架工具来帮助完成这些事情。... 查看详情

使用vue脚手架创建vue项目并引入bootstrap-vue

...\\ahao\\studyPath\\bootstrap-vue\\node_modules\\lodash\\lodash.js\'3.VUE中使用BootstrapVue图片b-img标签路径显示不出图片问题新建vue.config.js;安装npmivue-cli-plugin-bootstrap-vue;配置vue.config.js后重新执行npmrunserve 查看详情

使用vue脚手架搭建项目

vue-cli构建1、首先安装node（傻瓜式安装）2、然后安装webpack（安装3.12版本 npminstall[email protected]-g---全局安装）3、再安装vue-cli  查看详情

vue的脚手架模板创建流程（vue-cli）：

...nstall--globalvue-cli//全局安装vue-cli脚手架步骤三：如上图，使用vueinitwebpack-simplevue（此vue为项目名）创建名为vue且模板为webpack-simple的项目，并一直按回车。注意点1：vue-cli脚手架中有3种模板，分别是simple、webpack-sim 查看详情

vue脚手架结构及vue-router路由配置(代码片段)

...个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。jquery对象和dom对象jquery找到的标签对象称为--jquery对象原生js找到的标签对象称为--dom对象dom对象只能使用dom对象的方法,不能使... 查看详情

vue-loader是什么和vue-cli脚手架的使用

wvue-loader没玩过require.js也没玩过sea.js，那该怎么理解vue-loader是什么呢？现在推崇的模块化开发，那么requirejs和seajs以及现在非常流行的webpack都是模块化开发的工具，在以前，例如在requirejs中，可以依赖加载某些js文件，例如：req... 查看详情

使用vue-cli脚手架自动化搭建一个vue项目

最近在学习使用vue，简单汇总下如何使用vue-cli脚手架自动化搭建一个vue项：1.首先，要安装node.js，之后第一步检测是否安装node；没有安装node的同学请到官网下载安装 https://nodejs.org/en/download/安装成功后在命令行查看node版本... 查看详情

laravel如何在blade文件中使用vue组件

Laravel如何在blade文件中使用Vue组件1.安装laravel/ui依赖包composerrequirelaravel/ui2.生成vue基本脚手架phpartisanuireact系统还提供了非常便捷的auth脚手架,带登录注册。phpartisanuireact--auth3.组件位置Vue组件ExampleComponent.vue将被放置在resources/js/c... 查看详情

vue学习，脚手架搭建

安装好vue-cli的前提下使用管理员身份打开cmd进入想进入的文件夹中输入vueinitwebpack(项目名)初学者一路enter就好了，之后等他下载的过程会很长安装好会提示你两部操作：cd进新建的项目中启动项目npmrundev启动成功会提示项目在808... 查看详情

vue-cli脚手架使用

    1、直接使用CDN引入：   http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js；       http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.j 查看详情

vue插槽vue脚手架配置代理(代码片段)

...带数据的标签，当一个组件有不确定的结构时,就需要使用slot技术，注意：插槽内容是在父组件中编译后,再传递给子组件的1、作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的 查看详情