Событие — это определенное действие, выполняемое пользователем или самим браузером, например щелчок, наведение курсора мыши и запуск события загрузки после загрузки страницы, все из которых являются событиями. Для того чтобы записывать действия и поведение пользователя, необходимо завершить обработку обработки событий мыши и событий взаимодействия компонентов.
Функция, которая отвечает на событие, называется обработчиком событий, и ее также можно назвать обработчиком событий или обработчиком событий. Событие мыши — это событие, которое запускается, когда операция мыши щелкает график диаграммы (например, щелчок, двойной щелчок, контекстное меню) или график диаграммы наведения (например, наведение мыши, отключение мыши, перемещение мыши). В ECharts любая операция пользователя может вызвать соответствующие события. В ECharts поддерживаются 9 типов обычных событий мыши, включая щелчок, двойной щелчок, наведение мыши, движение мыши, движение мыши вверх, наведение мыши, выход мыши, глобальный выход и контекстное меню.
Среди них чаще всего используется событие клика. Общие события мыши и их описания показаны в таблице.
На элементе диаграммы подряд и запуск событий Mousedown Touchup проверит событие Click. Нажмите дважды на мероприятии TRIGGER SECUSIONE, получит событие DBLClick. При отмене или мышке мыши в Mousedown щелкните по событию, не будет запущено. Если прямое или непрямое отменить событие CLICK, событие DBLClick не будет запущено. Использование профессионального регистрации колледжа в 2020 году показана гистограмма.
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main")); //基于准备好的dom，初始化ECharts图表
var option = { //指定图表的配置项和数据
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
title: { text: '某学院2020年专业招生情况汇总表', left: 70, top: 9 },
tooltip: { tooltip: { show: true }, },
legend: { data: ['2019年招生'], left: 422, top: 8 },
xAxis: { //配置x轴坐标系
data: ["大数据", "云计算", "ERP", "人工智能", "软件开发", "移动开发", "网络技术"]
},
yAxis: {}, //配置y轴坐标系
series: [{ //配置数据系列
name: '招生人数:',
type: 'bar', barWidth: 55, //设置柱状图中每个柱子的宽度
data: [350, 200, 66, 210, 466, 200, 135]
}]
};
myChart.setOption(option); //使用刚指定的配置项和数据显示图表
//回调函数处理鼠标点击事件并跳转到相应的百度搜索页面
myChart.on('click', function (params) {
var yt = alert("鼠标单击事件,您刚才单击了:" + params.name);
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
window.addEventListener("resize", function () {
myChart.resize(); //使图表自适应窗口的大小
});
myChart.setOption(option); //为echarts对象加载数据
</script>
</body>
</html>
Сама функция обратного вызова является параметром основной функции. Функция обратного вызова передается как параметр на другую основную функцию. Когда главная функция выполняется, выполняется функция обратного вызова. Этот процесс называется обратным вызовом. В функции обратного вызова имя и имя данных и имя серии в объекте получены, а затем другая информация получается путем индексации в данных, а затем диаграмма обновляется, отображается плавающий слой и так далее. Нарисуйте гистограмму, используя данные о продажах продукта и данные доходности, как показано на рисунке.
Когда вы щелкаете столбец «Доходность» второго продукта «Свитер» на левом изображении, появляется диалоговое окно с подсказкой, как показано на правом рисунке. На изображении справа можно получить информацию об атрибутах параметра params столбца «урожайность» второго продукта «Свитер» на изображении слева.
Исходный код легенды выглядит следующим образом:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的dom，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
var option = { //指定图表的配置项和数据
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
title: { text: '产品销量产量利润统计', left: 70, top: 9 },
xAxis: { //配置x轴坐标系
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {}, //配置y轴坐标系
tooltip: { //配置提示框组件
trigger: 'item', show: true,
formatter: "{a} <br/>{b} : {c}"
},
legend: {},
series: [ //配置数据系列
{ //设置数据系列1：销量
name: '销量', type: 'bar',
data: [5, 28, 16, 20, 15, 33]
},
{ //设置数据系列2：产量
name: '产量', type: 'bar',
data: [15, 38, 20, 24, 20, 45]
},
{ //设置数据系列3：利润
name: '利润', type: 'bar',
data: [25, 15, 10, 10, 15, 22]
}
]
};
myChart.setOption(option); //使用刚指定的配置项和数据显示图表
window.addEventListener("resize", function () {
myChart.resize(); //使图表自适应窗口的大小
});
//回调函数处理鼠标点击事件并且显示各数据信息内容
myChart.on('click', function (params) {
alert("第" + (params.dataIndex + 1) + "件产品:" + params.name + "的" +
params.seriesName + "为:" + params.value +
"\n\n 1--componentType:" + params.componentType +
"\n 2--seriesType:" + params.seriesType +
"\n 3--seriesIndex:" + params.seriesIndex +
"\n 4--seriesName:" + params.seriesName +
"\n 5--name:" + params.name +
"\n 6--dataIndex:" + params.dataIndex +
"\n 7--data:" + params.datax +
"\n 8--dataType:" + params.dataType +
"\n 9--value:" + params.value +
"\n 10--color:" + params.color);
});
myChart.setOption(option); //为echarts对象加载数据
</script>
</body>
</html>
В коде гистограммы, содержащем параметры параметров события щелчка мыши, вы можете получить доступ к основным свойствам параметров события мыши, вызвав функцию обратного вызова, например params.dataIndex, params.name, params.seriesName, params. значение, в 12-й и 13-й строках снизу указано «Товар 2: Производство свитера — 38». С 11-й по 2-ю строки кода получают доступ к 10 основным свойствам в параметрах params события мыши по очереди и отображают их в каждой строке в диалоговом окне подсказки на рис. 5-13 по очереди. Обратите внимание, что значения params.data и params.dataType не определены.