vue 关于Echarts 散点图的绘制 |
您所在的位置：网站首页 › echarts动态获取数据在若依项目中 › vue 关于Echarts 散点图的绘制 |
vue 关于Echarts 散点图的绘制
|
目的：需要在图片上添加触发器并显示信息，类似于全国地图那个，但这里要的是图片。 方法：将图片设置成背景图，然后用Echarts的散点图记录坐标，在固定的坐标上添加触发器，触发提示信息 import echarts from 'echarts' export default { name: 'chartFirst', data () { return { } }, methods:{ drawPie(id){ //在提示信息中显示 const schema = [ {name: 'Department', index: 0, text: '部门', unit: ''}, {name: 'Effect', index: 1, text: '作用', unit: ''}, {name: 'State', index: 2, text: '状态', unit: ''} ]; //初始化 this.charts = echarts.init(document.getElementById(id)) this.charts.setOption({ xAxis: { splitLine: { //坐标轴内竖线 lineStyle: { color:null, //没有颜色即不显示 } }, axisLine: { //直角坐标系x轴 show:false, lineStyle: { //为了不让轴上的数字显现 color:null, } } }, yAxis: { splitLine: { //坐标轴内横线 lineStyle: { color:null, //没有颜色即不显示 } }, axisLine: { //直角坐标系y轴 show:false, lineStyle: { //为了不让轴上的数字显现 color:null, } } }, // 标题 title: { // text: 'Anscombe\'s quartet', left: 'center', top: 0 }, tooltip: { //触发提示框 trigger: 'item', //触发器 // formatter: '{a}: ({c})', //触发器触发时显示的内容，'({c})'为坐标 formatter: function (obj) { var value = obj.value; return schema[0].text + '：' + value[2] + '' +schema[1].text + '：' + value[3] + '' +schema[2].text + '：' + value[4] + '' } }, series: [{ symbol:'rectangle', // 点的图形：长方形，若不写默认为圆 symbolSize: 60, //点的大小 color:'white', //点的颜色 itemStyle: { normal: { // opacity: 0.001, //图元以及其附属物（如文字标签）的透明度 } }, data: [ //点的位置（坐标轴范围最大与最小根据数据本身的范围自动定） [0,0,'部门0','开始0','启用0'], [50,80,'部门1','开始1','启用1'], [50,20,'部门2','开始2','启用2'], [20,40,'部门3','开始3','启用3'], [80,40,'部门4','开始4','启用4'], [20,60,'部门5','开始5','启用5'], [80,60,'部门6','开始6','启用6'], [100,100,'部门7','开始7','启用7'], ], type: 'scatter' //鼠标放到点上时鼠标的样式(此处为小手)。同 css 的鼠标样式，默认 'default'。 }] }) } }, //调用 mounted(){ this.$nextTick(function() { this.drawPie('chartFirst') }) } }
白框所在的地方即为所加背景图片中要加触发器的地方，点的大小和透明度皆可调整 （在series中调整）
上图为透明度为0.001时的效果，鼠标移动到指定区域会显示提示信息 现阶段问题为：图中触发器所在白框的长宽不知道怎么设置，若背景图片中提示的区域不为正方形也不为圆形，会有麻烦。 解决方法：可通过多个小正方形组成一个长宽不等的长方形或是其他不规则图形
这个解决方法虽然也能出来，但总感觉不太好，有大佬知道怎么搞的吗？？ 欢迎留言 |
【本文地址】
今日新闻 |
推荐新闻 |