vue中引入echarts并实现echarts自适应

vue中引入echarts并实现echarts自适应

在许多项目中需要使用到柱状图、饼状图等，在本篇博客中介绍echarts的自适应。

实现echarts的自适应可以使用window.onresize()，具体操作如下：

npm安装echats：

npm install echarts --save

在使用echarts的页面引入echarts

let echarts = require('echarts/lib/echarts')
//根据需要引入相应图的组件
require('echarts/lib/chart/bar')//柱状图
require("echarts/lib/chart/lines")//折线图
require('echarts/lib/chart/pie')//饼状图
require("echarts/lib/component/toolbox")//上方可以下载图片、刷新等工具栏
require('echarts/lib/component/title')//标题

页面上创建容纳echarts的盒子

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

在js中的操作

//data
data(){
    return {
        myChart: {},
        myChartPie: {}
    }
}
//methods 初始化echarts
methods: {
drawChart() {
    let idx = 1
    let myChart = echarts.init(document.getElementById('myChart'))
    let myChartPie = echarts.init(document.getElementById('myChartPie'))
    myChart.setOption({...})
    myChartPie.setOption({...})
    return { myChart: myChart, myChartPie: myChartPie }
}
//mounted 挂载后执行
mounted() {
        let echarts = this.drawChart()
        this.myChart = echarts.myChart
        this.myChartPie = echarts.myChartPie
        window.onresize = () => {
            // 这里使用箭头函数，避免this指向问题
            this.myChart.resize()
            this.myChartPie.resize()
        }
    }