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="{ '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
（支持换行）",
          link: 'https://www.baidu.com/',
          textStyle:{
            color: '#333'
          },
          subtext: '我是echarts的副标题
（也支持换行）', // 其他属性和 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>

  以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！