Vue+echarts

vue-echarts

官方的 Echarts for vue.js

安装 echarts vue-echarts

v-echarts

饿了么 官方换图库 解决数据传入转换

绘制会比较快

echarts

简单使用： 首先应该明确Echarts图形必须满足四项刚性条件才可以绘制：

准备一个具有宽高的容器（container）； 每次绘制之前需要初始化（init）； 必须设置配置，否则无从绘制（option）； 改变数据时必须传入改变的数据，否则监听不到新数据（setOption）； 四步缺一不可，可以简单理解为日常生活中娶媳妇：

找到适合结婚的女朋友（container）； 认识一段时间之后确定关系（init）； 确定关系之后需要买买买，她才会跟你继续交往（option）； 关系进一步升温之后就可以把他娶回家了（setOption）； 使用：

 <!-- 准备具有宽高的容器 -->
 <div style="width: 100%; height: 100%" ref="chart"></div>


<script>
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
require('echarts/lib/chart/bar'); //按需引入 bar = 柱状图
export default {
    data() { return { chart: null } }, //图表实例
    mounted() { this.init() },
 methods: {
        init() {
 //2.初始化
 this.chart = Echarts.init(this.$refs.chart);
 //3.配置数据
 let option = {
 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, //X轴
 yAxis: { type: 'value' }, //Y轴
 series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] //配置项
            };
 // 4.传入数据
 this.chart.setOption(option);
        }
    }
};
</script>

自适应窗口大小： 为了兼容性，需要做到每个图表根据屏幕变化而自适应宽高

单个 / 多个图表均生效： mounted() { window.addEventListener(‘resize’, () => { this.chart.resize(); }); }