实战篇：（七）Vue2项目中使用 echarts（5.2.2）图表组件含代码

1.图表预览

2.注释说明

Vue 的组件开发

• 通过 props 定义外部传入的属性，例如 className、width、height、autoResize、chartData 等。
• 使用 Vue 的生命周期钩子函数 mounted 进行 ECharts 的实例化，确保组件加载完毕后才初始化图表。
• 通过 watch 监听 chartData 数据的变化，自动更新图表。

ECharts 实例化和配置

• 使用 echarts.init(this.$el) 创建图表实例，绑定到 Vue 组件的 DOM 元素上。
• this.chart.setOption(option, true) 更新 ECharts 图表的配置。
• 定义了自适应窗口大小的功能，监听 window.onresize，动态调整图表大小。

计算方法和自定义配置

• fontSize(res) 根据窗口宽度动态计算字体大小，用于图表的响应式布局。
• getPie3D(pieData, internalDiameterRatio) 和 getParametricEquation() 是生成 3D 饼图的关键函数，使用数学公式构建 3D 饼图的曲面方程，并自定义了饼图的大小、半径、角度、选中效果等。
• formatter 函数用于自定义图表的 legend 和 tooltip 显示格式，返回带有富文本样式的字符串。

3.页面引入

<div class="com-view-body c-dis-flex-col c-hidden">
    <div class="c-width c-flex c-dis-flex-col c-hidden">
       <ChartView :chart-data="riskChartData"></ChartView>
    </div>
</div>

import { randomNum } from '@/utils/index.js'
import ChartView from '@/components/Charts/ChartView.vue'


 riskChartData: {
        name: "风险总数",
        color: ["#ED6F81", "#F3843D", "#4B64F7", "#34C294"],
        legend: ['二级风险', '三级风险', '四级风险', '五级风险'],
        data: [
          { name