首先,您需要在此配置选项中添加此代码 链接:https://echarts.apache.org/zh/option.html#dataZoom-inside
dataZoom: [{ type: 'inside', //1平移 缩放 throttle: '50', //设置触发视图刷新的频率。单位为毫秒(ms)。 minValueSpan: 6, ///用于限制窗口大小的最小值,可设置在类别轴上 5 表示 5 个类目 start: 1, ////数据窗口范围的起始百分比 范围是:0 ~ 100。表示 0% ~ 100%。 end: 50, ///数据窗口范围结束百分比。范围是:0 ~ 100。 zoomLock: true, 如果设置为// true 锁定所选区域的大小,即只能平移,不能缩放。 }],
这是写好的组件
import * as echarts from '../../ec-canvas/echarts'; function setPieOption(chart, pieData) { const data = pieData.names.map((_, index) => ({ value: pieData.counts[index], name: pieData.names[index], })); const option = { title: { left: 'center', text: `${pieData.radioName}` }, tooltip: { trigger: 'item' }, series: [{ type: 'pie', radius: '50%', data,center:[50%,60%] }], }; chart.setOption(option); } function setLineOption(chart, lineData) { console.log('lineData==>', lineData); const series = lineData.submitterName.map((item, index) => { return { name: item, type: 'line', data: lineData.data[index] }; }); const option = { title: { left: 'center', text: `${lineData.counterName}:${lineData.count}` }, xAxis: { type: 'category', data: lineData.time }, yAxis: { type: 'value' }, series, tooltip: { trigger: 'axis', position: function (point, params, dom, rect, size) { // 提示框位置 let x = 0; // x坐标位置 let y = 0; // y坐标位置 // 当前鼠标位置 let pointX = point[0]; let pointY = point[1]; // 外层div大小 // let viewWidth = size.viewSize[0]; // let viewHeight = size.viewSize[1]; // 提示框大小 let boxWidth = size.contentSize[0]; let boxHeight = size.contentSize[1]; // boxWidth > pointX 说明鼠标左侧放不下提示框 if (boxWidth > pointX) { x = 5; } else { // 左边放的下 x = pointX - boxWidth; } // boxHeight > pointY 说明鼠标上方放不下提示框 if (boxHeight > pointY) { y = 5; } else { // 上边放得下 y = pointY - boxHeight; } return [x, y]; }, }, }; chart.setOption(option); } function setHeatmapOption(chart, heatmapData) { console.log('heatmapData==>', heatmapData); const data = []; let min = 999999999; let max = -11111111; heatmapData.data?.forEach((yCates, y) => { yCates.forEach((value, x) => { data.push([x, y, value || '-']); if (value > max) max = value; if (value < min) min = value; }); }); const option = { dataZoom: [{ type: 'inside', //1平移 缩放 throttle: '50', //设置触发视图刷新的频率。单位为毫秒(ms)。单位为毫秒(ms)。 minValueSpan: 6, ///用于限制窗口大小的最小值,可设置在类别轴上 5 表示 5 个类目 start: 1, ////数据窗口范围的起始百分比 范围是:0 ~ 100。表示 0% ~ 100%。 end: 50, ///数据窗口范围结束百分比。范围是:0 ~ 100。 zoomLock: true, 如果设置为// true 锁定所选区域的大小,即只能平移,不能缩放。 }], grid: { left: '17%', bottom: '10%', top: '20%' }, title: { left: 'center', text: `${heatmapData.counterName}:${heatmapData.count}` }, tooltip: { position: function (point, params, dom, rect, size) { // 提示框位置 let x = 0; // x坐标位置 let y = 0; // y坐标位置 // 当前鼠标位置 let pointX = point[0]; let pointY = point[1]; // 外层div大小 // let viewWidth = size.viewSize[0]; // let viewHeight = size.viewSize[1]; // 提示框大小 let boxWidth = size.contentSize[0]; let boxHeight = size.contentSize[1]; // boxWidth > pointX 说明鼠标左侧放不下提示框 if (boxWidth > pointX) { x = 5; } else { // 左边放的下 x = pointX - boxWidth; } // boxHeight > pointY 说明鼠标上边放不下提示框 if (boxHeight > pointY) { y = 5; } else { // 上边放得下 y = pointY - boxHeight; } return [x, y]; }, formatter(params, ticket, callback) { const { dataString, time, submitterName } = heatmapData; const { data } = params; const label1 = `${time[data[0]]} - ${submitterName[data[1]]}:${data[2]}`; const tip = dataString[data[1]][data[0]]; const size = 28; let tipList = tip.split(';').sort((a, b) => a.length - b.length); let tipListRes = []; let tipTemp = tipList[0]; for (let i = 1; i < tipList.length; i ) { let temp = tipTemp ';' tipList[i]; if (temp.length > size) { tipListRes.push(tipTemp); tipTemp = tipList[i]; } lse {
tipTemp = tipTemp + ';' + tipList[i];
}
}
tipListRes.push(tipTemp);
const lineFeed = `
`;
// 为了让文本换行只能这样写
return `${label1}
${tipListRes.join(lineFeed)}`;
},
},
xAxis: { type: 'category', data: heatmapData.time, splitArea: { show: true } },
yAxis: { type: 'category', data: heatmapData.submitterName, splitArea: { show: true } },
visualMap: { min, max, show: false },
series: [
{
name: heatmapData.counterName,
type: 'heatmap',
data,
label: { normal: { show: true } },
itemStyle: { emphasis: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } },
},
],
};
chart.setOption(option);
}
Component({
properties: {
// 表单配置 json数组
chartData: {
type: Object,
value: {},
observer: 'chartDataObserver',
},
// 提交次数
censusSubmit:{
type: Object,
value: {},
observer:'censusSubmitObserver'
}
},
data: {
ecPie: { lazyLoad: true },
ecHeatmap: { lazyLoad: true },
ecLine: { lazyLoad: true },
pieHeight: '400rpx',
},
ready() {},
methods: {
initChart() {
const {censusSubmit, bizStatisticsCounterDTOList, bizStatisticsRadioDTOList } = this.data.chartData;
censusSubmit.forEach((item, index) => {
if (item.showHot) {
const id = '#mychart-dom-heatmap-censusSubmit' + index;
this.selectComponent(id).init((canvas, width, height, dpr) => {
const heatmapChart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr,
});
setHeatmapOption(heatmapChart, item);
return heatmapChart;
});
} else {
const lineId = '#mychart-dom-line-censusSubmit' + index;
this.selectComponent(lineId).init((canvas, width, height, dpr) => {
const lineChart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr,
});
setLineOption(lineChart, item);
return lineChart;
});
}
});
// 创建饼图
bizStatisticsRadioDTOList.forEach((item, index) => {
const id = '#mychart-dom-pie' + index;
console.log('==>', id);
this.selectComponent(id).init((canvas, width, height, dpr) => {
const pieChart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr,
});
setPieOption(pieChart, item);
return pieChart;
});
});
bizStatisticsCounterDTOList.forEach((item, index) => {
if (item.showHot) {
const id = '#mychart-dom-heatmap' + index;
this.selectComponent(id).init((canvas, width, height, dpr) => {
const heatmapChart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr,
});
setHeatmapOption(heatmapChart, item);
return heatmapChart;
});
} else {
const lineId = '#mychart-dom-line' + index;
this.selectComponent(lineId).init((canvas, width, height, dpr) => {
const lineChart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr,
});
setLineOption(lineChart, item);
return lineChart;
});
}
});
},
changeShowHotOrLine(e) {
const { index, flag } = e.currentTarget.dataset;
const { chartData } = this.data;
chartData.bizStatisticsCounterDTOList[index].showHot = flag;
this.setData({ chartData });
setTimeout(() => {
this.initChart();
});
},
changeShowHotOrLineCensusSubmit(e){
const { index, flag } = e.currentTarget.dataset;
const { chartData } = this.data;
chartData.censusSubmit[index].showHot = flag;
this.setData({ chartData });
setTimeout(() => {
this.initChart();
});
},
chartDataObserver(chartData) {
let { bizStatisticsRadioDTOList, bizStatisticsCounterDTOList } = chartData;
if (bizStatisticsCounterDTOList && bizStatisticsRadioDTOList) {
// 处理数据
chartData.bizStatisticsCounterDTOList.forEach((item) => {
// 热力图Y轴高度适配
let height = item.data?.length * 66.6 || 66.6;
height += 350; // 标题高度
item.heatmapHeight = height + 'rpx';
// 显示热力图还是折线图
item.showHot = true;
});
const censusSubmit = []
censusSubmit.push(chartData.bizStatisticsCounterDTOList[0])
chartData.bizStatisticsCounterDTOList.splice(0,1)
chartData.censusSubmit = censusSubmit
this.setData({ chartData });
console.log("chartData",chartData);
// 多个图表 延迟加载一下 保证dom存在
setTimeout(() => {
this.initChart();
}, 100);
}
},
},
});