仍旧还是学妹给的封面

间接进入主题...在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）

起因有以下两点：

  1. 版本起因，你搜寻到的博客应用的不肯定是最新的版本，技术的迭代在当初真的是十分快的。
  2. 其次博客内容真的很少有像官网文档那种写的非常齐备的，另外在写的过程中，大多数作者（包含我本人）更多的是会贴出本人认为非常外围的货色，对于一些十分细的货色，非常有可能会被疏忽掉。

入手尝试

  1. 看完文档，不应该立刻利用到现用的我的项目，最佳的形式应该是写上个demo，看看成果如何（集体想法）
  2. 纸上得来终觉浅，绝知此事要躬行。

完事了完事啦