vue中封装一个echart图表组件,在脚手架中应用
echart在工作中经常用来渲染后台的数据展示,如果不了解echarts 的话 让用 canvas当然也可以画出来 但是太浪费时间
同时 我们引入echart 每次都是哪里引用 然后初始化一个echart 这样 比较浪费时间
最后的方法 是封装一个echart组件 那里调用 我们只用调用组件 把数据传入进去他就自动帮我们渲染 达到事半功倍的效果
1.我们封装之前 先看下官方例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
以上是官方实例 通过script 标签引入echart.js的方式
2.接下来我们就一步一步来 完成封装
我们这个是在vue脚手架中使用
2.1.首先就是安装
npm i echarts -S
然后再src文件夹下 建立一个 components 文件夹 下面建立一个 Echart.vue
2.2.然后是 写一个div用来存放 echarts图表 这里注意我们使用 ref 方法 来获取dom对象 再vue中使用ref 获取对象 效果更好 这里算是小细节 大家可以学习下
<template>
<div style="width:100%" ref="echart"></div>
</template>
2.3 引入echarts
import echarts from 'echarts'
2.4.使用 props父子传参的方式 接受 父组件传来的数据
props: {
chartData: { // 存放父组件传来的图表数据
type: Object,
default() { // 这里注意是 函数形式返回 因为 该组件 可能在很多地方引用 防止 共用 导致错误发生
return {
xData: [], // x轴 显示数据
series: [] // 表中的数据存放
}
}
},
isAxisChart: { // 这里判断 是不是 带坐标标轴的图表 还是不带坐标轴的图表 如: 饼状 图形
type: Boolean,
default: true // 默认是 带坐标轴 当然 是由父元素 决定渲染那种坐标轴
}
}
2.5.data中数据的初始化定义
data() {
return {
echart: '', // 用来存放 echart 图标的 div元素对象
axisOption: { // 带坐标轴的 图表数据
title: { // 表格左侧title
text: 'echart入门'
},
legend: { // 坐标轴x轴字体颜色
textStyle: {
color: '#333'
}
},
grid: { // 把存放图标的 div看作是一个 网格
left: '20%' //图表向右边移动
},
tooltip: {
trigger: 'axis' //鼠标移到 点上 有显示文字 触动是x轴
},
xAxis: {
//x轴 设置
type: 'category', //类别
data: [], // 用来存放 x轴 显示的数据
axisLine: {
//坐标线条颜色
lineStyle: {
color: '#17b3a3'
}
},
axisLabel: {
//坐标文字颜色
color: '#333'
}
},
yAxis: [ // y轴 这些是固定的数据 不需要动态变化
{
type: 'value', // 类型 是值类型
axisLine: { // y轴 线条颜色
lineStyle: {
color: '#17b3a3'
}
}
}
],
color: [ // 设置图表中线条颜色 随机从下属颜色中取
'#2ec7c9',
'#b6a2de',
'#5ab1ef',
'#ffb980',
'#d87a80',
'#8d98b3',
'#e5cf0d',
'#97b552',
'#95706d',
'#dc69aa',
'#07a2a4',
'#9a7fd1',
'#588dd5',
'#f5994e',
'#c05050',
'#59678c',
'#c9ab00',
'#7eb00a',
'#6f5553',
'#c14089'
],
series: [] // 用来存放 图表中 显示的数据
},
normalOption: {
series: []
}
}
}
2.6.使用计算属性 返回一个 存放全部数据的计算属性
computed: {
options() {
return this.isAxisChart ? this.axisOption : this.normalOption // 判断是带坐标轴还是不带坐标轴的图表 options 返回对应图表的数据
}
}
2.7.methods 定义方法 初始化
// 初始化图表数据
initChartData() {
if (this.isAxisChart) { // 判断是否带坐标轴图
this.axisOption.xAxis.data = this.chartData.xData // 将父组件传来的图表数据 x轴数据 赋值给 本组件定义的x轴数据中
this.axisOption.series = this.chartData.series //将父组件传来的 图表显示数据 赋值给本组件定义的用来存放 图表数据的变量
} else {
this.normalOption.series = this.chartData.series
}
}
// 初始化echarts
initChart() {
this.initChartData() // 图表数据的初始化
if (this.echart) { // 判断当前div对象是否获取到
this.echart.setOption(this.options) // 将图表数据渲染到 div上
} else {
this.echart = echarts.init(this.$refs.echart) // 获取存放 echarts图表的div元素对象
this.echart.setOption(this.options)
}
}
2.8 .使用监听方式 用来监听父组件传来的数据 这里采用的是深度监听 可能父组件的数据 也是从后端传递过来的
watch: {
chartData: { // 监听父组件传来的 图表数据 变量
handler() {
this.initChart() // 调用初始化方法
},
deep: true
}
}
2.9 设置图表 自适应 当页面宽度发生变化的时候 图表也跟着响应式变化
在 methods 中添加 方法
resizeChart() {
this.echart ? this.echart.resize() : ''
},
mounted 钩子函数中 给window绑定方法
mounted() {
window.addEventListener('resize', this.resizeChart.bind(this)) // 这里使用 bind方法 保证 this指向一致
},
在destroyed钩子函数 中 取消 方法的监听
destroyed() {
window.removeEventListener('resize', this.resizeChart.bind(this))
}
这样 我们在子组件中算是准备完成了
2.10.其次就是在父组件中的调用了
2.10.1.import Echart from '@/components/Echart.vue' // 引用 Echart.vue组件
2.10.2.components: { // 注册组件
Echart
}
2.10.3 数据定义
echartData:{ // 图表数据
xData: [], // x轴数据 // 注意 不带坐标轴的数据是没有这个属性的
series: [] // 图表显示数据
}
2.10.3.页面上注册
// 一种默认 是带坐标轴的 图表数据
<echart :chartData="echartData" style="height:260px"></echart>
// 传递isAxisChart=false 表示传递的是不带 坐标轴的 图表格式
<echart :chartData="echartData" style="height:260px" :isAxisChart="false"></echart>
2.10.4. 数据的传递
created(){ //钩子函数 调用 接口 返回后台参数
this.axios.get('/api/home/getData').then(res => {
let res= res.data; // 直接过来的数据我们是用不了的 要先过滤下
this.echartData.xData=[.......] // 将x轴需要的数据过滤出来， 放在这里 至于怎么过滤还得看后端给的数据格式
// 下面最好是循环 依次插入数组中 毕竟坐标轴 并不是只显示一条数据
this.echartData.series.push({
name: [.....] // 坐标轴上的显示数据的名字 类式表格的表头一样
data: [.......], // 这个是表格需要渲染的数据
type: 'line' // 渲染类型是折线图 bar:柱状图// 注意如果是 柱状图 type:'bar' barGap:0 可以让俩个柱状之间的间隙为0
})
})
// 如果是 不带坐标轴的图表 如 饼图 直接 赋值到 series 即可 没有 xData
this.echartData.series.push({
data: res.data,
type: 'pie' // pie 是 圆饼图的意思
})
})
}