echarts制图详解

使用echarts可以将数据转换成需要的图标

但是有一些基础功能需要了解。

echartsInstance

echarts实例通过init创建。

const chart = echarts.init(dom, null, {renderer: 'svg'});

参数分别为容器、主题、附加参数，后两个可以为空，容器就是我们的contianer、div这些。
主题是echarts独立的配色系统，可以自己配色，然后下载这些主题。附加参数有很多，就不一一列出了。

dispose

echarts初始化完成后，可以通过dispose来销毁实例，通过此功能可以在同一容器上进行图标切换

echarts.dispose(dom)

请注意，dispose是echarts的方法，而非实例本身的方法，通过实例可以使用

chart.clean()

来清除图表的option（清除后图表可用），实际上，目前仅能清除图标的series内容，可能是bug。

setOption

设置图标实例的数据及其他配置项

 chart.setOption(option, notMerge, lazyUpdate);

一些option

title：标题组件
legend：图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
grid：网格组件，直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。单个实例可以有任意多个grid组件
xAxis：直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。xAsis.type可以设置x轴的类型，可选：
可选：
- ‘value’ 数值轴，适用于连续数据。
- ‘category’ 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
- ‘time’ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
- ‘log’ 对数轴。适用于对数数据。
yAxis：直角坐标系 grid 中的 y 轴
polar：极坐标系，可以用于散点图和折线图。每个极坐标系拥有一个角度轴和一个半径轴。
radar：雷达图坐标系组件，只适用于雷达图。
dataZoom：dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
timeline： timeline组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能
calendar：日历坐标系组件。
dataset：数据集组件
series：图形组件，决定生成的图形是线还是圆或其他
backgroundColor：背景色组件
useUTC：是否使用utc时间
toolbox：工具组件，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
geo：地图组件。

resize

改变图表尺寸，在容器大小改变时需要手动调用

window.onresize = function () {showChart.resize();}

使用以上方法可以使图表随浏览器大小改变而自动改变

showLoading

显示加载动画，在加载完后调用hideLoading隐藏

echarts制图详解相关推荐

【ECharts】ECharts配置项详解
这是一个方便自己学习ECharts所编写的,如有遗漏和错误之处,欢迎各位指出文章部分转载于用户:法海521的博客"echarts各个配置项详细说明总结",地址:https://b ...
QT Echarts 使用详解（一）ECharts下载\示例\动态缩放
Echarts是百度的一款可视化界面开发的平台,里面的地图以及数据可视化内容十分丰富,适合用于一些大屏数据显示项目或者一些ui界面开发.每一个ECharts图表使用一个无边框的QWebView来展示, ...
ECharts 入门详解
目录 ECharts配置语法创建HTML页面为 ECharts 准备一个具备高宽的 DOM 容器设置配置信息相关属性折线图饼图柱状图: 更多图形案例 ECharts样式设置默认主题使 ...
【echarts】echarts开发详解
echarts官方文档: http://echarts.baidu.com/doc/doc.html#简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javas ...
ECharts地图详解
1.引入echarts库文件 <script charset="utf-8" type="text/javascript" language=" ...
echarts配置详解
文章目录配置 color颜色 grid网格配置 legend图例组件 series系列 title图标标题 tooltip提示框 toolbox工具箱组件 xAxis(X轴).yAxis(y轴) 资 ...
什么是ECharts？前端图表框架echarts详解
在web开发项目过程中,经常会有需要绘制图标的情况,简单的图表可以用canvas来绘制,但是遇到复杂的图标canvas无法满足其功能,遇到这种情况怎么办呢?别着急,今天为大家推荐一款前端大佬都备受青睐 ...
Echarts数据可视化series-bar柱形图详解，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
php链接echarts教程,图文详解echarts的使用方法（饼状图实例）
在页面布局时经常需要插入一些图表,比如饼状图,柱状图,地图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法 ...
vue中使用ECharts实现中国地图配置详解（配官方配置地址）
前言: 1.实现自定义左下角的视觉映射组件(包括自定义颜色.文字.图元大小) 2.实现自定义悬浮提示框如下图所示: 实现步骤: 一.在vue中安装echarts 1.npm install echa ...