关键词：
交互API
前言
- 本篇来学习下ECharts中交互API的使用
全局ECharts对象
- 全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的
-
init ：初始化ECharts实例对象，使用主题
-
registerTheme：注册主题
echarts.registerTheme('CustomTheme',
"color": [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc"
],
- registerMap：注册地图数据
- connect：实现多图关联，传入联动目标为 EChart 实例，支持数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全局ECharts对象</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<!-- 引入自定义主题-->
<script src="lib/CustomTheme.js"></script>
<!--引入jquery-->
<script src="lib/jquery.min.js"></script>
</head>
<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px;border: 1px solid deeppink"></div>
<div id='map' style="width: 600px;height: 400px;border: 1px solid blueviolet"></div>
<script>
// init 初始化echarts实例对象 并设置主题
var myCharts = echarts.init(document.getElementById('app'), 'CustomTheme')
var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
var yDataArr = [88, 92, 63, 77, 94] // y轴数据
var option =
toolbox:
feature:
saveAsImage:
,
xAxis:
type: 'category',
data: xDataArr
,
yAxis:
type: 'value'
,
series: [
name: '分数',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: yDataArr,
markPoint: // 标记最大最小值
data: [
type: 'max', name: '最大值',
type: 'min', name: '最小值'
]
,
markLine:
data: [
type: 'average', name: '平均值'
]
,
label:
show: true, // 柱状图显示数值
rotate: 30, // 值旋转角度
,
barWidth: '30%' // 柱的宽度
]
myCharts.setOption(option)
var myCharts2 = echarts.init(document.getElementById("map"))
// json/map/china.json 为本地的地图矢量数据
$.get('json/map/china.json', function (chinaJson)
console.log(chinaJson) // chinaJson 地图矢量数据
// registerMap :注册地图矢量数据
echarts.registerMap('chinaMap', chinaJson)
var option =
geo:
type: 'map',// map是一个固定的值 类型
map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label:
show: true // 展示标签
,
zoom: 1, // 设置初始化的缩放比例
myCharts2.setOption(option)
// connect : 实现多图关联
echarts.connect([myCharts, myCharts2])
)
</script>
</body>
</html>
- 多图联动保存的图片
echartsInstance对象
eChartsInstance 对象是通过 echarts.init 方法调用之后得到的实例对象
- setOption
- 设置或修改图表实例的配置项以及数据
- 多次调用setOption方法
合并新的配置和旧的配置
增量动画
- resize : 重新计算和绘制图表
window.onresize = function()
myChart.resize();
- on/off：绑定或者解绑事件处理函数
- 鼠标事件
- 常见事件: ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’
- ECharts 事件
- legendselectchanged、‘datazoom’、‘pieselectchanged’、‘mapselectchanged’
- 鼠标事件
- dispatchAction: 主动触发某些行为, 使用代码模拟用户的行为
- clear：清空当前实例，会移除实例中所有的组件和图表；清空之后可以再次 setOption
- dispose：销毁实例；销毁后实例无法再被使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echartsInstance对象</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<script src="lib/jquery.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<button id="btn1">触发行为</button>
<button id="btn2">clear</button>
<button id="btn3">setOption</button>
<button id="btn4">dispose</button>
<script>
var mCharts = echarts.init(document.getElementById("app"))
var pieData = [
name: 'pass',
value: 80
,
name: 'fail',
value: 10
,
name: 'skip',
value: 5
,
name: 'error',
value: 5
]
var option =
legend:
data: ['pass', 'fail', 'skip', 'error']
,
tooltip:
show: true
,
series: [
type: 'pie',
data: pieData,
label:
show: true,
formatter: function (arg)
console.log(arg)
return arg.data.name + '\\n' + arg.percent + '%'
,
selectedMode: 'single', // multiple 多选 single 单选
selectedOffset: 30,// 偏移距离
// radius: ['50%', '80%']
]
mCharts.setOption(option)
// 事件监听
mCharts.on('click', function (arg)
console.log(arg)
)
mCharts.off('click') // 解绑click的事件
// echarts事件变化
mCharts.on('legendselectchanged', function (arg)
console.log('legendselectchanged', arg)
)
$('#btn1').click(function ()
// 模拟用户的行为
mCharts.dispatchAction(
type: 'highlight',
seriesIndex: 0, // 图表索引
dataIndex: 1 // 数据的索引 图表中的哪一项
)
mCharts.dispatchAction(
type: 'showTip',
seriesIndex: 0,
dataIndex: 0
)
)
$('#btn2').click(function ()
// 清空图表的实例
mCharts.clear()
)
$('#btn3').click(function ()
// 重新设置option
mCharts.setOption(option)
)
$('#btn4').click(function ()
// 销毁mCharts
mCharts.dispose()
)
</script>
</body>
</html>
echarts高级动画的使用交互api(代码片段)
1.1.动画的使用1.1.1.加载动画ECharts已经内置好了加载数据的动画,我们只需要在合适的时机显示或者隐藏即可显示加载动画mCharts.showLoading()一般,我们会在获取图表数据之前显示加载动画 隐藏加载动画mCharts.hideLoading()一般,我们会... 查看详情
交互api（echarts对象和echartsinstance对象）(代码片段)
目录1.全局echarts对象引入echarts.js文件之后就可以使用init方法初始化ECharts实例对象使用主题 registerTheme方法注册主题只有注册过的主题，才能在init方法中使用该主题registerMap方法注册地图数据$.get('json/map/china.json',functio... 查看详情
36-vue之echarts高级-动画的使用(代码片段)
ECharts高级-动画的使用前言加载动画增量动画动画的配置前言本篇来学习下ECharts中动画的使用加载动画showLoading()：显示加载动画，一般在获取图表数据之前显示加载动画hideLoading()：隐藏加载动画，在获取图表数... 查看详情
33-vue之echarts高级-设置主题(代码片段)
ECharts高级-设置主题前言内置主题自定义主题前言本篇来学习下ECharts中如何设置图表主题内置主题ECharts中默认内置了两套主题:lightdarkvarchart=echarts.init(dom,'light')varchart=echarts.init(dom,'dark')<!DOCTYPEhtml><htmllang&... 查看详情
echarts的简单应用之柱形图(代码片段)
...来展示信息，从网上资料来看用的比较多的是百度开源的echarts。echarts的官网上有API以及demo。上面的图形都是非常炫的，不过都是静态数据，我们做项目时不可能都用静态数据，特别是做监控、管理等方面，需要前后台数据的交... 查看详情
36-vue之echarts高级-动画的使用(代码片段)
ECharts高级-动画的使用前言加载动画增量动画动画的配置前言本篇来学习下ECharts中动画的使用加载动画showLoading()：显示加载动画，一般在获取图表数据之前显示加载动画hideLoading()：隐藏加载动画，在获取图表数... 查看详情
35-vue之echarts高级-样式及自适应(代码片段)
ECharts高级-样式及自适应前言样式直接样式高亮样式自适应前言本篇来学习下样式及自适应的使用样式直接样式这些样式一般都可以设置颜色或者背景或者字体等样式,他们会覆盖主题中的样式itemStyletextStylelineStyleareaStylelabel<!DO... 查看详情
35-vue之echarts高级-样式及自适应(代码片段)
ECharts高级-样式及自适应前言样式直接样式高亮样式自适应前言本篇来学习下样式及自适应的使用样式直接样式这些样式一般都可以设置颜色或者背景或者字体等样式,他们会覆盖主题中的样式itemStyletextStylelineStyleareaStylelabel<!DO... 查看详情
34-vue之echarts高级-调色盘(代码片段)
ECharts高级-调色盘前言调色盘主题调色盘全局调色盘局部调色盘渐变颜色前言本篇来学习下ECharts中调色盘的使用调色盘它是一组颜色，图形、系列会自动从其中选择颜色,不断的循环从头取到尾,再从头取到尾,如此往复主要分... 查看详情
25-vue之echarts-基本使用(代码片段)
ECharts-基本使用前言ECharts介绍ECharts快速上手ECharts配置说明前言本篇开始来学习下开源可视化库EChartsECharts介绍ECharts是百度公司开源的一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提... 查看详情
paddlepaddle模型训练和预测之基础api(代码片段)
导读在上篇文章paddlepaddle模型训练和预测之高级API我们已经介绍过了如何通过高级API来搭建网络模型进行模型的训练和预测，这篇文章我们主要来介绍如何通过paddlepaddle的基础API来实现模型的训练，其实高级的API接口也... 查看详情
paddlepaddle模型训练和预测之基础api(代码片段)
导读在上篇文章paddlepaddle模型训练和预测之高级API我们已经介绍过了如何通过高级API来搭建网络模型进行模型的训练和预测，这篇文章我们主要来介绍如何通过paddlepaddle的基础API来实现模型的训练，其实高级的API接口也... 查看详情
paddlepaddle模型训练和预测之基础api(代码片段)
导读在上篇文章paddlepaddle模型训练和预测之高级API我们已经介绍过了如何通过高级API来搭建网络模型进行模型的训练和预测，这篇文章我们主要来介绍如何通过paddlepaddle的基础API来实现模型的训练，其实高级的API接口也... 查看详情
paddlepaddle模型训练和预测之高级api(代码片段)
...epaddle对于模型的训练提供了两种不同的方式，分别是高级API和基础API，两种模型的训练方式各有优劣，对于不同的使用场景我们可以选择不同的方式高级API：代码简洁，构建模型速度快，灵活度低，不... 查看详情
paddlepaddle模型训练和预测之高级api(代码片段)
...epaddle对于模型的训练提供了两种不同的方式，分别是高级API和基础API，两种模型的训练方式各有优劣，对于不同的使用场景我们可以选择不同的方式高级API：代码简洁，构建模型速度快，灵活度低，不... 查看详情
paddlepaddle模型训练和预测之高级api(代码片段)
...epaddle对于模型的训练提供了两种不同的方式，分别是高级API和基础API，两种模型的训练方式各有优劣，对于不同的使用场景我们可以选择不同的方式高级API：代码简洁，构建模型速度快，灵活度低，不... 查看详情
echarts.js学习交互组件
ECharts.js交互组件ECharts.js有很多的交互组件，一般经常用到的组件有这些： title：标题组件，包含主标题和副标题。 legend：图例组件,展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。... 查看详情
echarts.js学习交互组件
ECharts.js交互组件ECharts.js有很多的交互组件，一般经常用到的组件有这些： title：标题组件，包含主标题和副标题。 legend：图例组件,展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。... 查看详情