本文已参与「新人创作礼」活动，一起开启掘金创作之路。

 一、安装echarts

npm install echarts --save

二、在需要的页面引入

import * as echarts from "echarts"

三、创建组件

1、图例一：ScatterChart.vue

<template>
  <div class="Qiu_page">
    <div id="Qiu"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    QiuList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
        datas: []
    }
  },
  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>

四、页面引入

<template>
    <div>
       <ScatterChart :QiuList="yuanList"></ScatterChart>
    </div>
</template>
<script>
import ScatterChart '@/components/ScatterChart'
export default {
    components: {ScatterChart},
    data() {
        return {
            // 图例1
            yuanList: [
                { UserScore: 5, Name: '能力感'},
                { UserScore: 4, Name: '努力感'},
                { UserScore: 6, Name: '控制感'},
                { UserScore: 8, Name: '环境感'}
            ]
        }
    }
}
</script>