Vue项目使用echarts记录

---

前言

本博客仅做学习笔记，如有侵权，联系后即刻更改

科普：

---

全局引入echarts

// 全局引入echarts,从5.x版本后都使用该导入方式
//详细内容去echarts官网查看:
import * as echarts from 'echarts'

设置echarts为全局变量

在main.js中配置，要依据vue对象创建方式来设置
要在Vue实例创建后设置，例如：const Vue = createApp(App)后
vue对象创建方式是new Vue()，则使用

Vue.prototype.$echarts = echarts

vue创建方式是app = createAPP()，则使用

app.config.globalProperties.$echarts=echarts

脚手架@vue/cli 5.0.4使用的就是下面这种创建vue的方式

Vue组件中使用

1. <template要设置id标识，还有长宽参数

    <div id="myChart" :style="{width: '800px', height: '600px'}"></div>

2. <script要在mounted函数内挂载展示图
   只使用mounted函数

  mounted(){
    // 基于准备好的dom,初始化echarts实例
    let myChart = this.$echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption(option);
  }

使用mounted+methods调用

 mounted() {
    this.location();
  },
  methods: {
    location() {
      let myChart = this.$echarts.init(document.querySelector("#myChart"));
      // 绘制图表;
      myChart.setOption(option)
    }
  }

Vue对象mounted属性

1. mounted为Vue的生命周期函数的一个环节
2. 官方关于mounted解析
3. 我的理解：

• 在Vue实例被挂载后调用后，vm.$el替换el
• 调用mounted函数往dom节点内加入新的元素，如饼图等

与created的不同

mounted:

• 网页加载完成后执行
  执行顺序：子组件-父组件
• 挂载vue实例后的钩子函数，仅仅执行一次

created:

• 网页加载完成之前执行
  执行顺序：父组件-子组件
• 组件实例创建完成，dom还未生成，仅仅触发一次

组件调用完整示例

<template>
  <div>
    <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
  </div>
</template>

<script>

export default {
  name: 'Echarts',
  //钩子函数挂载展示图
  mounted(){
    // 基于准备好的dom,初始化echarts实例
    let myChart = this.$echarts.init(document.getElementById('myChart'))

    // 绘制图表
    myChart.setOption(option);
  }
  // mounted() {
  //   this.location();
  // },
  // methods: {
  //   location() {
  //     let myChart = this.$echarts.init(document.querySelector("#myChart"));
  //     // 绘制图表;
  //     myChart.setOption(option)
  //   }
  // }
}

const option ={
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
}
</script>

示例运行截图

总结

小小励志

有些事你现在不做，一辈子都不会做了。
如果你想做一件事，全世界都会为你让路。
《搭车去柏林》