vue 关于Echarts 散点图的绘制

最新推荐文章于 2023-10-24 19:29:47 发布

骑士树

最新推荐文章于 2023-10-24 19:29:47 发布

阅读量1.1k

点赞数

文章标签： vue echarts java

本文链接：https://blog.csdn.net/lc7756/article/details/119910500

版权

目的：需要在图片上添加触发器并显示信息，类似于全国地图那个，但这里要的是图片。

方法：将图片设置成背景图，然后用Echarts的散点图记录坐标，在固定的坐标上添加触发器，触发提示信息

<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="chartFirst" style="width: 100%;height: 100%;"></div>
</template>

<script>
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] + '<br>'
            +schema[1].text + '：' + value[3] + '<br>'
            +schema[2].text + '：' + value[4] + '<br>'
          }
        },
        
        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')
    })
  }
}
</script>