Vue-cli3中如何引入ECharts并实现自适应
作者:高先生的猫
这篇文章主要介绍了Vue-cli3中如何引入ECharts并实现自适应,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
如何引入ECharts并实现自适应
效果
1. 安装echarts
npm install echarts
2. 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. 父组件引用测试
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。