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-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-01Vue 清除Form表單校驗信息的解決方法(清除表單驗證上次提示信息)
這篇文章主要介紹了Vue 清除Form表單校驗信息的解決方法(清除表單驗證上次提示信息),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04vue復雜表格單元格合并根據(jù)數(shù)據(jù)動態(tài)合并方式
這篇文章主要介紹了vue復雜表格單元格合并根據(jù)數(shù)據(jù)動態(tài)合并方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法)
這篇文章主要介紹了vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10