zjugis_OA/client/src/views/OaSystem/oaViews/personnelView/mapView/chart1.vue

<template>
  <div class="w-100% h-100%" id="myChart3"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
const initChart = () => {
  let myChart = echarts.init(document.getElementById('myChart3'))
  var symbolSizeArr = [60, 78, 65, 98]
  let option = {
    tooltip: {
      show: false
    },
    xAxis: {
      show: false
    },
    yAxis: {
      show: false
    },
    series: [
      {
        type: 'graph',
        layout: 'force',
        force: {
          repulsion: 200,
          edgeLength: 10
        },
        label: {
          show: true,
          textStyle: {
            color: '#fff', // 标签字体颜色
            fontSize: 14, // 标签字体大小
            fontFamily: 'AlibabaPuHuiTiR' // 标签字体
          },
          // formatter: ['{title|{c}人}', '{name|{b}}'].join('\n'),
          formatter: function (value) {
            if (value.name.length > 2) {
              return (
                value.name.substring(0, 2) +
                '\n' +
                value.name.substring(2, value.name.length) +
                '\n' +
                value.value +
                '人'
              )
            } else {
              return value.name + '\n' + value.value + '人'
            }
          }
        },
        itemStyle: {
          color: function (params) {
            var colorList = [
              'rgba(9,217,205,0.5)',
              'rgba(28,162,255,0.5)',
              'rgba(228,163,6,0.5)',
              'rgba(238,102,102,0.5)'
            ]

            var color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colorList[params.dataIndex % 6]
              },
              {
                offset: 1,
                color: colorList[params.dataIndex % 6]
              }
            ])
            return color //大概最新的柱子颜色始终一样的 不太理解
          }
        },
        symbolSize: function (value, params) {
          return symbolSizeArr[params.dataIndex]
        },
        draggable: true, //设置是否可拖动
        data: [
          {
            name: '系统分析师',
            value: 1
          },
          {
            name: '项目管理师',
            value: 3
          },
          {
            name: '系统架构师',
            value: 2
          },
          {
            name: '其他',
            value: 8
          }
        ]
      }
    ]
  }
  myChart.setOption(option)
}
/** 初始化 **/

onMounted(() => {
  initChart()
})
</script>
<style lang="scss" scoped></style>