如何引入ECharts并实现自适应
效果
1. 安装echarts
npm install echarts2. components/echarts/index.vue
<template>
<div :class="className" :style="{height:height,width:width}" />
</template><script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import {debounce} from '@/utlis/index.js'
const animationDuration = 6000
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
// 数据源
echartsData: {
type: Object,
default: {}
},
},
data() {
return {
chart: null,
}
},
watch: {
},
//初始化
mounted() {
this.initChart()
this.resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
window.addEventListener('resize', this.resizeHandler)
},
//销毁
beforeDestroy() {
if (!this.chart) {
return
}
window.removeEventListener('resize', this.resizeHandler)
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption(this.echartsData, animationDuration)
}
}
}
</script>3. utlis/index.js
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔last小于设定时间间隔wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function(...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
}4. 在.vue 中使用 test/index.vue
<template>
<div id="test">
<echarts :echartsData="echartsData" />
</div>
</template><script>
import echarts from '@/components/echarts/index'
export default {
components: {
echarts
},
data() {
return {
echartsData: {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
}
}],
series: [{
name: 'pageA',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [79, 52, 200, 334, 390, 330, 220],
}, {
name: 'pageB',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [80, 52, 200, 334, 390, 330, 220],
}, {
name: 'pageC',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [30, 52, 200, 334, 390, 330, 220],
}]
}
}
}
}
</script><style lang="scss" scoped>
#test {
width: 100%;
height: 100%;
background: antiquewhite;
position: absolute;
top: 0px;
bottom: 0px;
}
</style>Vue-cli使用ECharts并封装ECharts组件
1. 导入echarts
在终端输入
cnpm install echarts --save在main.js中引入
import * as eCharts from 'echarts';
Vue.prototype.$eCharts = eCharts;2. 封装echarts组件
新建组件echats.vue
首先应该明确Echarts图形必须满足四项刚性条件才可以绘制：
- 准备一个具有宽高的容器（container）；
- 每次绘制之前需要初始化（init）；
- 必须设置配置，否则无从绘制（option）；
- 改变数据时必须传入改变的数据，否则监听不到新数据（setOption）；
- 1.容器
注意，容器的宽高可以通过v-bind绑定样式的参数styleObj来设置（父组件引用时传递过来），使得应用echats组件时可以自由地设置宽高
<template>
<div id="myChart" :style="styleObj" ref="chart">
</div>
</template>- 2.初始化+配置
由于初始化需要获取到容器dom，所以需要在mouted生命周期里面初始化
mounted () {
// 因为需要拿到容器，所以要挂载之后
this.init()
},
methods: {
init(){
let chart = this.$eCharts.init(this.$refs.chart)
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}, //X轴
yAxis: { type: 'value' }, //Y轴
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
}] //配置项
}
chart.setOption(option)
}
}3. 父组件引用测试
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
