可视化图表 Echarts
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()}
