ECharts插件的基本使用

目录

介绍：

引入：

使用：

---

介绍：

Echarts是一个基于 JavaScript 的开源可视化图表库，可以在项目中的数据图表中用到

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

一点即到，希望各位能喜欢

Echarts官方网址：Apache ECharts

Echarts官方的文档：Handbook - Apache ECharts

Echarts官方的版本网址：下载 - Apache ECharts

Echarts官方的示例网址：Examples - Apache ECharts

引入：

npm下载插件：

npm install echarts --save

准备一个DOM容器 

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

引入Echarts插件，代码如下所示：

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

使用：

        基本的使用：

坐标轴：直角坐标系中的 x/y 轴。

x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据

通常情况下，x 轴显示在图表的底部，y 轴显示在左侧，一般配置如下：

option = {
  xAxis: {
    // ...
  },
  yAxis: {
    // ...
  }
};

进行修改，如下：

option = {
  xAxis: {
    type: 'time',        //类型，同下
    name: '销售时间'        //名字，同下
    // ...
  },
  yAxis: {
    type: 'value',
    name: '销售数量'
    // ...
  }
  // ...
};

可以前往Echarts官网的示例中，挑选心仪的图表，进行引入修改：

Examples - Apache ECharts