37-Vue之ECharts高级-交互API
Posted 爱学习de测试小白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了37-Vue之ECharts高级-交互API相关的知识，希望对你有一定的参考价值。
交互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>
以上是关于37-Vue之ECharts高级-交互API的主要内容，如果未能解决你的问题，请参考以下文章