目录

前言福利：推荐几个EChart常用的社区网站

第一章、如何使用Echarts

1.1 使用Echarts五步走

1.2  了解版块的几个基本参数

1.3 几个常用图形的参数

1.3.1 柱状图

1.3.2 折线图

1.3.3 散点图

1.3.4 饼图

1.3.5 地图

1.3.6 雷达图

1.3.7 仪表图

1.4 Echarts使用

前言福利：推荐几个EChart常用的社区网站

PPChart – 让图表更简单

echarts图表集

ChartLib

makeapie echarts社区图表可视化案例

chart.top – 让图表更简单-echarts图集demo

Echarts官方文档：快速上手 – Handbook – Apache ECharts

第一章、如何使用Echarts

1.1 使用Echarts五步走

1.2  了解版块的几个基本参数

title标题常用参数：

tooltip工具提示：

xAxis/yAxis x/y轴：

series 图表系列信息（[{},{},{}……]可以写多个对象，代表多个图像）：

http://echarts.apache.org/zh/option.html#series

toolbox 工具箱按钮：feature：{}中的参数

legend 图例组件：

grid 是否显示绘图网格：

​

1.3 几个常用图形的参数

1.3.1 柱状图

基础柱状图 – 柱状图 – 常用图表类型 – 应用篇 – Handbook – Apache ECharts

常用参数，具体在该网址上查找：

 例子：

1.3.2 折线图

基础折线图 – 折线图 – 常用图表类型 – 应用篇 – Handbook – Apache ECharts

常用参数，具体在该网址上查找：

 例子：

1.3.3 散点图

基础散点图 – 散点图 – 常用图表类型 – 应用篇 – Handbook – Apache ECharts

常用参数，具体在该网址上查找：

1.3.4 饼图

基础饼图 – 饼图 – 常用图表类型 – 应用篇 – Handbook – Apache ECharts

常用参数，具体在该网址上查找：

例子：
 

1.3.5 地图

区别：

• ECharts最基本的代码结构
• 准备中国地图的矢量数据
• 使用Ajax获取矢量地图数据
• 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap(‘chinaMap’, 矢量地图数据)
• 配置geo的type为’map’, map为’chinaMap’

常用参数，具体在该网址上查找：

需要导入china.js文件，具体实现看下面这个网址：

JK18 Echarts: 将一些最常用的Echarts技术都放在这个文件里面

1.3.6 雷达图

常用参数，具体在该网址上查找：

 例子：

1.3.7 仪表图

常用参数，具体在该网址上查找：

1.4 Echarts使用

使用Echarts最重要的一点就是能看懂里面代码的参数所代表的意思，然后能根据别人给的代码，改成自己想要的图片，这里提供几个我常用的网址：

echarts图表集

PPChart – 让图表更简单

Examples – Apache ECharts

 还有一个点就是当项目中需要引入中国地图/世界地图的时候，我们使用的时Echarts4的版本（我记得版本4才有china.js文件）

引入到Vue项目中的步骤：

• 安装Echarts

npm install echarts@(版本号) --save

• 按需引入

// 引入 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
]);

export default echarts;

• 按需引入的名称

•  引入到main.js文件中

// 引入echarts
import echarts from "./echarts/echarts";
 
// 挂载到vue实例中
Vue.prototype.$echarts = echarts
 
调用的时候就是 ：  this.$echarts

• 在Vue组件下使用就是

  
    
  

 

 

#main {
  min-width: 31.25rem;
  min-height: 31.25rem;
}