记录在vue中使用echarts的方法

记录在vue中绘制echarts图表的步骤

第一步: 安装echarts

yarn add echarts

第二步: 在 main.js 引入, 挂载在 Vue的原型上

// 引入echarts 将echarts中所有暴露的变量放入变量名为echarts中
import * as echarts from 'echarts';

// 在Vue的原型上挂载echarts
Vue.prototype.$echarts = echarts

// 将来组件中使用:  this.原型上的属性名  -> this.$echarts

第三步: 准备放置echarts图表的容器(需要具备宽高, 宽默认是父级的100%)

<template>
  <div id="box" style="heigth: 400px;"></div>
</template>

第四步: 写配置

<script>
  
    export default {
        methods: {
            // 在方法中定义一个函数来画图表, 这里以折线图为例
            drawLine(xData, yData) {
                // 初始化
                const chart = this.$echarts.init( document.querySelector('#box') )
                
                // 写配置 [查官网 配合 百度 把配置粘贴进来 一定要多去尝试] 这里的配置是在官网复制的
                const option = { title: {
                      text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    legend: {
                      data: ['销量']
                    },
                    xAxis: {
                      data: xData // x轴的数据 就是动态的
                    },
                    yAxis: {},
                    series: [
                      {
                        name: '销量',
                        type: 'bar',
                        data: yData // y轴的数据就是动态的
                      }
                    ]
                }
                
                // 使用配置生成报表
                chart.setOption( option )
            }
        },
        // 生命周期 - 挂载完成后 由于echart初始化需要操作dom,因此在这个生命周期调用
        mounted() {
            // 发送ajax 获取到后端给的数据
            axios.get('url').then({
                let xData
                let yData
            })
            
            
            // 调用画折线图的函数 因为函数中要获取dom, 所有在mounted调用 
            this.drawLine(xData, yData)
        }
    }

</script>

记录在vue中使用echarts的方法

猜你喜欢