ECharts的使用¶

你可以一无所有，但绝不能一无是处

Author: zhangjunchang

1.ECharts的基本使用¶

1.1.ECharts的介绍¶

ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

开源免费

它是开源免费的，也就是我们可以免费的使用 ECharts ，不需要缴纳任何的费用

功能丰富

它的功能非常的丰富，提供了各种各样的图表，支持各种各样的定制, 满足各种需求，比如折线图、柱状图、饼图、K线图等. 在他的官方示例中, 提供了上百种图表, 可以用只有你想不到, 没有她做不到这句话来形容

社区活跃

ECharts 的社区非常活跃，意味着你可以和很多开发者讨论，遇到了 ECharts 中不会的问题，也很容易找到解决办法

多种数据的支持

可视化的含义就是将数据通过更加直观的图表的方式来呈现。图表只是一种呈现方式。最核心的其实是数据。 ECharts 对数据格式的支持也是非常友好的。 ECharts 能够支持常见的 key-value 数据格式，还能支持二维表，或者 TypedArray 格式的数据

流数据的支持

对于超大的数据量而言，数据本身的体量可能就非常消耗资源, 而 ECharts 可以支持对流数据的动态渲染，加载多少数据就渲染多少数据，省去了漫长的数据加载的等待时间, 他还提供了增量渲染的技术, 只渲染变化的数据, 提高系统的资源利用. 移动端的优化

跨平台

酷炫的特效

数据的三维可视化

......

ECharts 能够做出各种各样漂亮的图表，它能满足绝大多数可视化图表的实现 . 它的兼容性强 , 使用方便 ,功能强大 , 是实现数据可视化的最佳选择之一 , 更多特点和介绍可以查阅官网地址： https://echarts.apache.org/zh/index.html

1.2.ECharts的快速上手¶

ECharts 的入门使用特别简单, 5分钟就能够上手. 他大体分为这几个步骤

步骤1：引入 echarts.js 文件

echarts是一个 js 的库，当然得先引入这个库文件

<script src = "js/echarts.min.js" ></script>

步骤2：准备一个呈现图表的盒子

这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里

<div id = "main" style = "width: 600px;height:400px;" ></div>

步骤3：初始化 echarts 实例对象

在这个步骤中, 需要指明图表最终显示在哪里的DOM元素

var myChart = echarts.init(document.getElementById('main'))

步骤4：准备配置项

这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的

        // 大标题
          title: {
            text: '收费账单',
                // 这个有一个副标题我不需要删除了
            left: 'center'
          },
          // 提示框
          tooltip: {
            trigger: 'item'
          },
          // 图例
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '消费账单',
              type: 'pie',
              radius: '50%',  // 圆的半径
              // 数据
              data: [

              ],
              // 显示效果
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]

骤5：将配置项设置给 echarts 实例对象

ECharts 能够做出各种各样漂亮的图表，它能满足绝大多数可视化图表的实现.它的兼容性强, 使用方便, 功能强大, 是实现数据可视化的最佳选择之一, 更多特点和介绍可以查阅官网地址：

myChart.setOption( option )

通过简单的 5 个步骤 , 就能够把一个简单的柱状图给显示在网页中了 . 这几个步骤中 , 步骤 4 最重要 , 一个图表最终呈现什么样子 , 完全取决于这个配置项 . 所以对于不同的图表 , 除了配置项会发生改变之外 ,其他的代码都是固定不变的 .

1.3.ECharts的在项目中异步渲染¶

我们实例化一个饼图后，要想让它实时变化需要在请求中实现异步渲染。我们在更新数据的函数中感谢myChart中的data就可以了

饼图渲染

初始化一个饼图 echarts mounted钩子实现
根据数据实时更新饼图 echarts.setOption({...})

官方提供如下

入门示例中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行

我使用的不是jQuery获取数据而是axios示例如下

async getList() {
          const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
            params: {
              creator: '闲之'
            }
          })
          // console.log(res)
          this.list = res.data.data

          // 更新图表
          this.myChart.setOption({
            series: [
              {
                data: this.list.map(item => ({ value: item.price, name: item.name }))
              }
            ]
          })
        }

需要注意的是，它无法操作其他钩子中的内容，这就需要我们把表格挂载到this上。示例如下

mounted() {
        this.myChart = echarts.init(document.querySelector('#main'))
        this.myChart.setOption({
          // 大标题
          title: {
            text: '收费账单',
            left: 'center'
          },
          // 提示框
          tooltip: {
            trigger: 'item'
          },
          // 图例
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '消费账单',
              type: 'pie',
              radius: '50%',  // 圆的半径
              // 数据
              data: [

              ],
              // 显示效果
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }