01-Echarts的基本使用

Echarts的简介

ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形

库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

• 开源免费
• 功能丰富
• 社区活跃
• 多种数据的支持
• 移动端的优化
• 跨平台

Echarts的快速上手

1. 引入echarts.js文件

2. 准备展示图标的容器

3. 初始化echarts实例对象

let mCharts = echarts.init(document.querySelector('div'))

4. 准备配置项

  var option = {
      title: {
        text: '成绩', // 标题文字
        link: 'http://www.baidu.com', // 标题超链接
        textStyle: { // 标题样式设置
          color: 'red' // 标题文字
        }
      },
      xAxis: {
        type: 'category',  // 指明x轴为 类目轴
        data: ['小明', '小红', '小王'] // 为类目轴提供数据, 该数据是一个数组, 数组中的每个元素会呈现在x轴上
      },
      yAxis: {
        type: 'value'  // 指明x轴为 数值轴, 指明数值轴之后, 无需指定data
      },
      series: [
        {
          name: '语文', // 为图标起一个名称
          type: 'bar', // 指明该图标类型为 柱状图
          data: [70, 92, 87] // 为x轴的每一个元素, 指明呈现在y轴的数值
        }
      ]

5. 把配置项设置为echarts实例对象

 mCharts.setOption(option)

如下图所示

image-20201128202558746