在vue中使用的Echarts的步驟

1、首先在項目中安裝Echarts　

npm install echarts -g --save    //安裝

2、在項目中引入Echarts（在main.js中引入）

import echarts from 'echarts'  //引入Echarts，

Vue.prototype.$echarts = echarts  //定義為全局變量

3、使用並繪制簡單表格（承載畫布的div必須要定義大小width、height）

<template>
  <!--
  ref="myechart"定義該div也就是畫布的名字，在this.$echarts.init(this.$refs.myechart) 圖表初始化的時候使用
  this.$refs.myechart 也可以替換為 document.getElementById('main') 或者 document.getElementByClassName('echart-box')
  -->
    <div class="HelloWorld echart-box" ref="myechart" id="main"></div> 
</template>
<script>

  export default {
    name:'HelloWorld',
    data(){
      return{
        // 定義圖表，各種參數
        option:{  
          backgroundColor:"lightblue",
          title:{
            backgroundColor:"lightyellow",
            show:true,
            text:"測試練習",
            textStyle:{
              fontSize:25,
              fontWeight:900,
              color:'red',
            },
            subtext:'測試小標題',
            subtextStyle:{
              color:'green',
              fontSize:20,
              fontWeight:600
            }
          },
          xAxis:{
            type:"category",
            data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日",]
          },
          yAxis:{
            type:"value",
          },
          series:[
            {
              data:[50,54,82,97,150,240,68],
              type:"line"
            },
            {
              data:[20,58,34,108,250,150,300],
              type:"line"
            }
          ]
        }
      }
    },
    mounted:function(){
      console.log(this.$echarts)
      let myechart = this.$echarts.init(this.$refs.myechart) //初始化一個echarts
      myechart.setOption(this.option)  //setOption 用this.option中的數據開始作圖

    }
   
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.HelloWorld{   //注意畫布必須定義大小
  width: 1000px;
  height:600px;
  background: #cce6f0;
  margin: 0 auto;
}
</style>