echarts api的介绍
参考的地址：https://echarts.apache.org/zh/api.html
echarts.init
echarts.init(dom?: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
devicePixelRatio?: number,
renderer?: string,
useDirtyRect?: boolean, // 从 `5.0.0` 开始支持
useCoarsePointer?: boolean, // 从 `5.4.0` 开始支持
pointerSize?: number, // 从 `5.4.0` 开始支持
ssr?: boolean, // 从 `5.3.0` 开始支持
width?: number|string,
height?: number|string,
locale?: string // 从 `5.0.0` 开始支持
}) => ECharts
echarts.init创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。
怎么检测一个dom元素上是否有echarts实例？？？？？？
echarts的第1个参数
第一个参数dom；实例容器，一般是一个具有高宽的 DIV 元素。
echarts的第2个参数
第二个参数theme：应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。
参见 ECharts 中的样式简介(https://echarts.apache.org/handbook/zh/concepts/style/)
比如： var chart = echarts.init(dom, 'dark'); echarts主题就会变为深色模式
其他的主题，没有内置在 ECharts 中，需要自己加载。
这些主题可以在主题编辑器（https://echarts.apache.org/zh/theme-builder.html）里访问到。
也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：
总结:利用这个特性可以做echarts的主题切换,使用它的第二个参数。同时还内置了深色模式。
如果不指定主题，也需在传入opts前先传入null，如：
const chart = echarts.init(dom, null, {renderer: 'svg'});
注意:如果容器是隐藏的，ECharts 可能会获取不到 DIV 的高宽导致初始化失败.
也就是说，如果你先初始化，然后在v-show。echarts的实例化可能会失败的。
在使用服务端渲染的模式下opts，必须通过opts.width和opts.height设置高和宽。如下：
const chart = echarts.init(dom, null, {ssr: true, width:'100px', height:'100px'});
它的第二个参数后面可以好好的去看一下，研究一下。暂时先看到这里【未完】
echarts 的第3个参数
第三个参数opts是一个对象， 也支持直接使用canvas元素作为容器。
echarts.connect 多个图表实例实现联动
group 的 id，或者图表实例的数组。
// 分别设置每个实例的 group id
chart1.group = 'group1';
chart2.group = 'group1';
echarts.connect('group1');
// 或者可以直接传入需要联动的实例数组
echarts.connect([chart1, chart2]);
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main1" style="width: 600px; height:400px"></div>
<div id="main2" style="width: 600px; height:400px"></div>
<script type="text/javascript">
//基于准备好的dom，初始化ECharts图表
var myChart1 = echarts.init(document.getElementById("main1"));
var option1 = { //指定第1个图表的配置项和数据
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
title: {
text: '2022学校招生各个专业数据',
left: 40,
top: 5
},
tooltip: {
tooltip: {
show: true
},
},
legend: {
data: ['2019年招生'],
left: 422,
top: 8
},
xAxis: [{
data: ["大数据", "云计算", "计算机应用", "ERP", "人工智能",
"软件开发", "移动开发", "网络技术"
],
axisLabel: {
interval: 0
}
}],
yAxis: [{
type: 'value',
}],
series: [{ //配置第1个图表的数据系列
name: '2019年招生',
type: 'bar',
barWidth: 40, //设置柱状图中每个柱子的宽度
data: [125, 62, 45, 56, 123, 205, 108, 128],
}]
};
//基于准备好的dom,初始化ECharts图表，这个是第2个图标
var myChart2 = echarts.init(document.getElementById("main2"));
var option2 = { //指定第2个图表的配置项和数据
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
title: {
text: '某学院2020年专业招生情况汇总表',
left: 40,
top: 8
},
tooltip: {
show: true
},
legend: {
data: ['2020年招生'],
left: 422,
top: 8
},
xAxis: [{
data: ["大数据", "云计算", "计算机应用", "ERP", "人工智能",
"软件开发", "移动开发", "网络技术"
],
axisLabel: {
interval: 0
}
}],
yAxis: [{
type: 'value',
}],
series: [{ //配置第2个图表的数据系列
name: '2020年招生',
type: 'bar',
barWidth: 40, //设置柱状图中每个柱子的宽度
data: [325, 98, 53, 48, 222, 256, 123, 111],
}]
};
myChart1.setOption(option1); //渲染第1个图表
myChart2.setOption(option2); //渲染第1个图表
//多图表联动配置方法1：分别设置每个echarts对象的group值
myChart1.group = 'a1';
myChart2.group = 'a1';
echarts.connect('a1');
//多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2
//echarts.connect([myChart1,myChart2]);
</script>
</body>
</html>
解除图表实例的联动
echarts.disconnect('a1') 这样可以解除联动
解除图表实例的联动，如果只需要移除单个实例，可以将通过将该图表实例 group 设为空。
参数：group 的 id。
echarts.use()
使用组件，配合新的按需引入的接口使用。
注意：该方法必须在echarts.init之前使用。
```
```
// 引入 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
]);
// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
// ...
});
```
#### 注册主题 echarts.registerTheme() 这个是从5.0开始支持的。
#### echarts.registerLocale(locale: string, localeCfg: Object)
```
从 5.0.0 开始支持
注册语言包，用于初始化实例的时候指定。语言包格式见 src/i18n/langEN.ts
语言包地址：https://github.com/apache/echarts/blob/release/src/i18n/langEN.ts
```
echarts api的介绍的更多相关文章
- Odoo 二次开发教程(五)-新API的介绍与应用
[关于odoo新API的介绍,Internet上资料很少,或者不够完整详实,这会对初学者造成很大的困惑,本篇的目的就是希望能帮助新手了解新API的大概] odoo 新api的实现是借助于python装 ...
- Tyk API网关介绍及安装说明
Tyk API网关介绍及安装说明 Tyk是一个开源的轻量级API网关程序. 什么是API网关 API网关是一个各类不同API的前置服务器.API网关封装了系统内部架构,对外提供统一服务.此外还可以实现 ...
- spring3 的restful API RequestMapping介绍
原文链接:http://www.javaarch.net/jiagoushi/694.htm spring3 的restful API RequestMapping介绍 在spring mvc中 @R ...
- FileNet P8 工作流生命周期管理和 Process Engine API 应用介绍
摘录:https://www.ibm.com/developerworks/cn/data/library/techarticles/dm-0902wangzheng/ FileNet P8 工作流生 ...
- Tesseract-OCR-05-主要API功能介绍
Tesseract-05-主要API功能介绍 tesseract本身代码是由c/c++混编而成的,其中有用的简单的接口函数几乎都是在baseapi.h中 从其处理过程中,不难得出: 它还需要有一个im ...
- 四. 几个Promise常用API的介绍与使用
四. 几个常用API的介绍与使用 1. Promise构造函数:Promise(excutor){} excutor函数:同步执行 (resolve, reject) => {} resolve ...
- 腾讯微博java(android)sdk新增微博api详细介绍
本文主要介绍腾讯微博android sdk中新增微博有关的8个接口,以及使用的示例代码 注意:以下所有的api示例代码都需要先新建QqTSdkService类对象qqTSdkService并初始化,见 ...
- Winsock API编程介绍
相信很多人都对网络编程感兴趣,下面我们就来介绍,在网络编程中应用最广泛的编程接口Winsock API. 使用Winsock API的编程,应该了解一些TCP/IP的基础知识.虽然你可以直接使用Win ...
- Android基础知识之API等级介绍
原文:http://android.eoe.cn/topic/android_sdk :可以让开发者通过一个表示API级别的整数来描述程序在android平台上的兼容性,系统会将与系统本身提供的API ...
- kafka-python的API简单介绍
在上一篇文章中说明了kafka-python的API使用的理论概念,这篇文章来说明API的实际使用. 在官方文档详细列出了kafka-python的API接口https://kafka-python. ...
随机推荐
- 基于RNN和CTC的语音识别模型，探索语境偏移解决之道
摘要:在本文介绍的工作中,我们展示了一个基于RNN和CTC的语音识别模型,在这个模型中,基于WFST的解码能够有效地融合词典和语言模型. 本文分享自华为云社区<语境偏移如何解决?专有领域端到端A ...
- 训练千亿参数模型的法宝，昇腾CANN异构计算架构来了~
摘要:盘古的训练以「昇腾AI处理器」为基座,同时借助了「CANN 异构计算架构」,让硬件算力得以充分释放,大大缩短了训练时间! 2021年4月,"华为云盘古大模型"一炮走红AI人工 ...
- 如何通过appuploader把ipa文件上传到App Store教程步骤
iOS APP上架App Store其中一个步骤就是要把ipa文件上传到App Store! 下面进行步骤介绍! 利用Appuploader这个软件,可以在Windows.Linux或Mac系统中 ...
- 神经网络优化篇：详解动量梯度下降法（Gradient descent with Momentum）
动量梯度下降法 还有一种算法叫做Momentum,或者叫做动量梯度下降法,运行速度几乎总是快于标准的梯度下降算法,简而言之,基本的想法就是计算梯度的指数加权平均数,并利用该梯度更新的权重. 例如,如果 ...
- 3.1 《数据库系统概论》SQL概述及数据定义（模式SCHEMA、表TABLE、索引INDEX）
前言 本篇文章学习书籍:<数据库系统概论>第5版 王珊 萨师煊编著 视频资源来自:数据库系统概论完整版(基础篇+高级篇+新技术篇) 由于 BitHachi 学长已经系统的整理过本书了,我在 ...
- vue 3版本如何下载静态文件
1.现将静态文件放到 public 目录下的static文件夹 2.<a href="/static/test.zip" target="_blank" ...
- 微信小程序从基础入门到项目实战-黑马程序员-pink老师推荐(持续更新)
https://www.bilibili.com/video/BV1WJ41197sD/?spm_id_from=333.788.recommend_more_video.0
- shell脚本(16)-awk命令
文档目录 一.awk介绍 二.awk基本用法 1.awk对字段(列)的提取: 2.awk对记录(行)的提取: 3.awk对字符串提取: 4.awk程序的优先级: 三.awk高级用法 1.awk定义数组 ...
- longjmp 使 C++ RAII 失效
C 语言的 longjmp 没有进行栈展开,而是直接跳转.从 longjmp 到 setjmp 之间的所有析构函数都没有调用,也就是 RAII 失效. #include <setjmp.h> ...
- 【荐】开源Winform控件库：花木兰控件库
微信好友推荐,挺好看的Winfrom控件库,下面来看看. 介绍 基于 C#(语言) 4.0 . VS2019 . Net Framework 4.0(不包括Net Framework 4.0 Clie ...