目录

1、Echarts介绍

2、Echarts的使用

3、Echarts-基础配置

1、Echarts介绍

        ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

用简单的话来说：

• 是一个JS插件

• 性能好可流畅运行PC与移动设备

• 兼容主流浏览器

• 提供很多常用图表，且可定制。

2、Echarts的使用

官方教程：五分钟上手ECharts

自己步骤：

• 下载echarts 下载 - Apache ECharts

• 引入echarts dist/echarts.min.js

• 准备一个具备大小（宽高）的 DOM

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

• 初始化echart实例

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

• 指定图表的配置项和数据 (根据文档提供示例找到option)

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

• 使用刚指定的配置项和数据显示图表

myChart.setOption(option);

3、Echarts-基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

• series

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

  • 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。

• xAxis：直角坐标系 grid 中的 x 轴

• yAxis：直角坐标系 grid 中的 y 轴

• grid：直角坐标系内绘图网格

• title：标题组件

• tooltip：提示框组件

• legend：图例组件

• color：调色盘颜色列表

演示代码：

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        name:'线形图'
    },
    {
        data: [22, 333, 111, 222, 444, 666, 777],
        type: 'bar',
        name:'饼状图'
    }],
    grid: {
        show: true
    },
    title: {
        text: '标题'
    },
    tooltip: {
        padding: 20
    },
    legend: {
        data: ['线形图']
    },
    color: ['red','green']
};