当前位置：首页 > news >正文

echarts

news 来源：原创 2025/5/1 7:43:55

在使用echarts中,当返回的(series)多条数据时, echarts渲染的是一个图表多条折现，还是(series)中每个数据单独展示成独立图表

在(series)每条数据单独展示时，echarts的鼠标移入tooltip是同时显示，还是移入当前的只显示当前echarts的tooltip

echarts: 5.5.0

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多图联动</title><script src="./js/echarts.min.js"></script>
</head>
<body>
<div><button onclick="onInitEcharts(1)">单图</button><button onclick="onInitEcharts(2)">多图</button><button onclick="onTab(1)">统一滑动</button><button onclick="onTab(2)">单独滑动</button>
</div>
<div id="app"></div>
</body><script>let displayType = 1  // 单图   2 多图let axisPointer = 1  // 1 统一 2 单独// 基本数据结构let optionlLineData = {tooltip: {trigger: 'axis'},legend: {},grid: {top: 8,left: 10,right: 10,bottom: 60,containLabel: true},xAxis: [{type: 'category',data: []}],yAxis: [{type: 'value'}],series: [{name: 'Email',type: 'line',data: []},{name: 'Union Ads',type: 'line',data: []}]}// 返回数据let option = {xAxis: [{type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}],tooltip: {trigger: 'axis',},color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],legend: {},yAxis: [{axisLabel: {formatter: " {value} "},type: "value"}],series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: "line"},{data: [720, 832, 801, 834, 1190, 1230, 1220],type: "line"}, {data: [620, 732, 701, 734, 1090, 1130, 1120],type: "line"}, {data: [520, 632, 601, 634, 990, 1030, 1020],type: "line"}]}// 其他颜色值let colors = []let optionLine = nulllet chartArray = []let myChartList = []let fixedClass = 'chart_connect'// 单图还是多图切换function onInitEcharts(type) {displayType = typeconsole.log(chartArray);let app = document.getElementById('app')chartArray.forEach((item, index) => {let elDom = document.getElementsByClassName(fixedClass + index)[0]app.removeChild(elDom)})chartArray = []this.load()}// tooltip 解绑与绑定function onTab(type) {axisPointer = typethis.getEcharts()// if (axisPointer === 1) {//     bindAction(myChartList)// } else {//     disOffConnect(myChartList)// }}load()// 初始加载function load() {let titleList = [{targetName: 'echartsTitle',unitName: '',queryTime: ''},{targetName: 'echartsTitle',unitName: '',queryTime: ''},{targetName: 'echartsTitle',unitName: '',queryTime: ''},{targetName: 'echartsTitle',unitName: '',queryTime: ''}]optionLine = createLineData(option, optionlLineData, titleList)console.log(' this.optionLine', optionLine);let app = document.getElementById('app')// 单独展示if (displayType === 1) {chartArray = initEcharts(optionLine, [], titleList)console.log(chartArray);chartArray.forEach((item, index) => {let div = document.createElement('div')div.className = fixedClass + indexdiv.style.width = '100%'div.style.height = '300px'app.appendChild(div)})setTimeout(() => {if (chartArray.length) {getEcharts()}}, 500)} else {chartArray = [optionLine]console.log(chartArray);let div = document.createElement('div')div.className = fixedClass + 0div.style.width = '100%'div.style.height = '300px'app.appendChild(div)if (chartArray.length) {getEcharts()}}}function initEcharts(chartEcharts, gridTable, titleList) {if (Object.keys(chartEcharts).length) {const chartArray = chartEcharts.series.map((item, index) => {let queryTime = titleList[index].queryTimelet unitName = titleList[index].unitNamereturn {...chartEcharts,tooltip: {trigger: 'axis',// axisPointer: {//     type: 'shadow'// },// formatter: (params) => this.tooltipFormatter(params, queryTime, unitName),// position: function (pos, params, dom, rect, size) {//     const yPos = '20%'//     let xPos = 0//     if (pos[0] < size.viewSize[0] / 2) {//         xPos = pos[0] + 10//     } else {//         xPos = pos[0] - dom.offsetWidth - 10//     }//     return [xPos, yPos]// }},series: [Object.assign(item,{symbolSize: 0,lineStyle: {normal: {width: 3}},sampling: 'lttb'})],index: index,// table: gridTable && gridTable[index] || [],titleList: titleList[index]}})return chartArray // 所有的echarts数据}}function createLineData(data, optionlLineData, titleList) {let optionChartLine = dataconsole.log('chartData----', optionChartLine)if (optionChartLine && Object.keys(optionChartLine).length) {let colorList = optionChartLine.colorif (colors && colors.length) {colorList = colors.concat(optionChartLine && optionChartLine.color)}optionChartLine.backgroundColor = '#f4f4f4'optionChartLine.color = colorList// 边距optionChartLine.grid = optionlLineData.gridoptionChartLine.grid.top = 40optionChartLine.grid.right = 25optionChartLine.grid.bottom = 10optionChartLine.dataZoom = {show: false}optionChartLine.tooltip.trigger = 'axis'// 工具栏optionChartLine.toolbox = {show: true,right: 10,feature: {// dataZoom: {//   yAxisIndex: 'none'// },// dataView: { readOnly: false },magicType: {type: ['line', 'bar']},// restore: {},saveAsImage: {}}}// y轴optionChartLine.yAxis.forEach((y, index) => {y.splitLine = { // 坐标轴区域分割线show: true,lineStyle: {color: '#c6d4e1',width: 1,type: 'dotted'}}})// x轴optionChartLine.xAxis.forEach((x, index) => {x.splitLine = { // 坐标轴区域分割线show: true,lineStyle: {color: '#c6d4e1',width: 1,type: 'dotted'}}x.axisLabel = {interval: 'auto'// interval: x.data.length > 24 ? Math.ceil(Number(x.data.length / 24)) : 0}// x.aa = Number(x.data.length / 24)// x.bb = Math.ceil((x.data.length / 24))// x.data = x.data.sort()})let legendData = []optionChartLine.series.forEach((s, index) => {let colorIndex = this.styleVal === '1' ? index : 0// let seriesName = s.name.split('||')// legendData.push(seriesName[0])// s.name = seriesName[0]// 填充颜色// s.areaStyle = {//   color: {//线性渐变前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置//     type: 'linear',//     x: 0,//     y: 1,//     x2: 0,//     y2: 0,//     colorStops: [{//       // offset: 0, color: colorRgba[index] // 0% 处的颜色//       // offset: 0, color: this.colorRgbaTransparency(colorList, '0')[colorIndex] // 0% 处的颜色//     },//       {//         // offset: 0.5, color: this.colorRgbaTransparency(colorList, '0.3')[colorIndex] // 100% 处的颜色//       },//       {//         // offset: 1, color: colorRgba[index] // 100% 处的颜色//         // offset: 1, color: 'transparent'// 100% 处的颜色//       }//     ],//     // globalCoord: false// 缺省为 false//     // shadowColor: this.colorRgbaTransparency(colorList, '0')[index],//     // shadowBlur: 10//   }// }// if (s.data.length) {//     let seriesData = s.data.map(v => {//         if (typeof v === 'number' && v === 0) {//             v = 0//         } else if (!v || (v && v === '-666666666' || v === -666666666)) {//             v = '-'//         }//         return v != '-' ? (v).toFixed(2) : '-'//     })//     s.data = seriesData// }s['dataIndex'] = index})// 图例组件optionChartLine.legend.top = 5// optionChartLine.legend.right = 150optionChartLine.legend.left = 10optionChartLine.legend.width = '80%'// optionChartLine.legend.data = legendDataconsole.log('optionChartLine', optionChartLine)return optionChartLine}}function bodyResize() {if (myChartList.length) {myChartList.forEach(item => {item.resize()})}}function getEcharts(flag) {bodyResize()chartArray.forEach((item, index) => {let elDom = document.getElementsByClassName(fixedClass + index)[0]console.log(elDom);let dom = echarts.init(elDom)dom.clear()dom.group = fixedClass + 'Echarts'dom.setOption(item, true)myChartList.push(dom)console.log(myChartList);// this.$set(myChartList, index, dom)})if (axisPointer === 1) {console.log('多表联动')// echarts.connect(this.myChartList) // 进行图表多表联动bindAction(myChartList)} else {disOffConnect(myChartList)// echarts.disConnect('chart_connectEcharts') // 解除图表多表联动}}function bindAction(chartList) {echarts.util.each(chartList, function (fromChart) {echarts.util.each(chartList, function (toChart) {if (fromChart === toChart) {return}// tooltip 联动fromChart.on('updateAxisPointer', function (params) {toChart.dispatchAction(toChart.makeActionFromEvent(params),true)})})})}function disOffConnect(chartList) {echarts.util.each(chartList, function (fromChart) {echarts.util.each(chartList, function (toChart) {if (fromChart === toChart) {return}// tooltip 解除联动fromChart.off('updateAxisPointer')})})}
</script>
</html>