快捷導(dǎo)航

Vue使用echarts散點(diǎn)圖在區(qū)域內(nèi)標(biāo)點(diǎn)

更新時(shí)間：2022年03月25日 12:16:00 作者：浩鋮

這篇文章主要為大家詳細(xì)介紹了Vue使用echarts散點(diǎn)圖在區(qū)域內(nèi)標(biāo)點(diǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Vue 使用 echarts 散點(diǎn)圖在區(qū)域內(nèi)標(biāo)點(diǎn)，供大家參考，具體內(nèi)容如下

首先是因?yàn)轫?xiàng)目，需要在一個(gè)區(qū)域內(nèi)根據(jù)坐標(biāo)標(biāo)出在標(biāo)準(zhǔn)大小的玻璃中標(biāo)出檢測(cè)出含有缺陷的坐標(biāo)點(diǎn)。
假如說，一塊玻璃的大小是標(biāo)準(zhǔn)的 100200 mm的大小，這個(gè)是定死的，不會(huì)變，每塊都這么大。
那么就直接在界面上創(chuàng)建一個(gè)100200px的div，表示是這塊玻璃。
規(guī)定，這塊玻璃的中心點(diǎn)是原點(diǎn)（0,0），向右向上是正，向左向下是負(fù)。
所以就是這個(gè)樣子

所以說我就想用 echarts 直接在界面上渲染。

html

首先在界面上繪制一個(gè)div來(lái)放置echarts。其中這個(gè)被我抽離出來(lái)做成了組件，組件大小已經(jīng)規(guī)定好了，就是200*100的標(biāo)準(zhǔn)大小。公司要求不能拉伸，不然給人的感覺點(diǎn)就是錯(cuò)位的，如果太大，可以按比例縮小或放大。

<template>
? <div style="width: 100%;height: 100%;border: 1px solid #dee1e6;background-color: #f1f3f4;">
? ? <div id="map" style="width: 100%;height:100%;"></div>
? </div>
</template>

然后是給散點(diǎn)圖畫坐標(biāo)，其實(shí)這個(gè)地方就很煩。
echarts 的坐標(biāo)和公司的有出入。

首先設(shè)置x軸和 y軸

// 循環(huán)界面
let xLabel = []
let yLabel = []
for (let i = -49; i <= 50; i++) {
? ? ? ? ? xLabel.push(i)
? ? ? ? }
? ? ? ? for (let y = -99; y <= 100; y++) {
? ? ? ? ? yLabel.push(y)
? ? ? ? }

然后是繪制點(diǎn)的集合

后臺(tái)返回來(lái)的點(diǎn)的數(shù)據(jù)結(jié)構(gòu)大體是這個(gè)樣子的。

series.push({
? ? symbolSize: 10,
? ? ? ? ? color: 'red',
? ? ? ? ? name: this.showData[2],
? ? ? ? ? // data下面是計(jì)算出的，就是楞加
? ? ? ? ? data: [[this.showData[0] / 1000 + 49, this.showData[1] / 1000 + 99]],
? ? ? ? ? type: 'scatter',
})

坐標(biāo)需要轉(zhuǎn)換，除1000，不解釋了，就這樣規(guī)定的。

然后就可以繪制散點(diǎn)圖了。

let option = {
? ? ? ? ? grid: { ? // 因?yàn)榫褪莻€(gè)圖片，模擬玻璃，就把繪制的邊距設(shè)置為0，繪制區(qū)域充滿整個(gè)屏幕
? ? ? ? ? ? top: 0,
? ? ? ? ? ? left: 0,
? ? ? ? ? ? right: 0,
? ? ? ? ? ? bottom: 0,
? ? ? ? ? },
? ? ? ? ? xAxis: {?
? ? ? ? ? ? show: false,
? ? ? ? ? ? data: xLabel
? ? ? ? ? },
? ? ? ? ? yAxis: {
? ? ? ? ? ? show: false,
? ? ? ? ? ? data: yLabel
? ? ? ? ? },
? ? ? ? ? series,
? ? ? ? }
? ? ? ? this.charts = echarts.init(document.getElementById('map'))
? ? ? ? this.charts.setOption(option, true)
? ? ? ? // 下面這個(gè)點(diǎn)擊事件是當(dāng)我點(diǎn)擊圖上的點(diǎn)的是后觸發(fā)的點(diǎn)擊事件
? ? ? ? this.charts.on('click', (params) => {
? ? ? ? ? if (params.componentSubType === 'scatter') {
? ? ? ? ? ? console.log('pointClick ----> ', params.seriesName)
? ? ? ? ? }
})

可以了。

大體效果就這個(gè)樣子。