var data = [ [10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], [11.0, 8.33], [14.0, 9.96], [6.0, 7.24], [4.0, 4.26], [12.0, 10.84], [7.0, 4.82], [4.0, 9.0], [5.0, 5.68] ] var ndata = [] for (var iten of data) { ndata.push({ name: data.indexOf(iten) + 'rode', '客流量': iten[0], '销售量': iten[1] }) } var keys = Object.keys(ndata[0]) keys=keys.slice(keys.indexOf('name')+1,keys.length) option = { legend:{ show:true }, tooltip: { tigger: "axis", show: 'show', formatter: function(params) { var name = params.name, div = '

' + params.name + '

' for (var item of ndata) { if (item.name == name) { for (var ite of keys) { div += '

' + ite + ' : ' + item[ite] + '

' } break } } div += '

' return div } }, xAxis: { type: 'value', splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, axisLine: { symbol: ['none', 'arrow'], symbolSize: [10, 12], lineStyle: { color: "#d9d9d9" } } }, yAxis: { type: 'value', splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, axisLine: { symbol: ['none', 'arrow'], symbolSize: [10, 12], lineStyle: { color: "#d9d9d9" } } }, series: setSeries(ndata, [8]) }; function setSeries(data, splitPoint) { var splitP1 = splitPoint[0] || 0; var ser=['潜力店','旗舰店','提升店','流量店'] var nData = [], series = [], d1 = [], d2 = [], d3 = [], d4 = [] for (var item of data) { var x1 = item[keys[0]], y1 = item[keys[1]] var idat = { name: item.name, value: [x1 - splitP1, y1 - (splitPoint[1] || splitP1)], } console.log(idat) if (idat.value[0] <= 0 && idat.value[1] > 0) { d1.push(idat) } if (idat.value[0] > 0 && idat.value[1] >= 0) { d2.push(idat) } if (idat.value[0] <= 0 && idat.value[1] <= 0) { d3.push(idat) } if (idat.value[0] > 0 && idat.value[1] <= 0) { d4.push(idat) } } nData.push(d1), nData.push(d2), nData.push(d3), nData.push(d4); nData.forEach(function(item, index) { series.push({ name: ser[index], type: "scatter", data: item, label: { show: true, formatter: '{b}', color: "#7b8391", position: [20, -10], } }) }) return series }

Echarts在线免费图表