Vue-cli3中如何引入ECharts并實(shí)現(xiàn)自適應(yīng)
如何引入ECharts并實(shí)現(xiàn)自適應(yīng)
效果
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ā)時(shí)間間隔 const last = +new Date() - timestamp // 上次被包裝函數(shù)被調(diào)用時(shí)間間隔last小于設(shè)定時(shí)間間隔wait if (last < wait && last > 0) { timeout = setTimeout(later, wait - last) } else { timeout = null // 如果設(shè)定為immediate===true,因?yàn)殚_始邊界已經(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 // 如果延時(shí)不存在,重新設(shè)定延時(shí) 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: { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效 ? ? ? ? ? ? ? type: 'shadow' // 默認(rèn)為直線,可選為:'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. 導(dǎo)入echarts
在終端輸入
cnpm install echarts --save
在main.js中引入
import * as eCharts from 'echarts'; Vue.prototype.$eCharts = eCharts;
2. 封裝echarts組件
新建組件echats.vue
首先應(yīng)該明確Echarts圖形必須滿足四項(xiàng)剛性條件才可以繪制:
- 準(zhǔn)備一個(gè)具有寬高的容器(container);
- 每次繪制之前需要初始化(init);
- 必須設(shè)置配置,否則無從繪制(option);
- 改變數(shù)據(jù)時(shí)必須傳入改變的數(shù)據(jù),否則監(jiān)聽不到新數(shù)據(jù)(setOption);
- 1.容器
注意,容器的寬高可以通過v-bind綁定樣式的參數(shù)styleObj來設(shè)置(父組件引用時(shí)傳遞過來),使得應(yīng)用echats組件時(shí)可以自由地設(shè)置寬高
<template> ? <div id="myChart" :style="styleObj" ref="chart"> ? </div> </template>
- 2.初始化+配置
由于初始化需要獲取到容器dom,所以需要在mouted生命周期里面初始化
mounted () { // 因?yàn)樾枰玫饺萜鳎砸獟燧d之后 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', }] //配置項(xiàng) } chart.setOption(option) } }
3. 父組件引用測(cè)試
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue使用echarts圖表自適應(yīng)的幾種解決方案
- 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問題
- vue中echarts3.0自適應(yīng)的方法
- vue?echarts實(shí)現(xiàn)改變canvas長(zhǎng)和寬自適應(yīng)
- Vue中使用Echarts可視化圖表寬度自適應(yīng)的完美解決方案
- Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐
- vue中的echarts實(shí)現(xiàn)寬度自適應(yīng)的解決方案
- vue中設(shè)置echarts寬度自適應(yīng)的代碼步驟
- vue項(xiàng)目中echarts自適應(yīng)問題的高級(jí)解決過程
相關(guān)文章
使用vue-video-player實(shí)現(xiàn)直播的方式
在開發(fā)期間使用過video.js、mui-player等插件,發(fā)現(xiàn)這些video插件對(duì)移動(dòng)端的兼容性都不友好,最后發(fā)現(xiàn)一個(gè)在移動(dòng)端兼容不錯(cuò)的插件vue-video-player,下面通過場(chǎng)景分析給大家介紹使用vue-video-player實(shí)現(xiàn)直播的方法,感興趣的朋友一起看看吧2022-01-01Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)
這篇文章主要介紹了Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式
這篇文章主要介紹了vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法)
這篇文章主要介紹了vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10