setTimeout函数是JavaScript中的一个内置函数，它允许您在指定的时间后执行一段代码。在这种情况下，setTimeout函数用于在用户悬停在折线图上的某个点上时显示饼图之前等待一段时间。这是为了避免在用户快速移动鼠标时显示饼图。具体来说，setTimeout函数将在500毫秒后执行传递给它的函数，这将在myChart对象的选项中将饼图的show属性设置为true。 您可以删除setTimeout函数，但这可能会导致饼图在用户快速移动鼠标时显示。如果您决定删除setTimeout函数，请确保测试饼图是否在所有情况下都能正确显示。 updateAxisPointer事件是当用户悬停在折线图上的某个点时触发的事件。myChart.on('updateAxisPointer', function (event) {...}事件监听器监听此事件，并使用新的系列对象更新myChart对象的选项。新的系列对象是一个饼图，当用户悬停在折线图上的某个点时显示。饼图对象的encode属性指定了如何将数据映射到图表的可视元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:500px;height:400px">
</div>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
setTimeout(function () {
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
]
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
grid: { top: '55%' },
series: [
{
name:"Milk Tea",
symbol:"none",
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{name:"Matcha Latte",
type: 'line',
symbol:"none",
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
},
{name:"Cheese Cocoa",
type: 'line',
symbol:"none",
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{name:"Walnut Brownie",
type: 'line',
symbol:"none",
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
emphasis: {
focus: 'self'
},
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
const dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.on('click', function (params) {
console.log(params);
const data = params.data;
const option = myChart.getOption();
// option.series[0].data = data.data;
option.series.forEach(function(item){
item.lineStyle={
width:2,
}
if(params.name!=item.name&&item.type!="pie")
item.lineStyle={
width:0,
}
})
console.log(option);
myChart.setOption(option);
});
myChart.setOption(option);
});
option && myChart.setOption(option);
</script>
</body>
</html>
标签：option,series,myChart,数据共享,点击,setTimeout,type,echarts,name From： https://www.cnblogs.com/zhaofen/p/17237168.html