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. ...
随机推荐
- IndexFlatL2、IndexIVFFlat、IndexIVFPQ三种索引方式示例
上文针对Faiss安装和一些原理做了简单说明,本文针对标题所列三种索引方式进行编码验证. 首先生成数据集,这里采用100万条数据,每条50维,生成数据做本地化保存,代码如下: import numpy ...
- Elasticsearch第一篇:在 Windows 上的环境搭建
本文介绍如何在 windows 10 ,64位操作系统上安装最新版本 Elasticsearch.以及相关插件.之前看了不少园友的文章,用到的版本都比较低,尤其是插件的版本要和ES的版本相对应等这些问 ...
- C#设计模式之15-解释器模式
解释器模式(Interpreter Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/415 访问. 解释 ...
- JavaScript apply使用
call 和 apply 作用: 都是为了改变某个函数运行的context上下文而存在的,为了改变函数体内部 this的指向 JavaScript函数存在定义时上下文和运行时上下文, 上下文(cont ...
- 01第一个批处理文件 window开机自动加载批处理文件
1 批处理文件用来加载python程序 批处理的文件名称为:Hello.bat @echo off C: cd C:\Users\\Desktop\python\HelloWorld\HelloWo ...
- Hibernate搭建案例步骤:
5.1引入依赖: <!--hibernate core--> <dependency> <groupId>org.hibernate</groupId> ...
- 序列化流(ObjectOutputStream、ObjectInputStream)
1.序列化流(ObjectOutputStream) package demo10.objstream; /* java.io.ObjectOutputStream extends OutputStr ...
- MySql安装后在服务管理器里边找不到MySql服务项的解决办法(win10)
问题描述: 成功安装MySql后,使用mysql的时候,在CMD中输入net start mysql,提示服务名无效,查看服务列表也找不到mysql服务. 解决办法: 首先用管理员身份打开CMD命令, ...
- linux下的scp传输文件
转载于:http://moyu2010.blog.163.com/blog/static/177439041201112710243064/,再次谢谢作者. 1.功能说明scp就是security c ...
- HDFS概述和Shell操作
大数据技术之Hadoop(HDFS) 第一章 HDFS概述 HDFS组成架构 HDFS文件块大小 第二章 HDFS的Shell操作(开发重点) 1.基本语法 bin/hadoop fs 具体命令 ...