标签：map myChart echarts item let 圈中 seriesIndex data 拖拽
原生HTML + JavaScript版本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>曲线形式的统计图示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script> -->
<style>
* {
margin: 0;
padding: 0;
}
#ecDiv {
width: 1400px;
height: 600px;
box-shadow: 0px 0px 10px #ccc;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="ecDiv"></div>
</body>
<script type="text/javascript">
let color = ['#0071db', '#ff4868']
let xdata = ['2024-1-1', '2024-1-2', '2024-1-3', '2024-1-4', '2024-1-5']
const data = [
{
name: 'line1',
data: [100, 200, 300, 400, 500]
},
{
name: 'line2',
data: [200, 200, 200, 200, 200]
}
]
const lineStyle = {
type: 'scatter',
smooth: true,
coordinateSystem: 'cartesian2d'
}
const computedSeries = (Data, selected, dif = 0) => {
let items = [];
Data.map((item, key) => {
let point = {
name: item.name,
data: item.data.map((val, i) => {
let dataValue = {
value: val,
symbolSize: 1,
}
return dataValue
}),
...lineStyle
}
items.push(point);
})
selected.map((item) => {
let seriesIndex = item.seriesIndex;
let findItem = items.find((v, k) => {
if (item.seriesIndex === k) {
return v;
}
});
findItem && findItem.data.map((val, key) => {
if (item.dataIndex.includes(key)) {
val['symbolSize'] = 10;
val['value'] = val.value + dif;
}
})
})
let lines = items.map((v, k) => {
let itemData = v.data.map((v) => v.value);
return {
z: 1,
type: 'line',
name: v.name,
data: itemData
}
})
items.push(...lines)
return items;
}
const echartDataSetData = (Data, selected, dif = 0) => {
if (dif == 0) return;
selected.map((item) => {
let seriesIndex = item.seriesIndex;
let Dataitem = Data[seriesIndex];
Dataitem && Dataitem.data.map((val, key) => {
if (item.dataIndex.includes(key)) {
Dataitem.data[key] = val + dif;
}
})
})
}
const seriesDataToGraphic = (series, batchSelected) => {
let dom = document.getElementById('ecDiv');
let myChart = echarts.getInstanceByDom(dom);
let graphic = [];
let onm ousedownY = 0;
let oldDif = 0;
series.map((item, sindex) => {
if (item.type === 'scatter') {
item.data.map((dt, tk) => {
//! 等于10 标识选中
if (dt.symbolSize && dt.symbolSize === 10) {
let dataIndex = tk;
let position = myChart.convertToPixel({ seriesIndex: sindex }, [dataIndex, dt.value]);
let graphicItem = {
type: 'circle',
position: position,
shape: {
r: 5
},
invisible: true,
draggable: true,
onm ousedown: echarts.util.curry((e) => {
onm ousedownY = e.offsetY;
myChart.dispatchAction({
type: 'restore'
})
}),
ondrag: echarts.util.curry((dataI, e) => {
let onm ousedownYToValue = myChart.convertFromPixel({ seriesIndex: sindex }, [dataI, onm ousedownY])[1];
let ondragYToValue = myChart.convertFromPixel({ seriesIndex: sindex }, [dataI, e.offsetY])[1];
let dif = onm ousedownYToValue - ondragYToValue;
let seriesData = computedSeries(data, batchSelected, -dif);
let graphics = seriesDataToGraphic(seriesData, batchSelected);
myChart.setOption({
series: seriesData,
graphic: graphics
})
oldDif = dif;
}, dataIndex),
ondragend: echarts.util.curry(() => {
echartDataSetData(data, batchSelected, -oldDif);
setSelectTitle(batchSelected)
}, dataIndex),
z: 100,
}
graphic.push(graphicItem);
}
})
};
})
return graphic;
}
const setSelectTitle = (selected) => {
let dom = document.getElementById('ecDiv');
let myChart = echarts.getInstanceByDom(dom);
let title = ''
selected.map((item) => {
if (!item.dataIndex.length) {
return;
}
let seriesName = item.seriesName;
let dataIndexList = item.dataIndex.map((i) => {
return `{x|${xdata[i]}数值：${data[item.seriesIndex].data[i]}}\n`
})
let line = `{name|${seriesName}}${dataIndexList}`;
title += '\n' + line;
})
myChart.setOption({
title: {
text: '已选中：\n' + title,
right: 20,
top: 40,
textStyle: {
rich: {
name: {
color: '#333'
},
x: {
color: 'red'
}
}
}
}
})
}
const initEchart = () => {
let dom = document.getElementById('ecDiv');
let myChart = echarts.init(dom);
let dataIndexs = [];
let seriesIndexs = [];
let series = computedSeries(data, []);
let option = {
color,
xAxis: [
{
type: 'category',
data: xdata
}
],
yAxis: [
{
type: 'value'
}
],
grid: {
width: "80%",
containLabel: true,
left: 30,
top: 50,
right: 30,
bottom: 20
},
legend: {
show: true,
data: data.map((v) => v.name)
},
brush: {
xAxisIndex: 'all',
throttleType: 'debounce',
transformable: false,
removeOnClick: true,
brushMode:'single',
throttleDelay:0,
brushStyle: {
borderWidth: 1,
color: 'rgba(120,140,180,0.1)',
borderColor: 'rgba(120,140,180,0.1)'
},
inBrush: {
symbolSize: 10
},
outOfBrush: {
colorAlpha: 1,
opacity: 1
},
},
animation: false,
series
}
myChart.setOption(option);
myChart.on('brushselected', (params) => {
if (!params.batch[0].areas.length) {
return;
};
let batch = params.batch[0];
let seriesData = computedSeries(data, batch.selected);
let graphics = seriesDataToGraphic(seriesData, batch.selected);
myChart.setOption({
series: seriesData,
graphic: graphics
})
setSelectTitle(batch.selected);
// 不加这个有毛病，echartsbug； 首先选择两个线的点拖拽，取消选择后在选择上次的其中一个拖动会选择两个点
window.onmouseup = () => {
myChart.dispatchAction({
type: 'restore'
})
}
})
// ! 点击取消 取消选中节点
myChart.on('brush', (params) => {
if (params?.command === 'clear') {
let seriesData = computedSeries(data, []);
let graphics = seriesDataToGraphic(seriesData, []);
myChart.setOption({
series: seriesData,
graphic: graphics
})
setSelectTitle([]);
}
})
}
initEchart();
</script>
</html>
标签：map,
myChart,
echarts,
item,
let,
圈中,
seriesIndex,
data,
拖拽
From： https://blog.csdn.net/ni15534789894/article/details/140267180