笔记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>复制代码

总结

刚把爹! 好吧!