vue項目實戰：echarts的使用 和 按鈕權限 自定義指令的使用

<!--
 * @Description: 首頁 dashboard/index.vue
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-06-12 09:15:41
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-20 17:34:57
--> 
<!--  -->
<template>
  <div class="dashboard-content-box">
    <div class="section-one">
      <h1>按鈕權限測試</h1>
      <div class="permit-btn">
        <el-button type="primary" size="mini" v-permission="['100000801']">新增（其他一樣用法）</el-button>
        <el-button type="primary" size="mini">修改{{startDate}}</el-button>
        <el-button type="primary" size="mini">編輯{{testDate}}</el-button>
      </div>
      <div>
        <img :src="imgUrl" @error="handleError" alt />
      </div>
      <div id="myChart" :style="{width: '800px', height: '400px'}"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    //這裡存放資料
    return {
      imgUrl:
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg",
      startDate: new Date().Format("yyyy-MM-dd hh:mm:ss"),
      testDate: new Date().Format("yyyy年MM月dd日"), // 2020年08月12日
    };
  },
  created() {},
  mounted() {
    this.drawLine();
  },
  methods: {
    handleError(e) {
      e.target.src = reqiure("@/assets/logo.png"); // 有些時候背景傳回圖檔位址不一定能打開,是以這個時候應該加一張預設圖檔（或者通過配置 transformToRequire 後，就可以直接配置）
    },
    // 繪圖
    drawLine() {
      // 基于準備好的dom，初始化echarts執行個體 ---- 以下的配置彙聚了基本的 echarts 在項目中的需求具體參照官網
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 圖表配置
      let options = {
        title: {  
          show: true, // 是否顯示标題元件 
          text: "Vue中使用echarts的demo\n（支援換行）",
          link: 'https://www.baidu.com/',
          textStyle:{
            color: '#333'
          },
          subtext: '我是echarts的副标題\n（也支援換行）', // 其他屬性和 text有的 一樣
          textAlign: 'auto', //  整體（包括 text 和 subtext）的水準對齊 'auto'、'left'、'right'、'center'
        },
        // 圖例元件
        legend: {
          show: true, // 是否顯示圖例
          type: 'plain', //  'plain'：普通圖例。預設就是普通圖例。 'scroll'：可滾動翻頁的圖例。當圖例數量較多時可以使用。
          orient: 'vertical', // 圖例清單的布局朝向 水準的 'horizontal'  垂直的 'vertical'
          align: 'left',  // 'auto' 'left' 'right'
          padding: 5, // 圖例内邊距 間距大小 也可以是一個數組[5,5,5,5]
          itemGap: 5, // 圖例每項之間的間隔。橫向布局時為水準間隔，縱向布局時為縱向間隔。
          itemWidth: 40, // 圖例标記的圖形寬度
          itemHeight: 20, // 圖例标記的圖形高度
          // 使用回調函數
          formatter: function (name) {
            return '圖例 ' + name;
          }
        },
        toolbox: {
          show: true, // 是否顯示工具欄元件
          feature: {
            dataView: {
              //資料視圖
              show: true,
            },
            restore: {
              //重置
              show: true,
            },
            dataZoom: {
              //資料縮放視圖
              show: true,
            },
            saveAsImage: {
              //儲存圖檔
              show: true,
            },
            magicType: {
              //動态類型切換
              type: ["bar", "line"],
            },
          },
        },
        // 提示框元件。滑鼠移上去展示的效果
        tooltip: {
          show: true, // 是否顯示提示框元件，包括提示框浮層和 axisPointer。
          formatter: function (params) {
            console.log(params, "params");
            return `<div class="showBox">${params.seriesName}：${params.name}---${params.value}</div>`;
          },
        },
        // 直角坐标系 grid 中的 x 軸 的配置
        xAxis: {
          show: true, // 是否顯示
          // 坐标軸類型  'value' 數值軸，軸上的是數字 'category' 類目軸 series.data 或 dataset.source 中取，或者可通過 xAxis.data 設定類目資料。'time' 時間軸
          type: "category",
          position: "bottom", // 'top' ,預設 'bottom'
          name: "水果分類", // 坐标軸名稱
          nameLocation: "middle", // 坐标軸名稱顯示位置 'start' 'middle' 或者 'center'  預設：'end'
          // 坐标軸名稱的文字樣式
          nameTextStyle: {
            fontStyle: "italic", // 'normal' 'italic' 'oblique' 具體看 https://echarts.apache.org/zh/option.html#xAxis.nameTextStyle
          },
          nameGap: 20, // 坐标軸名稱與軸線之間的距離
          inverse: true, // 是否是反向坐标軸
          axisLine: {
            show: false, // 是否顯示x坐标軸軸線
            symbol: "none", // 軸線兩邊的箭頭
          },
          axisTick: {
            show: false, // 是否顯示坐标軸刻度線
            interval: "auto", // 坐标軸刻度的顯示間隔，在類目軸中有效。 number Function
            // 刻度線樣式
            lineStyle: {
              color: "#fff",
            },
            inside: true, // 坐标軸刻度是否朝内，預設朝外
          },
          // 坐标軸次刻度線相關設定
          minorTick: {
            show: false, // 是否顯示次刻度線
          },
          // 坐标軸刻度标簽的相關設定
          axisLabel: {
            show: false, // 是否顯示刻度标簽 刻度線資料（數字或者文字）不見了
          },
          // 網格線
          splitLine: {
            show: false, // 是否顯示分隔線。預設數值軸顯示，類目軸不顯示
          },
          // 類目資料，在類目軸（type: 'category'）中有效
          data: ["橙子", "橘子", "柚子", "榴蓮", "水蜜桃", "栗子"],
        },
        yAxis: {
          // 配置如同x軸 更多參考 https://echarts.apache.org/zh/option.html#yAxis
        },
        series: [
          {
            name: "銷量",
            type: "bar", // line 折線圖 bar 柱狀圖  pie 餅圖
            data: [15, 20, 37, 15, 8, 23],
          },
        ],
      };
      myChart.setOption(options);
    },
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css類
</style>