当前位置：首页 > 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）：

<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 属性控制环形宽度：

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

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

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

交互效果
启用高亮动画：

vue实现木马图

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

注意事项

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

标签: 木马 vue

分享给朋友：

vue实现app

Vue 实现 App 的常见方法使用 Vue 开发移动端 App 主要有两种主流方案：混合开发（Hybrid）和原生渲染。以下是具体实现方式和工具链：混合开发方案（WebView 嵌入）通过…

vue翻页实现

Vue翻页实现方法基础分页组件实现使用v-for和计算属性实现基础分页逻辑： <template> <div> <ul> <li…

vue实现开关

Vue 实现开关组件的方法使用原生HTML和Vue数据绑定通过v-model绑定复选框的checked状态，结合CSS样式实现开关效果： <template> <label…

vue实现 hover

实现 Vue 中的 hover 效果在 Vue 中实现 hover 效果可以通过多种方式完成，以下是常见的几种方法：使用 CSS 伪类最简单的方式是直接使用 CSS 的 :hover 伪类，无…

vue实现换页

Vue实现页面切换的方法在Vue中实现页面切换通常可以通过Vue Router来完成。Vue Router是Vue.js官方的路由管理器，用于构建单页面应用（SPA）。以下是几种常见的实现方式：…

vue 实现上传

Vue 实现文件上传使用 Vue 实现文件上传可以通过原生 HTML 的 <input type="file"> 或第三方库（如 axios、vue-upload-component）完…

vue实现木马图