筆記4: 在vue中使用echarts(小小白）

僅僅方便本身看。初次接觸，不熟練。

代碼（百度的）

<template>  
  <div id="box" :style="{width:'500px',height:'500px'}"></div>
</template>
<script>
export default {  
    name: "hello",  
    data() {    
    return {      
        msg: "Welcome to Your Vue.js App"    
        };  
    },  
    mounted() {    
    this.drawLine();  
    },  
    methods: {    
        drawLine() {       
      //基於準備好的dom，初始化echarts實例      
        let myChart = this.$echarts.init(document.getElementById("box")); //繪製圖表      
        myChart.setOption({        
            title: { text: "在Vue中使用echarts" },        
            tooltip: {},// 懸停效果        
            xAxis: {          
           data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]// x軸數據         
     },        
           yAxis: {},//  y軸數據        
           series: [          
            {            
               name: "銷量",            
               type: "bar",// 條狀            
               data: [5, 20, 36, 10, 10, 20]// y軸數據          
            }        
           ]      
         });    
        }  
      }
};
</script>
<style>
</style>

複製代碼

疑問

let myChart = this.$echarts.init(document.getElementById("box")); //繪製圖表複製代碼

• this.$echarts是什麼？？--------「就是echarts自己」

                那爲何我把this.$echarts替換成echarts會報錯？這麼寫的原理？？

             （眉頭逐漸緊鎖。。。。。。）

• init??初始化？？初始化什麼？

   ‘ init就是把box當成一個容器，按照你輸入的數據生成一個canvas圖畫’----大佬說

完犢子了......開始有點迷惑了。。。

解決疑惑

一、this.$echarts是什麼？？----------------------->

由於我在這裏這樣作了，把echarts放在原型裏面了。因此格式纔是$echarts

       問題又來了，是把echarts寫進原型裏面了，可是爲何要加"this."------->

是否是能夠這樣想：寫進原型，就至關於給原型加了一個這個熟悉呢：$echarts，想要去用的時候，確實是這樣調用的「this.$echarts」

     可是，我只是單純的想用一下echarts，還不想涉及到面向對象的東西。我該怎麼作？

首先確定是要引進echarts的。

二、接下來？

知識盲區：引用echarts:

經過百度：兩種方式

A：首先在main.js中引入echarts，將其綁定到vue原型上：

//  在main.js中進行全局引用
import echarts from 'echarts'
Vue.prototype.$echarts = echarts複製代碼

B：在哪裏用就在哪裏引用（並非一來就在Main.js中調用）

const echarts = require('echarts');

 或者 

import echarts from "echarts"複製代碼

三、不寫在原型上的完整代碼

<template>  
  <div id="box" :style="{width:'500px',height:'500px'}"></div>
</template>
<script>

import echarts from "echarts"
export default {  
    name: "hello",  
    data() {    
    return {      
        msg: "Welcome to Your Vue.js App"    
        };  
    },  
    mounted() {    
    this.drawLine();  
    },  
    methods: {    
        drawLine() {       
      //基於準備好的dom，初始化echarts實例      
        let myChart = echarts.init(document.getElementById("box")); //繪製圖表      
        myChart.setOption({        
            title: { text: "在Vue中使用echarts" },        
            tooltip: {},// 懸停效果        
            xAxis: {          
           data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]// x軸數據         
     },        
           yAxis: {},//  y軸數據        
           series: [          
            {            
               name: "銷量",            
               type: "bar",// 條狀            
               data: [5, 20, 36, 10, 10, 20]// y軸數據          
            }        
           ]      
         });    
        }  
      }
};
</script>
<style>
</style>複製代碼

總結

剛把爹! 好吧!