共计 2609 个字符，预计需要花费 7 分钟才能阅读完成。
仍旧还是学妹给的封面
间接进入主题 … 在 vue 中应用个啥，都差不多是一个流程。
引入 Echarts
装置
npm install echarts --save咱们写一个 Echarts 组件，在内进行引入
import * as echarts from 'echarts'入门应用
如果之前没有接触过 Vue 或者 Echarts 的小伙伴，理解形式无疑就是 Echarts 官网文档或各大搜索引擎了。
我的理解形式无疑也是这个，然而我在看官网文档的时候，感觉官网给的那个例子，有点点不合乎 Vue 的格调，不过我先贴出来，实现最简略的入门：
<template>
<div id="echarts" style="width: 600px; height: 600px"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {mounted() {this.createEcharts();
},
methods: {createEcharts() {
// 基于筹备好的 dom，初始化 echarts 实例
var myChart = echarts.init(document.getElementById("echarts"));
// 绘制图表
// 最重要的就是了解各个配置的作用吧，这个没啥说的 就算游刃有余
myChart.setOption({
title: {text: "ECharts 入门示例",},
tooltip: {},
xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
}
}
};
</script>
将这个组件，在 app 组件中进行引入即可，咱们来看看初始成果是如何的。
问题
1）从 DOM 操作改为 ref
不晓得你们有没有发现问题所在：
官网文档中它是间接对于 dom 进行操作的document.getElementById("echarts")，这和 Vue 的理念其实是不一样的。
在 vue 中咱们要做到尽可能减少间接对 dom 的操作，那么在这里咱们能够如何改良勒？？
咱们明确一下 document.getElementById("echarts") 取得的是什么即可了。这里无疑就是取得了节点信息，打印进去能够看到 console.log(document.getElementById("echarts"));
那么咱们就只有用 vue 的形式获取到这个节点信息即可，因而能够应用 vue 中的 ref 属性来实现。
<div id="echarts" ref="myEcharts" style="width: 600px; height: 600px"></div>
console.log(this.$refs.myEcharts);咱们输入来看一下好吧
和咱们之前获取到的是截然不同的哈。
为了更合乎 Vue 中的形式，咱们再将这个案例改的更加灵便些：
<template>
<div ref="myEcharts" style="width: 600px; height: 600px"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {data() {
return {
myEcharts: null,
option:{
title: {text: '一般图表'},
tooltip: {},
xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}
},
methods: {initChart() {this.myEcharts = echarts.init(this.$refs.myEcharts);
this.myEcharts.setOption(this.option);
}
},
mounted () {this.initChart()
}
}
</script>这样子才像 vue 中的写法哈。
2）优化思路
1、如果咱们在我的项目中要用到多种款式的图，那么间接引入也不是不能够的，然而如果仅仅只是应用了折线图或者柱状图这种，那么还是倡议大家采纳按需引入的形式，那样我的项目打包体积会更小一点。
官网文档介绍的按需引入
2、另外就是咱们能够将 echarts 封装成组件，这样是最佳的形式吧，将所有都动态化。
集体小小见解，仅思考优化应用形式，并非是性能上的。如有有余，请及时指出，非常感谢。
这是最简略的柱状图哈，晓得大家的需要都是不一样的，上面讲讲该如何学习。
多种多样的图表
在官网文档中，有十分十分多的案例，就算咱们什么都不会，cv 大法一出，也是能够轻松用起来的哈。
官网示例
并且点进每个图表都是有外围代码的。
所谓的外围代码就是 option 中的各种配置项。对于每一项配置项官网也给了具体介绍。
数据的那一栏就是data，其余的都是配置项，不过如何渲染还是看大伙们的业务是啥。
点顶部菜单中的文档那一栏，就有一个配置项手册
最罕用的几个配置项应该下图中这个了吧，俗称的九大配置项。
如果想要疾速了解的话，倡议间接点击一个简单点的官网示例图中，而后拿着配置手册查一查，了解很快的，我认为这种形式应该是最简略的啦吧。
授人以鱼，不如授之以渔
因为不同的业务，可能会产生不一样的需要，所以更多的咱们是须要学会如何去学习。
用 Echarts 能够画那么多种图，我不可能每个都作出一个小 Demo 给大家，而且大家的数据都不一样，也就抄不了作业吗，所以咱们罗唆聊聊如何去学会玩这种玩意。
看官网文档在我认为永远是理解它的最快形式。（兴许大家会说为啥不是看各种博客，或者间接百度、Google）
起因有以下两点：
- 版本起因，你搜寻到的博客应用的不肯定是最新的版本，技术的迭代在当初真的是十分快的。
- 其次博客内容真的很少有像官网文档那种写的非常齐备的，另外在写的过程中，大多数作者（包含我本人）更多的是会贴出本人认为非常外围的货色，对于一些十分细的货色，非常有可能会被疏忽掉。
入手尝试
- 看完文档，不应该立刻利用到现用的我的项目，最佳的形式应该是写上个 demo，看看成果如何（集体想法）
- 纸上得来终觉浅，绝知此事要躬行。
完事了完事啦