vue实现【echarts中 “3种” Scatter散点图图例】的组件封装及调用

echarts组件使用参考：https://blog.csdn.net/weixin_50450473/article/details/121510438

目录

图例一

图例二

图例三

---

图例一：不同值的大小圆

 

图例二：原点大小随着值变化

图例三：

图例一

<template>
  <div class="Qiu_page">
    <div id="Qiu"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
        datas: [],
        QiuList: [
          { UserScore: 5, Name: '能力感'},
          { UserScore: 4, Name: '努力感'},
          { UserScore: 6, Name: '控制感'},
          { UserScore: 8, Name: '环境感'}
        ]
    }
  },
  created() {
    this.$nextTick(() => {
      this.barBtn()
    })
  },
  methods: {
    dataArrFn() {
      let plantCap = []
      this.QiuList.forEach(m => {
        plantCap.push({name: m.Name, value: m.UserScore})
      })
      var datalist = [
        {
          offset: [35, 85],
          color: '220, 129, 210' // 红色
        },
        {
          offset: [35, 15],
          color: '76, 108, 246' // 蓝色
        },
        {
          offset: [65, 85],
          color: '253, 216, 53' // 黄色
        },
        {
          offset: [65, 15],
          color: '113, 222, 191' // 绿色
        }
      ]
      let scale = 1
      let zoomO = 1280 / 745
      let ddw = document.documentElement.clientWidth
      let ddh = document.documentElement.clientHeight
      let zoomNow = ddw / ddh
      let zoomNum = 1

      scale = ResizeChat()
      function ResizeChat() {
        if (zoomNow > zoomO) {
          var newW = (1280 * ddh) / 745
          zoomNum = newW / 1280
        } else {
          var newH = (745 * ddw) / 1280
          zoomNum = newH / 745
        }
        return zoomNum
      }
      this.datas = []
      reSize(plantCap, datalist)
      function reSize(listSy, dataList) {
        // 通过值来改变球的大小
        var maxArr = []
        listSy.forEach(function (item) {
          maxArr.push(item.value)
        })
        var maxNum = 4 // 获取最大值
        dataList.forEach(function (item, index) {
          item.symbolSize = (listSy[index].value / maxNum) * 100
        })
      }

      for (var i = 0; i < plantCap.length; i++) {
        var item = plantCap[i]
        var itemToStyle = datalist[i]

        this.datas.push({
          name: item.name + '\n' + item.value + '分',
          value: itemToStyle.offset,
          symbolSize: itemToStyle.symbolSize * scale,
          label: {
            normal: {
              textStyle: {
                fontSize: '75%',
                lineHeight: '200'
              }
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(' + itemToStyle.color + ',0.5)'
            },
            emphasis: {
              color: 'rgba(' + itemToStyle.color + ',1)'
            }
          }
        })
      }
      return this.datas
    },
    barBtn() {
      var dataArr = this.dataArrFn()
      let myChart = echarts.init(document.getElementById('Qiu'))
      let option = {
        xAxis: [
          {
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            nameLocation: 'middle',
            nameGap: 5
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: 'middle',
            nameGap: 150,
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: '{name|{b}}',
                rich: {
                    name: {
                        fontSize: 12,
                        color: '#333',
                        lineHeight: 20
                    }
                },
                color: '#333'
              }
            },
            data: dataArr
          }
        ]
      }
      myChart.setOption(option)
      // 让图表跟随屏幕自动的去适应
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.Qiu_page {
  margin: 0 auto;
  background: #eee;
  width: 120mm;
  height: 120mm;
  border-radius: 50%;
}
#Qiu {
  width: 180mm;
  height: 90mm;
  margin-left: -29mm;
  padding-top: 15mm;
}
</style>

图例二

option = {
  title: {
    text: '散点图图例',
    left: 'center'
  },
  grid: {
    top: '10%',
    left: '3%',
    right: '4%',
    bottom: '2%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['尽责', '上进', '自律'],
    splitLine: {
      show: true
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true
    },
    axisLabel: {
      textStyle: {
        fontSize: 15
      }
    }
  },
  yAxis: {
    name: '分值',
    type: 'category',
    data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    splitNumber: 10,
    splitLine: {
      show: true
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true
    },
    axisLabel: {
      textStyle: {
        fontSize: 14
      }
    }
  },
  series: [
    {
      type: 'scatter',
      color: '#8093D7',
      symbolSize: function (data) {
        return Math.sqrt(data[2] * 50);
      },
      label: {
        show: true,
        formatter: function (param) {
          return param.data[2];
        },
        position: 'right',
        color: '#8093D7',
        fontSize: 14
      },
      data: [
        [0, 0, 5], [1, 0, 5], [2, 0, 1],
        [0, 1, 1], [1, 1, 0], [2, 1, 5],
        [0, 2, 8], [1, 2, 1], [2, 2, 1],
        [0, 3, 5], [1, 3, 5], [2, 3, 8],
        [0, 4, 6], [1, 4, 1], [2, 4, 9.5],
        [0, 5, 7], [1, 5, 3], [2, 5, 8],
        [0, 6, 3], [1, 6, 1], [2, 6, 3],
        [0, 7, 2], [1, 7, 8], [2, 7, 10],
        [0, 8, 8], [1, 8, 9], [2, 8, 1.8],
        [0, 9, 9], [1, 9, 1], [2, 9, 7.6],
        [0, 10, 10], [1, 10, 1], [2, 10, 5.5]
      ]
    }
  ]
};

图例三

option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['1号加热炉', '2号加热炉', '实际值', '平均值'],
    itemGap: 50,
    left: '5%'
  },
  grid: {
    top: '8%',
    left: '2%',
    right: '2%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    max: 9,
    min: 1,
    splitNumber: 30, // 分隔线条数
    axisTick: { show: false },
    axisLine: { show: false }
  },
  yAxis: {
    name: '℃',
    type: 'value',
    max: 1040,
    min: 0,
    position: 'top',
    splitNumber: 4,
    axisTick: { show: false },
    axisLine: { show: false }
  },
  series: [
    {
      name: '1号加热炉',
      type: 'bar',
      stack: 'Total',
      barWidth: '99%',
      color: 'rgba(189,193,207,0.5)',
      data: [1040, 1040, 1040, '', '', 1040, 1040, 1040, '', '']
    },
    {
      name: '2号加热炉',
      type: 'bar',
      barWidth: '99%',
      color: 'rgba(183,235,230,0.5)',
      stack: 'Total',
      data: ['', '', '', 1040, 1040, '', '', '', 1040, 1040]
    },
    {
      name: '实际值',
      symbolSize: 15,
      type: 'scatter',
      itemStyle: {
        color: '#326092'
      },
      data: [150, 450, 800, 900, 700, 150, 450, 800, 900, 700]
    },
    {
      name: '平均值',
      symbolSize: 15,
      type: 'scatter',
      itemStyle: {
        color: '#3dc6c8'
      },
      data: [200, 500, 880, 920, 1000, 200, 500, 880, 920, 1000]
    }
  ]
};

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~