• 前端学习之：Vue 中使用 element UI 和 echarts 创建组件的步骤（echarts 的全局使用和组件内使用）

    文章目录

    ElementUI

    安装 element UI

    • 在终端输入
    npm install element-ui -S

    • 1

    在 main.js 中导入

    全局引入

    import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

    • 1
    • 2

    在这里插入图片描述

    按需引入

    官网错误
      1. 在最新的 Vue 脚手架中已经不使用 .bablerc 的配置文件，因此下面的命令你是找不到的
        在这里插入图片描述
      1. 配置项中的 es2015 也是不对的
    正确操作
    找到 bable.config.js 文件

    在这里插入图片描述

    先将官网的内容粘贴上去

    在这里插入图片描述

    改正 es2015 这个配置项

    在这里插入图片描述

    Echarts

    安装 echarts

    npm install echarts -S

    • 1

    使用 echarts

    全局引入和使用

    在 main.js 中全局引入 echarts
    import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

    • 1
    • 2

    在这里插入图片描述

    结合echarts创建一个 Vue 的图片展示组件
    template
    <template>
    <el-row>
        <el-col offset="3" type="flex" >
          
          
            <div style="width:1200px; height: 800px; " ref="chart">
            div>
        el-col>
    el-row>
template>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    script
    <script>
    export default {
        name: "SummaryChart",
        // 使用 mounted 生命周期函数来调用这个函数
        // 不懂得 mounted 和其他生命周期函数的同学可以去下方链接的视频
        mounted(){
            this.createEcharts();
            
        },
    methods: {
    	// 方法中定义图表创建函数
        createEcharts(){
        // 通过全局的方式时，一定要用 $ref 来定位容器 然后用 echarts 的方式初始化容器
            var myChart = this.$echarts.init(this.$refs.chart)

			// 最重要的配置：这里的数据决定了最终图表的显示
            var option = {
					 tooltip: {
					    trigger: 'axis',
					    axisPointer: {
					      // Use axis to trigger tooltip
					      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
					    }
					  },
					  legend: {},
					  grid: {
					    left: '3%',
					    right: '4%',
					    bottom: '3%',
					    containLabel: true
					  },
					  xAxis: {
					    type: 'value'
					  },
					  yAxis: {
					    type: 'category',
					    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					  },
					  series: [
					    {
					      name: 'Direct',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: [320, 302, 301, 334, 390, 330, 320]
					    },
					    {
					      name: 'Mail Ad',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: [120, 132, 101, 134, 90, 230, 210]
					    },
					    {
					      name: 'Affiliate Ad',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: [220, 182, 191, 234, 290, 330, 310]
					    },
					    {
					      name: 'Video Ad',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: [150, 212, 201, 154, 190, 330, 410]
					    },
					    {
					      name: 'Search Engine',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: [820, 832, 901, 934, 1290, 1330, 1320]
					    }
					  ]
					};


			// 一些常规操作
            myChart.setOption(option)
            window.addEventListener("resize", () => {
            myChart.resize();
            });

        }
    },
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113

    局部的引入和使用

    不同于全局使用的地方
    • 不需要在 main.js中引入
    • 直接在创建组件的 vue 文件中引用即可
    • 在 template 中的容器不需要用 ref 进行唯一标识，可以用 id 进行标识
    • 使用的时候可以直接用 echarts. xxx 来调用初始化方法
    • 用 echarts 对容器初始化的时候可以对应的用 getElementById 来定位容器
    template
    <template>
    <el-row>
        <el-col offset="3" type="flex" >
          
            <div id="chart" style="width:1200px; height: 800px; " >
            div>
        el-col>
    el-row>
 
template>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    script
    <script>
	// 直接在组件代码中引入 echarts 库
    import * as echarts from 'echarts'
    export default {
        name: "SummaryChart",
        mounted(){
            this.createEcharts();
            
        },
    methods: {
        createEcharts(){
        // 可以通过 echarts.init 的方法初始化容器
        // 容器也可以通过 getElementById 的方式拿到
            var myChart = echarts.init(document.getElementById('chart'))

            var option = {
					 tooltip: {
					    trigger: 'axis',
					    axisPointer: {
					      // Use axis to trigger tooltip
					      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
					    }
					  },
					  legend: {},
					  grid: {
					    left: '3%',
					    right: '4%',
					    bottom: '3%',
					    containLabel: true
					  },
					  xAxis: {
					    type: 'value'
					  },
					  yAxis: {
					    type: 'category',
					    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					  },
					  series: [
					    {
					      name: 'Direct',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: [320, 302, 301, 334, 390, 330, 320]
					    },
					    {
					      name: 'Mail Ad',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: [120, 132, 101, 134, 90, 230, 210]
					    },
					    {
					      name: 'Affiliate Ad',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: [220, 182, 191, 234, 290, 330, 310]
					    },
					    {
					      name: 'Video Ad',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: [150, 212, 201, 154, 190, 330, 410]
					    },
					    {
					      name: 'Search Engine',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: [820, 832, 901, 934, 1290, 1330, 1320]
					    }
					  ]
					};



            myChart.setOption(option)
            window.addEventListener("resize", () => {
            myChart.resize();
            });

        }
    },
}
</script>

<style>

</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116

    成果展示

    讨论

    为什么 Elmentui 使用的是 Vue.use() 而 echarts 使用的是 Vue.prototype= 呢？

    答案结论：在 Vue 生态内的插件用 Vue.use，生态外的插件引用使用 prototype，但这两种方法的底层实现是一样的，都是 prototype

    为什么 echarts 局部引用的时候可以用 id 直接访问 dom 而全局引用的时候要使用 ref？

    • 因为 ref 是 vue 提供的对底层 dom 元素的访问方法。当使用 Vue.prototype 把 echarts 挂在 Vue 原型上，当然要采用 vue 生态提供的方法，尽可能不要在这种情况下使用 js 的方式直接接触底层的 dom 元素。在某个范围内都要按照规则办事~
  • 相关阅读:
    gabse 8a基础语法概念问题
    关于hiveonSpark的错误问题
    第五篇 《随机点名答题系统》——抽点答题详解（类抽奖系统、在线答题系统、线上答题系统、在线点名系统、线上点名系统、在线考试系统、线上考试系统）
    electron 左上角图标 dev(开发环境)可显示 build(打包)后无法显示
    Sentinel的快速入门，三分钟带你体验流量控制
    SpringCloud 06 Ribbon
    纯前端 excel 导出
    abp vnext6.0.0
    Java学习----前端4
    【Linux】进程探秘
  • 原文地址：https://blog.csdn.net/qq_42902997/article/details/126794899