当前位置：首页 > VUE

vue实现木马图

2026-02-19 03:20:17VUE

Vue 实现木马图（Troyan Horse Chart）

木马图（Troyan Horse Chart）是一种特殊的数据可视化图表，常用于展示分类数据的占比或对比。以下是基于 Vue 和 ECharts 的实现方法：

安装依赖

确保项目中已安装 ECharts 和 Vue-ECharts：

npm install echarts vue-echarts

基础组件封装

创建一个可复用的木马图组件（如 TroyanChart.vue）：

vue实现木马图

<template>
  <v-chart :option="chartOption" class="chart" />
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  components: { VChart },
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  computed: {
    chartOption() {
      return {
        title: {
          text: '木马图示例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.data
          }
        ]
      };
    }
  }
};
</script>

<style scoped>
.chart {
  height: 400px;
  width: 100%;
}
</style>

使用组件

在父组件中传入数据：

<template>
  <troyan-chart :data="chartData" />
</template>

<script>
import TroyanChart from './TroyanChart.vue';

export default {
  components: { TroyanChart },
  data() {
    return {
      chartData: [
        { value: 1048, name: '分类A' },
        { value: 735, name: '分类B' },
        { value: 580, name: '分类C' },
        { value: 484, name: '分类D' }
      ]
    };
  }
};
</script>

自定义配置

环形大小
调整 radius 属性控制环形宽度：

vue实现木马图

radius: ['30%', '60%'] // 内半径30%，外半径60%

颜色主题
通过 color 属性自定义色系：

color: ['#c23531', '#2f4554', '#61a0a8', '#d48265']

交互效果
启用高亮动画：

emphasis: {
  itemStyle: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
}

注意事项

数据格式需为 { value: number, name: string }[]。
若需动态更新数据，直接修改 data 属性即可触发图表重绘。
移动端适配建议通过监听 resize 事件调用 ECharts 实例的 resize() 方法。

标签: 木马 vue

分享给朋友：

vue 实现全选

Vue 实现全选功能在 Vue 中实现全选功能通常需要结合复选框的状态管理，以下是几种常见的实现方式：使用 v-model 绑定数组通过 v-model 绑定一个数组来管理选中的项，全…

vue中登陆实现逻辑

Vue 中登录实现逻辑前端实现逻辑表单验证使用 Vue 的表单验证库（如 VeeValidate）或自定义验证规则，确保用户输入的账号和密码符合要求。例如，检查邮箱格式、密码长度等。发送登…

vue实现a4打印模板

使用Vue实现A4打印模板在Vue中实现A4打印模板需要结合CSS的打印样式和Vue的模板渲染能力。以下是具体实现方法：设置A4纸张尺寸在CSS中定义A4纸张的标准尺寸（210mm × 29…

vue实现发表

Vue 实现发表功能在 Vue 中实现发表功能通常涉及表单处理、数据绑定和网络请求。以下是实现步骤和代码示例：表单设计与数据绑定创建一个表单用于输入发表内容，使用 v-model 进行数据双…

vue实现分屏

Vue 实现分屏的方法分屏功能通常用于展示多个独立内容区域，以下是几种常见的实现方式：使用 CSS Grid 布局通过 CSS Grid 可以轻松创建分屏布局，在 Vue 组件中直接应用样式：…

vue实现granfana

Vue 实现类似 Grafana 的仪表盘要在 Vue 中实现类似 Grafana 的仪表盘功能，需要结合数据可视化库、状态管理和 UI 组件。以下是关键步骤和推荐工具：数据可视化库使用 E…

vue实现木马图