echart 图绘制--基础使用

你的名字 2022-11-12 14:58 314阅读 0赞

### 文章目录 ###

*  学习echart 简单绘制图像
 *   *  如何使用echart
     *  如何查阅文档
     *   *  文档内容解析
         *   *  1. 文档重要组成部分
             *  2. 图例选择
             *  3. 坐标系设置
             *  4. 主图与组件
             *  5. 组件参数
     *  如何借阅别人的思想

# 学习echart 简单绘制图像 #

1.  本文旨在讲述如何基础使用echart并系统性理解echart的文档参数
2.  仔细阅读本文，能够从`渔`的方式学习echart图的绘制

## 如何使用echart ##

1.  引入echart js 文件
    
        import * as echarts from 'echarts';
2.  初始化echart 并绑定在DOM树中
    
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
3.  设置option参数，定义所需绘制的图型
    
        let option = {
              
            xAxis: {
              
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              
                type: 'value'
            },
            series: [{
              
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }]
        };
4.  引入数据变化，图形就正常显示出来了
    
        myChart.setOption(option);
5.  [完整代码][Link 1]

## 如何查阅文档 ##

1.  文档的大部分内容都是关于 `option 参数` 也就是配置项，地址在[这里][Link 2]
2.  其他部分本文暂不介绍

### 文档内容解析 ###

#### 1. 文档重要组成部分 ####

1.  必须的 series 参数，用于设置绘制图形的种类，比如 line 是折线图，bar 是柱状图
2.  组件类，用于丰富图像显示或实现其他操作(使得图形变化)，例如可以拖动时间轴查看不同时间段的数据，标题，图例等等
3.  坐标类，比如是XY轴坐标，还是极坐标等等
4.  全局设置类，这类参数通常是通用的，如设置背景颜色，动画效果
5.  点击[这里][Link 3]，查看全部种类的基础设置

#### 2. 图例选择 ####

1.  前往[官网][Link 4]选择你想要的图例， 点击查看代码, 图例就是series 中type所指示的值
    
        series: {
              
                type: 'line'
         }

#### 3. 坐标系设置 ####

1.  不同的图例使用不同的坐标系，使用比较多的是XY直角坐标系，
2.  圆形的图一般使用 极坐标，有地图的就是 geo地图坐标，其他的比较容易分辨
3.  不同的坐标系使用不同的坐标系设置，XY坐标系一般设置 xAxis 和 yAxis

<table> 
 <thead> 
  <tr> 
   <th>坐标系</th> 
   <th>坐标系设置</th> 
   <th>设置说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>直角坐标系</td> 
   <td>xAxis 和 yAxis</td> 
   <td>设置坐标轴文字，间隙等等样式</td> 
  </tr> 
  <tr> 
   <td>极坐标</td> 
   <td>radiusAxis 和 angleAxis</td> 
   <td>设置角度和半径的样式</td> 
  </tr> 
  <tr> 
   <td>雷达图</td> 
   <td>radar</td> 
   <td>可设置独立轴的样式</td> 
  </tr> 
 </tbody> 
</table>

#### 4. 主图与组件 ####

1.  一般除了主要用于显示图，还可以绘制一些小组件放在上面，帮助提示或修改图形显示

<table> 
 <thead> 
  <tr> 
   <th>组件名</th> 
   <th>组件一般放置位置</th> 
   <th>组件用途</th> 
   <th>组件说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>上方</td> 
   <td>图的标题</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>legend</td> 
   <td>上方或下方</td> 
   <td>图例说明</td> 
   <td>提示图形中的颜色形状等用途</td> 
  </tr> 
  <tr> 
   <td>tooltip</td> 
   <td>主图中</td> 
   <td>提示说明组件</td> 
   <td>鼠标悬浮主图上，显示相应数据</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td>其他的用的不多，不太熟，一般都是参照别人写过的示例</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

#### 5. 组件参数 ####

1.  参数值一般有以下几种类型，数值，字符串，数组，或者模板函数
2.  其中模板函数可以帮助绘制很多复杂的数据，非常有帮助

## 如何借阅别人的思想 ##

1.  echart 官方示例
2.  [较全的第三方示例][Link 5]

[Link 1]: https://echarts.apache.org/examples/zh/editor.html?c=line-simple
[Link 2]: https://echarts.apache.org/zh/option.html#title
[Link 3]: https://echarts.apache.org/zh/cheat-sheet.html
[Link 4]: https://echarts.apache.org/examples/zh/index.html
[Link 5]: https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all