Vue-cli3中如何引入ECharts并實現(xiàn)自適應
更新時間：2022年06月22日 16:19:17 作者：高先生的貓
這篇文章主要介紹了Vue-cli3中如何引入ECharts并實現(xiàn)自適應，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
如何引入ECharts并實現(xiàn)自適應
效果
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%'
? ? ? },
? ? ? // 數(shù)據(jù)源
? ? ? 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() {
// 據(jù)上一次觸發(fā)時間間隔
const last = +new Date() - timestamp
// 上次被包裝函數(shù)被調(diào)用時間間隔last小于設定時間間隔wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果設定為immediate===true，因為開始邊界已經(jīng)調(diào)用過了此處無需調(diào)用
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: { // 坐標軸指示器，坐標軸觸發(fā)有效
? ? ? ? ? ? ? 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）；
- 改變數(shù)據(jù)時必須傳入改變的數(shù)據(jù)，否則監(jiān)聽不到新數(shù)據(jù)（setOption）；
- 1.容器
注意，容器的寬高可以通過v-bind綁定樣式的參數(shù)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. 父組件引用測試
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue 虛擬列表的實現(xiàn)示例，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-03-03
使用vue-video-player實現(xiàn)直播的方式
在開發(fā)期間使用過video.js、mui-player等插件，發(fā)現(xiàn)這些video插件對移動端的兼容性都不友好，最后發(fā)現(xiàn)一個在移動端兼容不錯的插件vue-video-player，下面通過場景分析給大家介紹使用vue-video-player實現(xiàn)直播的方法，感興趣的朋友一起看看吧2022-01-01
這篇文章主要給大家介紹了關于Swiper在Vue2中的簡單使用方法,swiper是一款現(xiàn)代化的移動端輪播組件,可以在Vue中輕松使用,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue中的文本空格占位符說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue 清除Form表單校驗信息的解決方法(清除表單驗證上次提示信息)
這篇文章主要介紹了Vue 清除Form表單校驗信息的解決方法(清除表單驗證上次提示信息),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了Vue編程三部曲之模型樹優(yōu)化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家詳細介紹了vue仿ios列表左劃刪除，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
vue復雜表格單元格合并根據(jù)數(shù)據(jù)動態(tài)合并方式
這篇文章主要介紹了vue復雜表格單元格合并根據(jù)數(shù)據(jù)動態(tài)合并方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要為大家詳細介紹了Vue方法與事件處理器，,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法)
這篇文章主要介紹了vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10