vue 引入 echarts 子組件


一:創建 以.vue 結尾的 文件,也就是 子組件

如下,這是一個完整 的可以引用 一個 echarts 圖標  的vue子組件。 我們對以下進行分析

幾乎 引用 所有的 echarts 圖標都可以用這個方式。 

<template>
// :class 綁定的是類名 :stle 綁定了它的寬度和高度, 這里width 和height 可以是自己 默認的 (比如下面的width ),也可以是 父組件傳過來的, 比如下面的height <div :class="className" :style="{height:this.chartData.chartHeight,width:width}" /> </template> <script>
// 這里是單頁面引用echarts ,優點是 哪里用哪里 引用。 也可以全局引用,自行百度 import echarts from 'echarts' require('echarts/theme/macarons') // echarts theme export default {
// props 這里是一些默認參數,定義了默認的echarts的樣式,上面 的 class 和 style 中的沒有定義的變量會從這里找 props: { className: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, height: { type: String, default: '400px' }, autoResize: { type: Boolean, default: true }, chartData: { type: Object, required: true } }, data() { return { chart: null, } },
// 這里是當 數據 chartData 比較復雜時,需要用到深度監視, 這里參考博客 https://www.cnblogs.com/yesu/p/9546458.html 和 https://www.cnblogs.com/wsz168/p/8763284.html
// 我自己的思考, 這里 深度監聽chartData ,並且把最新的數據復制個 setOptions這個方法
watch: { chartData: { deep: true, handler(val) { this.setOptions(val) } } },
// 如果要獲取數據更新導致的DOM更新后的新DOM對象需要使用$nextTick回調 ,在dom對象 加載完執行 圖標初始化 mounted() { this.$nextTick(() => { this.initChart() }) },
// 在 頁面 銷毀前執行 beforeDestroy() { if (!this.chart) { return } this.chart.dispose(); this.chart = null }, //方法 methods: { initChart() { this.chart = echarts.init(this.$el, 'macarons') this.setOptions(this.chartData) }, setOptions({ dataList, 1,2,3} = {}) { this.chart.setOption({ title: { text: '三大平台七日新增條數', left: 'center', textStyle:{ // 設置標題文字大小 fontSize:18, align:'center', //水平對齊 color:'black' }, }, xAxis: { data: dataList, boundaryGap: false, axisTick: { show: false } }, grid: { left: 10, right: 20, bottom: 20, top: 60, containLabel: true }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, padding: [5, 10] }, yAxis: { axisTick: { show: false } }, legend: { data: ['1新增條數', '2新增條數','3新增條數'], padding:[40,50,0,0], }, series: [{ name: '2新增條數', itemStyle: { normal: { color: '#FF005A', lineStyle: { color: '#FF005A', width: 2 } } }, smooth: true, type: 'line', data: 111, animationDuration: 2800, animationEasing: 'cubicInOut' }, { name: '2新增條數', smooth: true, type: 'line', itemStyle: { normal: { color: '#3888fa', lineStyle: { color: '#3888fa', width: 2 }, areaStyle: { color: '#f3f8ff' }} }, data: 222, animationDuration: 2800, animationEasing: 'quadraticOut' }, { name: '1新增條數', smooth: true, type: 'line', itemStyle: { normal: { color: '#FF7E00', lineStyle: { color: '#FF7E00', width: 2 }, areaStyle: { color: '#f3f8ff' }} }, data: 333, animationDuration: 2800, animationEasing: 'quadraticOut' }] }) } } } </script> <style scoped> </style>

  注意: 此時引入組建后 瀏覽器會報錯 , 報錯原因: 

  1. 在 Vue 中,初始化的值不會被 watch 鈎子捕捉,從而導致組件被調用方調用並賦予 option 參數時不會進入校驗。雖然可以使用 immediate: true 使得 watch 鈎子能夠在屬性初始化賦值時被觸發,但這樣做是不合適的。因為這樣設置之后,在 option 初始化從而觸發 watch 時,用於掛載 echarts 的 DOM 元素還未存在於頁面中,從而導致出現 TypeError: Cannot read property 'setOption' of null 的錯誤。我們要重點注意 echarts 作用的生命周期,這一點后續還會涉及。

         詳情在:  https://blog.csdn.net/weixin_33852020/article/details/88972608

  這里我的解決辦法是不用 watch監測,把wacth去掉,在mounted方法中  this.initChart() 使用如下代碼代替

  

        var that = this;
        setTimeout(function() {
          that.initChart()
        },200)

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM