echarts地图散点,echarts散点图tooltip

　　本文主要利用echarts散点图详细介绍Vue在该地区的标点符号。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　e使用echarts散点图为您参考的区域加标点。具体情况如下

　　首先，因为项目的原因，需要根据坐标在一个区域内的标准尺寸玻璃上标出检测到的缺陷的坐标。

　　比如说，一块玻璃的尺寸如果是100，200mm的标准尺寸，这个是固定的，不会变。每一块都那么大。

　　然后直接在界面上创建一个100200px的div，表示就是这块玻璃。

　　规定这个玻璃的中心点是原点(0，0)，向右为正，向左下为负。

　　原来如此。

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

　　html

　　首先在界面上画一个div来放置echarts。我把这个拉出来做成一个组件。构件的尺寸已经指定，是200*100的标准尺寸。公司要求不能拉伸，否则感觉点错位。如果太大，可以缩小或放大。

　　模板

　　div style= width:100%；身高：100%；边框：1px纯色# dee1e6背景色：# f1f3f4

　　div id= map style= width:100%；高度：100%；/div

　　/div

　　/模板

　　然后就是画散点图的坐标。其实这个地方很讨厌。

　　echarts的坐标和公司的坐标不一样。

　　首先设置X轴和Y轴。

　　//循环接口

　　设xLabel=[]

　　设yLabel=[]

　　for(设I=-49；i=50i ) {

　　xLabel.push(i)

　　}

　　for(设y=-99；y=100y ) {

　　yLabel.push(y)

　　}

　　然后是绘图点的集合。

　　后台返回的点的数据结构大致是这样的。

　　series.push({

　　symbolSize: 10，

　　颜色：红色，

　　名称：this.showData[2]，

　　//数据下面是计算出来的，也就是冷家

　　数据：[[this.showData[0]/1000 49，this.showData[1]/1000 99]]，

　　类型：“散点图”，

　　})

　　坐标需要换算，1000除外，不解释。是这样规定的。

　　然后就可以画散点图了。

　　let option={

　　Grid: {//因为只是一张图片，模拟玻璃，将绘制的边距设置为0，绘制的区域填满整个屏幕。

　　top: 0，

　　左：0，

　　右：0，

　　底部：0，

　　},

　　xAxis: {

　　秀：假的，

　　数据：xLabel

　　},

　　亚西斯：{

　　秀：假的，

　　数据：yLabel

　　},

　　系列，

　　}

　　this . charts=echarts . init(document . getelementbyid( map ))

　　this.charts.setOption(选项，true)

　　//下面的click事件是我在图上的点上单击Yes时触发的click事件。

　　this.charts.on(click ，(params)={

　　if(params . component subtype=== scatter ){

　　console.log(pointClick -，params.seriesName)

　　}

　　})

　　够了。

　　效果大致是这样的。

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。