Echarts的编写主要采用了面向对象的编写方式。所以很多Api都遵循面向对象的一些特性。

下载Echarts

官网教程

开始使用Echarts

  • Echarts全局导出一个echarts的对象。其实可以把它看做类。这个对象上面必使用的方法就是init方法，也就可以把这个init方法当作echarts这个类上的静态方法。init方法是用于初始化得到echartsInstance对象的。

    • 这个echartsInstance对象就相当于一个实例对象。跟单例模式对象有点像。
    • 下面有个例子：是在vue中进行编写的。得到的答案是true。这表明，如果参数一样，每次得到的echarts的实例对象也是一样的。不会因为调用的次数而发生变化的。这种模式就像单例模式。只不过，这里区分了参数。
      1. this.chart1 = this.$refs.chart1;
      2. this.chart2 = this.$refs.chart2;
      3. const myChart1 = init(this.chart1);
      4. const myChart3 = init(this.chart1);
      5. console.log(myChart1 === myChart3); // true

  • 得到实例对象以后：

    • echarts完全通过参数配置来解决展示。遵循数据驱动视图的思想。所以，得到的实例对象上有很多的方法。用于干各种各样的事情，其中最重要的方法就是setOption方法，它的作用就是把刚才生成的echarts实例对象通过这个方法的配置和调用，用于展示到页面中具体的数据。直白的来说，这个就是来设置页面中展示的样式和数据的。
    • 并且，最终的是，因为echarts实例对象是一个，但是实例之后，并不知道展示的类型与数据格式，所以，echarts提供的所有的展示的相关配置都在这一个方法里面。我们主要学习的也是如果的配置这个方法的参数用于展示不同的类型的图标以及数据。
  • 下面有一个简单的例子：myCharts1是生成的实例对象。调用setOption就是让这个实例对象怎么展示而已。每个参数配置的图标的位置不一样，表示的意义也不一样。 ```typescript // 这是柱状图 myChart1.setOption({
    1. title: {
    2.   text: '柱状图',
    3. },
    4. // 图例的配置
    5. legend: {
    6.   data: ['销量'],
    7. },
    8. // x轴的配置
    9. xAxis: {
    10.   data: ['衬衫', '羊毛衫', '雪纺衫', '格子衬衫', '内裤', '袜子'],
    11. },
    12. // y轴的配置,不给会报错，会自动的去算。
    13. yAxis: {},
    14. // 系列列表。可以放很多系列的数据
    15. series: [
    16.   {
    17.     name: '销量',
    18.     type: 'line', // 图标的类型
    19.     data: [5, 123, 2, 3451, 5, 16, 5], // 图标的数据
    20.   },
    21.   {
    22.     name: '剩余件数',
    23.     type: 'bar', // 图标的类型
    24.     data: [5, 123, 2, 3451, 5, 16, 5], // 图标的数据
    25.   },
    26. ],
    });

``` image.png