vue中使用柱状图
2024-09-01 09:54:32
子组件
<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>
（房屋管理）
最新文章
- WCF自动添加消息头
- 浅谈html5及其新特性
- 最简单的可取消多选效果(以从水果篮中挑选水果为例)【jsDEMO】
- 第二届中国移动互联网测试大会PPT
- StringBuffer类
- js控制滚动条平滑滚动到制定位置
- NGINX的奇淫技巧 —— 5. NGINX实现金盾防火墙的功能(防CC)
- Android与JavaScrip进行交互（二）
- dorado7 重装了tomcat后配置路径
- Apache配置虚拟目录，以及各种操作
- Block介绍（二）内存管理与其他特性
- 怎样在Swift中使用CocoaPods-b
- JavaScript实例技巧精选(11)—计算器实例3
- S3C2440外部中断系统详解
- 使用PHPExcel-1.8实现导入
- wordpress文章链接怎么把默认的别名改成id形式和伪静态设置
- C#编程の模板
- Python Web学习笔记之并发编程IO模型
- Content-Type，内容类型
- 使用mybatis提供的各种标签方法实现动态拼接Sql。使用foreach标签实现遍历查询。比如实现select * from user where id in(1,10,24)这条sql查询语句。