在Vue中引入echarts

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第25天，点击查看活动详情。

echarts优缺点

echarts的优点：

• 国人开发，文档全，便于开发和阅读文档。
• 图表丰富，可以适用各种各样的功能。 echarts的缺点：
• 移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定有些问题。
• echarts不失为一款比较适合我们这种码农使用的框架。
• echarts就不贴代码了。毕竟文档很全。

首先我们初始化一个vue项目，执行vueinitwebpackechart,接着我们进入初始化的项目下。安装echarts npm

npm install echarts -S//或

cnpm

cnpm install echarts -S

安装完成之后，就可以开始引入我们需要的echarts了，接下来介绍几种使用echarts的方式。 全局引用：

首先在main.js中引入echarts，将其绑定到vue原型上：

import echarts from 'echarts' 
Vue.prototype. $echarts = echarts;

然后我们就可以在任何一个组件中使用echarts了。 局部使用： 当然，很多时候没必要在全局引入ecahrts，那么我们只在单个组件内使用即可，代码更加简单：

<template>
    <div>
        <div style="width:500px;height:500px"ref="chart"></div>
    </div>
</template>
<script>
    const echarts = require('echarts');
    export default{
            data(){
                return{};
            },
            methods:{
                initCharts(){
                let myChart = echarts.init(this.$refs.chart);
                //绘制图表
                myChart.setOption({
                title:{text:'在Vue中使用echarts'},
                tooltip:{},
                xAxis:{
                    data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis:{},
                series:[{
                    name:'销量',
                    type:'bar',
                    data:[5,20,36,10,10,20]
                }]
            });
        }
    },
            mounted(){
                this.initCharts();
            }
    }
</script>

能够看到，我们直接在组件内引入echarts，接下来跟全局引入的使用一样。区别在于，这种方式如果你想在其他组件内用echarts，则必须重新引入了。

echarts有哪些图表工具

折线图（区域图）、 柱状图（条状图）、 散点图（气泡图）、 K线图、饼图（环形图） 雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图

切换其他组件统计图时，出现卡顿问题如何解决（必会）

原因：

每一个图例在没有数据的时候它会创建一个定时器去渲染气泡，页面切换后，echarts图例是销毁了，但是这个echarts的实例还在内存当中，同时它的气泡渲染定时器还在运行。这就导致echarts占用CPU高，导致浏览器卡顿，当数据量比较大时甚至浏览器崩溃

解决方法：

在mounted()方法和destroy()方法之间添加一个beforeDestroy()方法释放该页面的chart资源，clear()方法则是清空图例数据，不影响图例的resize，而且能够释放内存，切换的时候就很顺畅了beforeDestroy(){this.chart.clear()}