1.在vue的脚手架中 打开终端 npm install echarts --save
（这里顺便提一下还有一个v-chart）
2.新建一个barEcharts.vue的组件 这里的ref是vue的绑定方式（用id绑定也是可以的，换成id的话就把this.$refs.chart改为id就可以） 组件里宽和高是要传的因为灵活 props就是子组件接收参数 data里的condition参数是用来控制x的字体的显示方式是否为纵向或者为横向的如果不传就默认false。
watch很重要，init也可以放在created 但是建议放在watch里 因为你只要获取到参数，组件参数有变化的时候才会去初始化echarts，如果没有watch及nextTick你在请求接口之后你会发现你的图出不来也不报错，因为这异步的原因
<template>
<!-- 这里是柱状图的组件 -->
<div class="bar"
ref="chart"
:style="{width,height}"></div>
</template>
<script>
export default {
name: "BarEcharts",
props: ["data"],
data () {
return {
dataX: null,
dataY: null,
title: null,
width: null,
height: null,
condition: false, //控制x轴是否为纵向显示
myChart: null
};
},
watch: {
data: {
handler (newName, oldName) {
// console.log(newName)
this.$nextTick(() => {
this.dataX = this.data.dataX;
this.dataY = this.data.dataY;
this.title = this.data.title;
this.init()
})
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true,
deep: true
}
},
created () {
this.dataX = this.data.dataX;
this.dataY = this.data.dataY;
this.title = this.data.title;
this.width = this.data.width;
this.height = this.data.height;
this.condition = this.data.condition
},
mounted() {
window.addEventListener("resize",()=>{
this.myChart.resize()
})
},
methods: {
init () {
var echarts = require("echarts");
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(this.$refs.chart);
// 绘制图表
let option = {
color: ["#7FD28A"],
title: {
text: this.title,
textStyle: { color: "#000" },
left: "3%",
top: "4%"
},
tooltip: {},
xAxis: {
data: this.dataX,
axisLabel: {
formatter: (value) => {//x轴字体竖行显示
if (this.condition !== false) {
return value.split("").join("\n");
} else{
return value;
}
}
}
},
yAxis: {},
series: [
{
name: "区域",
type: "bar",
data: this.dataY,
barWidth: 16,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
textStyle: {
color: "#000",
fontSize: 16
}
}
}
}
}
]
};
myChart.setOption(option);
this.myChart = myChart
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
2.新建一个home.vue 这里 :data="data" 就是你传到组件里的参数
<template>
<div class=" box">
<BarEcharts :data="data" />
</div>
</template>
<script>
import BarEcharts from "@/components/Echarts/BarEcharts.vue";
export default {
components: {BarEcharts, PieEcharts
},
data () {
return {
data: {
title: "标题",
width: "800px",//这里也可以写百分比
height: "400px",
condition: false,
dataX: ["历下区","市中区","槐荫区","天桥区","历城区", "长清区", "章丘区","济阳区","莱芜区", "钢城区", "平阴县","商河县"],
dataY: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
},
};
},
methods: {
},
mounted () {
},
created () {
}
};
</script>
<style lang="scss" scoped>
.box{
width: 800px;
height: 400px;
}
</style>
