Echarts常用配置项(详细入门)

作者 : admin 本文共3837个字,预计阅读时间需要10分钟 发布时间: 2024-06-10 共5人阅读

目录

前言福利:推荐几个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五步走

Echarts常用配置项(详细入门)插图

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

title标题设置
tooltip工具提示

xAxis

x轴

yAxis

y轴
series图表系列信息

toolbox

工具箱按钮
legend图例组件(图例可以帮助我们对图表进行筛选)
color线条颜色
grid是否显示绘图网格

title标题常用参数:

参数含义

textStyle

标题文字样式设置(是个对象,里面能设置文字的具体样式,颜色、字体大小……)

borderWidth

标题边框宽度(number数据类型,写数字即可)

borderColor

标题边框颜色

borderRadius

边框圆角(统一设置四个时是数字,分开设置用数组)

top/right/bottom/left

标题距离(上/右/下/左)边的距离(number数据类型,写数字即可)

tooltip工具提示:

参数含义

trigger

工具提示的类型(item/axis/none)

triggerOn

触发时机(click/mouseOver……)

formatter

提示框浮层内容格式器

xAxis/yAxis x/y轴:

参数含义

type

坐标轴类型(value数轴/category类目轴/time时间轴)
datax/y轴的数据(数组,需要一一对应)
positionx/y轴的位置

series 图表系列信息([{},{},{}……]可以写多个对象,代表多个图像):

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

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

参数含义

saveAsImage

导出图片({})

dataView

数据视图({})

restore

重置({})

dataZoom

区域缩放({})

magicType

动态图表类型的切换({type: [‘bar’, ‘line’,……] })

legend 图例组件:

参数含义
data图例的数据数组(与series个数对应)

grid 是否显示绘图网格:

参数含义

show

是否显示(flase/true)
borderWidth网格线边框宽度
borderColor网格线边框颜色
top/right/bottom/left网格线离容器上/右/下/左侧的距离
width/height网格线的宽高

Echarts常用配置项(详细入门)插图(1)

1.3 几个常用图形的参数

1.3.1 柱状图

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

常用参数,具体在该网址上查找:

参数含义
seriess[].type图形信息描述、类型
xAxisx轴
yAxisy轴
markPoint

标记点(最大值/最小值……)

arkLine

标记线(平均值之类的)

label

柱状图上的文字设置

barWidth

柱的宽度

 例子:





  
  
  
  Document
  



  
  


1.3.2 折线图

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

常用参数,具体在该网址上查找:

参数含义
seriess[].type图形信息描述、类型
xAxisx轴
yAxisy轴
markPoint

标记点

markLine

标记线

markArea

标记区域

smooth

是否为平滑线

lineStyle

线的样式设置

areaStyle

线和x轴形成的区域设置

boundaryGap

x轴的第1个元素是否与y轴有距离

scale

堆叠图的设置(all)

 例子:





  
  
  
  Document
  



  
  


1.3.3 散点图

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

常用参数,具体在该网址上查找:

参数含义
seriess[].type图形信息描述、类型
xAxisx轴
yAxisy轴
symbolsize

控制散点的大小

itenStyle

控制散点的样式

showEffectOn

出现涟漪动画的时机 render emphasis

rippleEffect

涟漪动画时, 散点的缩放比例

scale缩放比例

1.3.4 饼图

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

常用参数,具体在该网址上查找:

参数含义
seriess[].type图形信息描述、类型
label

饼图文字的显示

radius

饼图的半径

roseType

南丁格尔图 饼图的每一个区域的半径是不同的(’radius’)

selectedMode

选中模式是否支持多个选中(’false’,‘single’,‘multiple’,)

selectedOffset选中的效果,能够将选中的区域偏离圆点偏离量

例子:
 





  
  
  
  Document
  



  
  


1.3.5 地图

区别:

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

常用参数,具体在该网址上查找:

参数含义
seriess[].type图形信息描述、类型
geo配置项
map配置为map
roam

设置允许缩放以及拖动的效果

zoom

设置初始化的缩放比例

center

设置地图中心点的坐标

label是否展示标签
geoIndex

配置散点的坐标数据

coordinateSystem

指明散点使用的坐标系统

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

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

1.3.6 雷达图

常用参数,具体在该网址上查找:

参数含义
seriess[].type图形信息描述、类型
radar配置雷达图行信息
indicator

配置各个维度的最大值

label

设置标签的样式

areaStyle

将每一个产品的雷达图形成阴影的面积

shape

配置雷达图最外层的图形

 例子:





  
  
  
  Document
  



  
  


1.3.7 仪表图

常用参数,具体在该网址上查找:

参数含义
seriess[].type图形信息描述、类型
min max

min max 控制仪表盘数值范围

itemStyle

指针的样式





  
  
  
  Document
  



  
  


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;
  • 按需引入的名称

Echarts常用配置项(详细入门)插图(2)

  •  引入到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;
}

本站无任何商业行为
个人在线分享-虚灵IT资料分享 » Echarts常用配置项(详细入门)
E-->