<template>
<!-- 定義echarts需要控制的dom元素 -->
  <div  :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/dark') // echarts主題
//....后面就是配置vue的方法和圖標(biāo)樣式,我打算拿出開單獨(dú)講解
</script>

export default{
	//方法和變量
}

  data() {
    return {
      chart: null,// echarts實(shí)例
      chartData: '',// 圖表數(shù)據(jù)
      height: '250px',//設(shè)置默認(rèn)高度
      width: '50%',//設(shè)置默認(rèn)寬度
    }
  },

  watch: {//監(jiān)聽數(shù)據(jù)變化
    chartData: {
      deep: true,//深度監(jiān)聽
      handler(val) {
        this.setOptions(val)//重新繪制圖表數(shù)據(jù)
      }
    }
  },

  mounted() {
    // dom元素加載完成后執(zhí)行
    this.$nextTick(() => {
      // 初始化echarts實(shí)例
      this.initEcharts()
    })
  },

methods: {
	initEcharts(){},
	setOptions({expectedData,actualData}){},
}

    initEcharts() {
      // 定義一個(gè)圖表數(shù)據(jù)
      this.chartData={
        expectedData:[190, 100, 10, 9, 170, 110, 160],
        actualData:[120, 200, 150, 80, 70, 110, 130]
      }
      //參數(shù)一:this.$el指向當(dāng)前組件template模板中的根標(biāo)簽(在mounted生命周期中才有效)
      //參數(shù)二:echarts主題顏色
      this.chart = echarts.init(this.$el, "dark")
      this.setOptions(this.chartData)
    },

setOptions({expectedData,actualData}) {
      var option={//setOption方法可以接受一個(gè)對(duì)象作為參數(shù)更多配置參數(shù)可以參考官網(wǎng)
        title: {//標(biāo)題組件
          text: 'ECharts 入門示例'
        },
        tooltip: {//提示框組件
          trigger: 'axis'//坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會(huì)使用類目軸的圖表中使用,還有'item'，'none'
        },
        legend: {//圖例組件
          data: ['預(yù)期', '實(shí)際']
        },
        grid: {//直角坐標(biāo)系內(nèi)繪圖網(wǎng)格
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {//工具欄。內(nèi)置有導(dǎo)出圖片，數(shù)據(jù)視圖，動(dòng)態(tài)類型切換，數(shù)據(jù)區(qū)域縮放，重置五個(gè)工具。
          feature: {
            saveAsImage: {},//保存為圖片。
            dataView: {},//數(shù)據(jù)視圖工具，可以展現(xiàn)當(dāng)前圖表所用的數(shù)據(jù)，編輯后可以動(dòng)態(tài)更新。
          }
        },
        xAxis: {//直角坐標(biāo)系 grid 中的 x 軸
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {//直角坐標(biāo)系 grid 中的 y 軸
          type: 'value'
        },
        series: [//圖表類型
          {
            name: '預(yù)期',
            type: 'line',
            stack: '總量',
            data:  expectedData,//對(duì)象內(nèi),解析出來(lái)的參數(shù)
          },
          {
            name: '實(shí)際',
            type: 'line',
            stack: '總量',
            data: actualData,//對(duì)象內(nèi),解析出來(lái)的參數(shù)
          }
        ]
      }
      this.chart.setOption(option)
    }

<script>
    //引入模板
	import TestTemplate from "./dashboard/TestTemplate"
<script>

export default {
  components: {
    //添加模板到組件
    TestTemplate
  },
  data() {
    return {
    }
  },
}

<test-template></test-template>

 <test-template :chart-data="LineChartData"></test-template>

  //接收父組件傳遞的參數(shù)
  props: {
    chartData: {//接收父組件傳遞的參數(shù)名稱
      type: Object,//父組件傳遞的數(shù)據(jù)類型
      required: true //表示必須傳遞
    }
  },