vue中使用柱状图
子组件
<template>
<div>
<div id="myChart" :style="{width: '400px', height: '450px'}"></div>
</div>
</template>
<script>
export default {
data () {
return {
msg: ''
}
},
props:['houseStyle'],
mounted () {
this.drawLine()
console.log(this.houseStyle)
},
methods: {
drawLine () {
// 基于准备好的dom, 初始化echarts
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {},
grid: {
left: '1%',
bottom: '5%',
containLabel: true
} ,
tooltip: {},
xAxis: {
type : 'category',
data: ['商务办公用房','门面房','办公用房','集体宿舍','公租房','学生房'],
axisTick: {
alignWithLabel: true
},
axisLabel:{
interval:0,//横轴信息全部显示
rotate:-30,//-30度角倾斜显示
}
},
yAxis : [
{
type : 'value'
}
],
series: [{
type: 'bar',
barWidth: '50%',
data: [{
value:this.houseStyle[0],
itemStyle:{
color:'#4383C9'
}
},
{
value:this.houseStyle[1],
itemStyle:{
color:'#7B5BAA'
}
},
{
value:this.houseStyle[2],
itemStyle:{
color:'#BA6329'
}
},
{
value:this.houseStyle[3],
itemStyle:{
color:'#B92E2E'
}
},
{
value:this.houseStyle[4],
itemStyle:{
color:'#6E8C34'
}
},
{
value:this.houseStyle[5],
itemStyle:{
color:'#21A579'
}
}]
}]
})
}
},
watch:{
houseStyle:{
handler(val,oldval){
this.houseStyle=val
this.drawLine ()
},
deep:true
}
}
}
</script>
父组件
<EchartZx :houseStyle="openhouseStyle"></EchartZx>
(房屋管理)
vue中使用柱状图的更多相关文章
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- vue中监听window.resize的变化
我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...
- echarts在vue中使用的感悟
echarts在vue中使用的感悟 echarts作为图表展示的强大存在,每当使用后台系统,或多或少都会使用到,但是作为菜鸟的我,则是一路采坑,各种头大,比比皆是,为了避免下次再犯同样的错误,特意记录 ...
- Echars -- 在Vue中如何使用Echars
在vue-cli项目中使用echarts -->Wangqi 这个示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘 ...
- vue 中使用echarts
前言:在vue2.0中使用百度echarts有三种解决方案. 一.原始方法直接使用 这样每次都要获取图表dom元素 然后通过setOption渲染数据,最后在mounted中初始化.很麻烦. < ...
- 在Vue中echarts可视化组件的使用
echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html 1.找到脚手架项目所在地址,执行cnpm install echarts ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
随机推荐
- 付费?是不可能的!20行Python代码实现一款永久免费PDF编辑工具
PDF(Portable Document Format),中文名称便携文档格式是我们经常会接触到的一种文件格式,文献.文档…很多都是PDF格式.它以格式稳定的优势,使得我们在打印.分享.传输过程中能 ...
- JS 留言板案例
css代码 ul { list-style: none; } ul li { background-color: pink; line-height: 40px; margin: 10px; widt ...
- Make Windows 10 Comfortable
在 StartUp 目录中(在当前用户目录下), 创建.bat, 里面可以写希望登录指定的命令(如使用subst进行映射, 将常用的目录映射为磁盘驱动器) 在 %USERPROFILE%(也就是用户家 ...
- C#LeetCode刷题之#342-4的幂(Power of Four)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4058 访问. 给定一个整数 (32 位有符号整数),请编写一个函 ...
- C#LeetCode刷题之#633-平方数之和( Sum of Square Numbers)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3885 访问. 给定一个非负整数 c ,你要判断是否存在两个整数 ...
- HTTP PUT/POST/PATCH的区别
幂等 idempotent 幂等操作的特定就是其任意多次执行所产生的影响与一次执行的影响相同 POST POST 用来创建一个新的数据 POST 不是幂等的, 意味着多次操作的结果是不同的, 多次操作 ...
- Android 使用AS编译出错:Error: Duplicate resources
原因在于drawable目录下有重复的文件名!!! 修改其中的一个文件名或者删除其中一张图(或者xml文件)就可以啦~
- RPC 框架 Dubbo 从理解到使用(一)
技术架构演变 单一应用架构 通俗地讲,"单体应用(monolith application)"就是将应用程序的所有功能都打包成一个独立的单元.当网站流量很小时,只需一个应用,将所有 ...
- jmeter参数化之 【CSV Data Set Config/CSV数据配置文件】
这里以登录功能为例: 1.新建.txt文件,将参数值写入到txt文件中(多个参数值如:用户名,密码 之间以逗号隔开),将文件放置在想要放置的目录下 2.添加csv数据文件设置 右键线程组->添加 ...
- Java中解析wav音频文件信息:音频声道数,采样频率,采样位数、声音尺寸
前言:请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 音频解析方法: public static int toInt(byte[] b) { return ((b[3] << 2 ...