echarts在vue中的基本使用流程

第一部分：关于echarts在html页面vue中的使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.js"></script>
</head>

<body>
<div id="app">
    <div>
        <div ref="chart" style="width:50%;height:376px"></div>
    </div>
</div>
</body>
<script>
  new Vue({
      data(){
        return {
           option:{...},
        }
      },
      methods:{
         getEchartData(){
            const chart = this.$refs.chart
            if (chart) {
               const myChart = echarts.init(chart)
               myChart.setOption(this.option)
               //适配 
               window.addEventListener("resize", function() {
                   myChart.resize()
               })
               // 取消适配
               window.removeEventListener("resize", function() {
                   myChart.resize()
               })
             }
          },
      },
        mounted(){
            this.getEchartData()
        }
    }).$mount('#app')

第二部分：echarts在vue中的使用流程

第二部分知识小点:适配器

window.onresize = function(){
   myChart.resize();
}

使用流程:echarts在vue中的使用流程

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
    <div ref="chart"  style="width:50%;height:376px"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
     return {
       option:{
         xAxis: {
           type: 'category',
           boundaryGap: false,
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
         },
         yAxis: {
           type: 'value'
         },
         series: [
           {
             data: [820, 932, 901, 934, 1290, 1330, 1320],
             type: 'line',
             areaStyle: {}
           }
         ]
       },
     }
    },
     methods:{
        getEchartData(){
           const chart = this.$refs.chart
           if (chart) {
              const myChart = window.echarts.init(chart)
              myChart.setOption(this.option)
              //适配 
              window.addEventListener("resize", function() {
                  myChart.resize()
              })
              // 取消适配
              window.removeEventListener("resize", function() {
                  myChart.resize()
              })
            }
         },
     },
     mounted(){
         this.getEchartData()
     }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

第三部分:注意事项

在打开页面之后更新echarts的数据想要页面跟着渲染需要调用配置项

将配置项设置给echarts实例对象
mCharts.setOption(option);

在我的第二部分使用方法中就是说必须调用此函数

 this.getEchartData()

echarts在vue中的基本使用流程

第一部分：关于echarts在html页面vue中的使用

第二部分：echarts在vue中的使用流程

第三部分:注意事项

猜你喜欢