Echarts学习笔记1——echarts柱状图分析

谁借莪１个温暖的怀抱￠ 2022-05-10 16:42 301阅读 0赞

做数据可视化时，Echarts是很好用的。这里来一个学习笔记系列。

官网：[http://echarts.baidu.com/][http_echarts.baidu.com]

# 一、引用echarts #

Echarts可以用npm进行安装，也可以直接导入到web项目进行引用，博主采用了引用方式直接分析它的使用。

下载Echarts：[http://echarts.baidu.com/download.html][http_echarts.baidu.com_download.html]

导入相关js：

body里的内容如下：

<div id="main" style="width: 600px;height:400px;"></div>  
 <script type="text/javascript">  
        // 绘制图表。  
        echarts.init(document.getElementById('main')).setOption(\{  
      legend: \{\},  
      tooltip: \{\},  
      dataset: \{  
          // 提供一份数据。  
          source: \[  
              \['product', '2015', '2016', '2017'\],  
              \['Matcha Latte', 43.3, 85.8, 93.7\],  
              \['Milk Tea', 83.1, 73.4, 55.1\],  
              \['Cheese Cocoa', 86.4, 65.2, 82.5\],  
              \['Walnut Brownie', 72.4, 53.9, 39.1\]  
          \]  
      \},  
      // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。  
      xAxis: \{type: 'category'\},  
      // 声明一个 Y 轴，数值轴。  
      yAxis: \{\},  
      // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。  
      series: \[  
          \{type: 'bar'\},  
          \{type: 'bar'\},  
          \{type: 'bar'\}  
      \]  
        \});  
         
 </script>

结果图：

![70][]

# 二、echarts柱状图分析 #

## 1，init渲染 ##

首先echarts通过js找到id为main的div，通过init(document.getElementById('main'))对该框进行渲染。到这一步是没有任何显示的。

真正起作用的事setOption方法。

让我们来看下init 的api：

(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
        devicePixelRatio?: number
        renderer?: string
        width?: number|string
        height? number|string
    }) => ECharts

dom就是指一个dom对象，像document.getElementById('main'))；

theme的话可以设置主题，比如增加一个theme属性：echarts.init(document.getElementById('main'),'dark')，界面变为：

![70 1][]

对于theme而言，dark和light一般是有的，其他的主题就得找一找咯

opts和theme一样是可选的，用来显示指定实例相关属性。

## 2，setOption ##

setOption是这段代码的核心，设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过`setOption`完成。ECharts 会合并新的参数和数据，然后刷新图表。如果开启[动画][Link 1]的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

调用setOption方法：

chart.setOption(option, {
        notMerge: ...,
        lazyUpdate: ...,
        silent: ...
    });

option:图表的配置项和数据；notMerge：可选，是否不跟之前设置的`option`进行合并，默认为`false`，即合并。；lazyUpdate：可选，在设置完`option`后是否不立即更新图表，默认为`false`，即立即更新。silent：可选，阻止调用 `setOption` 时抛出事件，默认为`false`，即抛出事件。

像代码中的xAxis: \{type: 'category'\}, 这些部分，都属于opts的部分，还有dataset也属于option的内容。

配置项API：[http://echarts.baidu.com/option.html\#xAxis][http_echarts.baidu.com_option.html_xAxis]

### （1）title ###

以title为例，如果在option选项中加入 ：

title:\{text:\[  
                'bars1','bars2','bars3'  
            \]\},

则会在页面上显示标题：

![70 2][]

### （2）xAxis ###

这个属性是用来设置x轴的

重点看一下type这个属性：

*  `'value'` 数值轴，适用于连续数据。
 *  `'category'` 类目轴，适用于离散的类目数据，为该类型时必须通过 [data][] 设置类目数据。正常显示：
 *  `'time'` 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
 *  `'log'` 对数轴。适用于对数数据。

默认是value

在选择展示数据的方式时，需要选择一下。

### （3）**series** ###

系列列表。每个系列通过 `type` 决定自己的图表类型

type: 'bar' 决定了展示方式未bar

serial有三个type为bar的图形，表示dataset中的3列数据；xAxis: \{type: 'category'\}表示有x轴为一个类别，因此类别是需要赋值的，因此拿走了dateset中的第一列数据。所有dataset的展示方式为第一列表示类别，2-4列分别表示每一个类别的条形图高度。

[http_echarts.baidu.com]: http://echarts.baidu.com/
[http_echarts.baidu.com_download.html]: http://echarts.baidu.com/download.html
[70]: /images/20220505/94402dc0414c4a67b35231a9a804a212.png
[70 1]: /images/20220505/841100717a4e4d9baafb23353f93f931.png
[Link 1]: http://echarts.baidu.com/api.html#option.html%23option.animation
[http_echarts.baidu.com_option.html_xAxis]: http://echarts.baidu.com/option.html#xAxis
[70 2]: /images/20220505/df37b9671d274619926db36cd9494045.png
[data]: http://echarts.baidu.com/option.html#xAxis.data