码迷,mamicode.com
首页 > 其他好文 > 详细

echart入门

时间:2020-07-28 00:31:16      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:lsp   htm   今天   范围   个数   table   too   工具箱   结果   

echart作为一款很火的前端图表插件底层基于canvas,工作中也有接触。平时看似各种炫丽图表的实现,但今天实现一个简单的阵矩差方图,竟然一脸懵。这是无基础就来花里胡哨那一套的结果,看似会了其实啥都不会。本篇记录一下echart基础知识。先立个提纲,详细更新中。

1.基本标签

名词描述
chart 是指一个完整的图表,如折线图,饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表,可能包括坐标轴、图例等
axis 直角坐标系中的一个坐标轴,坐标轴可分为类目型、数值型或时间型
xAxis 直角坐标系中的横轴,通常并默认为类目型
yAxis 直角坐标系中的纵轴,通常并默认为数值型
grid 直角坐标系中除坐标轴外的绘图网格,用于定义直角系整体布局
legend 图例,表述数据和图形的关联
dataRange 值域选择,常用于展现地域数据时选择值域范围
dataZoom 数据区域缩放,常用于展现大量数据时选择可视范围
roamController 缩放漫游组件,搭配地图使用
toolbox 辅助工具箱,辅助功能,如添加标线,框选缩放等
tooltip 气泡提示框,常用于展现更详细的数据
timeline 时间轴,常用于展现同一系列数据在时间维度上的多份数据
series 数据系列,一个图表可能包含多个系列,每一个系列可能包含多个数据

实际使用:首先echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化,最后把配置方法(setOption)赋值到初始化图形中。最常见的使用标签有:

1.title 标题

2.legend 图标

3.grid 布局

4.xAxis X轴

5.yAxis Y轴

6.tooltip 图标悬停的提示内容

7.series 必须项,指定图表的类型:饼图、柱状图等

官网文档https://echarts.apache.org/zh/option.html#title

2.简单实现

 

 

3.实现网格

 

4.实现阵矩

 

echart入门

标签:lsp   htm   今天   范围   个数   table   too   工具箱   结果   

原文地址:https://www.cnblogs.com/zeussbook/p/13388374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!