ECharts图表库入门

1.下载

在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

点击  echarts CDN by jsDelivr - A CDN for npm and GitHub跳转页面如下：点击进入，另存在我们电脑上需要用的文件里面即可。

 2.在文件中引入刚刚下载的文件

---

方法二：

 1.NPM 安装 ECharts

npm install echarts --save

2.引入（全局引入、按需导入）

全局：

import * as echarts from 'echarts'

按需引入：

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
 
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
 
// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});

 

 3.定义容器显示图表

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

4. 基于准备好的dom，初始化echarts实例

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

5.指定图表的配置项和数据

  option = {
            xAxis: {
                type: 'category',
                data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
            },
            yAxis: {},
            series: [
                {
                    type: 'pie',
                    name: '2015',
                    data: [89.3, 92.1, 94.4, 85.4]
                },
                {
                    type: 'line',
                    name: '2016',
                    data: [95.8, 89.4, 91.2, 76.9]
                },
                {
                    type: 'bar',
                    name: '2017',
                    data: [97.7, 83.1, 92.5, 78.1]
                }
            ]
        };

效果展示：

 数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持 数据集 开始，更推荐使用 数据集 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

如果我们设置多条数据：

option = {
            xAxis: {
                type: 'category',
                data: ['凌檬水', '茶叶', '咖啡', '奶茶']
            },
            yAxis: {},
            series: [
                {
                    type: 'line',
                    name: '2015',
                    data: [89.3, 92.1, 94.4, 85.4]
                },
                {
                    type: 'line',
                    name: '2016',
                    data: [95.8, 89.4, 91.2, 76.9]
                },
                {
                    type: 'line',
                    name: '2017',
                    data: [97.7, 83.1, 92.5, 78.1]
                }
            ]
        };

效果展示：

设置柱状图的方式，是将 series 的 type 设为 'bar'。

设置折线图的方式，是将 series 的 type 设为 'line'。

设置饼图的方式，是将 series 的 type 设为 'pie'。

设置散点图的方式，是将 series 的 type 设为 'scatter'。