template div class=visualization_third div class=left p设备资产数量p !-- 横线样式 -- div class=line div class=onediv div class=twodiv div class=threediv divdiv

<p>这段代码存在很多语法错误和逻辑问题，需要进行较大的修改，以下是可能的修改方案：</p>
<template>
  <div class="visualization_third">
    <div class="left">
      <p>设备资产数量</p>
      <!-- 横线样式 -->
      <div class="line">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="enght"></div>
        <div class="nine"></div>
        <div></div>
      </div>
      <!-- 数量总计 -->
      <div class="zj_sum">
        <h2><i>1500</i></h2>
        <div class="Hline"></div>
        <p>设备数量总数(件)</p>
      </div>
      <!-- echarts使用 -->
      <div id="main">
<pre><code>  &lt;/div&gt;
  &lt;div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;right&quot;&gt;

&lt;/div&gt;
</code></pre>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import * as echarts from 'echarts';

onMounted(() => {
  var myChart = echarts.init(document.getElementById('main'));
  var scale = 1;
  var echartData = [
    {
      value: 2154,
      name: '曲阜师范大学'
    },
    {
      value: 3854,
      name: '潍坊学院'
    },
    {
      value: 3515,
      name: '青岛职业技术学院'
    },
    {
      value: 3515,
      name: '淄博师范高等专科'
    },
    {
      value: 3854,
      name: '鲁东大学'
    },
    {
      value: 2154,
      name: '山东师范大学'
    }
  ];

  var rich = {
    yellow: {
      color: "#ffc72b",
      fontSize: 30 * scale,
      padding: [5, 4],
      align: 'center'
    },
    total: {
      color: "#ffc72b",
      fontSize: 40 * scale,
      align: 'center'
    },
    white: {
      color: "#fff",
      align: 'center',
      fontSize: 14 * scale,
      padding: [21, 0]
    },
    blue: {
      color: '#49dff0',
      fontSize: 16 * scale,
      align: 'center'
    },
    hr: {
      borderColor: '#0b5263',
      width: '100%',
      borderWidth: 1,
      height: 0,
    }
  }

  myChart.setOption({
    backgroundColor: '#031f2d',
    title: {
      text: '总考生数',
      left: 'center',
      top: '53%',
      padding: [24, 0],
      textStyle: {
        color: '#fff',
        fontSize: 18 * scale,
        align: 'center'
      }
    },
    legend: {
      selectedMode: false,
      formatter: function (name) {
        var total = 0; //各科正确率总和
        var averagePercent; //综合正确率
        echartData.forEach(function (value, index, array) {
          total += value.value;
        });
        return '{total|' + total + '}';
      },
      data: echartData.map((item) => item.name),
      itemGap: 50,
      left: 'center',
      top: 'center',
      icon: 'none',
      align: 'center',
      textStyle: {
        color: "#fff",
        fontSize: 16 * scale,
        rich: rich
      },
    },
    series: [{
      name: '总考生数量',
      type: 'pie',
      radius: ['42%', '50%'],
      hoverAnimation: false,
      color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
      label: {
        normal: {
          formatter: function (params, ticket, callback) {
            var total = 0; //考生总数量
            var percent = 0; //考生占比
            echartData.forEach(function (value, index, array) {
              total += value.value;
            });
            percent = ((params.value / total) * 100).toFixed(1);
            return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
          },
          rich: rich
        },
      },
      labelLine: {
        normal: {
          length: 55 * scale,
          length2: 0,
          lineStyle: {
            color: '#0b5263'
          }
        }
      },
      data: echartData
    }]
  });
});
</script>