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

全栈探索者chen

已于 2024-10-16 17:48:48 修改

阅读量792

点赞数 6

分类专栏： echarts 前端文章标签： vue.js

于 2024-10-10 09:47:35 首次发布

本文链接：https://blog.csdn.net/mmc123125/article/details/142813095

版权

前端同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

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: "二级风险", value: 0, unit: "个" },
          { name: "三级风险", value: 0, unit: "个" },
          { name: "四级风险", value: 0, unit: "个" },
          { name: "五级风险", value: 0, unit: "个" },
        ],
},

4.图表组件

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'; // 导入 echarts 库
import "echarts-gl"; // 导入 echarts 的 3D 图表支持
import resize from '@/components/mixin/resize'; // 导入窗口 resize 相关的 mixin

export default {
  mixins: [resize], // 引入 mixin
  props: {
    className: {
      type: String,
      default: 'chart', // 默认样式名为 'chart'
    },
    width: {
      type: String,
      default: '100%', // 默认宽度为 100%
    },
    height: {
      type: String,
      default: '100%', // 默认高度为 100%
    },
    autoResize: {
      type: Boolean,
      default: true, // 默认启用自动调整大小
    },
    chartData: {
      type: Object,
      default: () => { } // 默认空对象，存储图表数据
    }
  },
  data() {
    return {
      chart: null, // 存储 echart 实例
      chartColor: {
        text: '#ffffff', // 文字颜色
        bg: '#02456b', // 背景色
        color: ['#06DEF3', '#1779CE', '#FAD961', '#F76B1C'], // 数据颜色
      },
      hoveredIndex: '', // 记录鼠标悬浮的索引
      option: null // 存储图表配置
    }
  },
  mounted() {
    // DOM 渲染后初始化图表
    this.$nextTick(() => {
      this.chart = echarts.init(this.$el); // 初始化 echart 实例
      this.initChart(); // 调用初始化方法
    });
  },
  watch: {
    chartData: {
      deep: true, // 深度监听 chartData
      handler(val) {
        this.initChart(); // 当 chartData 发生变化时，重新初始化图表
      },
    },
  },
  methods: {
    /**
     * 根据屏幕大小调整字体大小
     * @param {Number} res 原始字体大小
     * @return {Number} 调整后的字体大小
     */
    fontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = clientWidth / 1920; // 按 1920 设计稿宽度计算比例
      return res * fontSize;
    },

    /**
     * 初始化图表，设置图表配置项
     */
    initChart() {
      let that = this;
      const series = this.getPie3D(this.chartData.data, 0.85); // 生成3D饼图的系列
      series.push({
        name: "pie2d", // 2D饼图，用于3D饼图视觉对齐
        type: "pie",
        labelLine: { length: 0, length2: 0 },
        startAngle: 2, // 起始角度
        clockwise: false, // 逆时针旋转
        radius: ["0%", "0%"], // 饼图半径
        center: ["0%", "0%"], // 饼图中心位置
        data: this.chartData.data,
        itemStyle: { opacity: 0 } // 设置透明度
      });

      let rich = { name: { fontSize: this.fontSize(12), color: "#fff" } };
      // 动态生成 rich 配置，用于自定义图例文本样式
      for (let i = 0; i < 7; i++) {
        rich[`name${i}`] = {
          fontSize: this.fontSize(i === 1 ? 16 : 20),
          align: 'left',
          padding: [0, 0, 0, this.fontSize(10)],
          fontWeight: i === 1 ? 900 : 600,
          color: i !== 0 ? this.chartData.color[i - 2] : 'rgba(130, 159, 179, 1)'
        };
      }

      // 动态为每个数据项添加样式
      this.chartData.data.map((item, index) => {
        let style = {
          fontSize: this.fontSize(16),
          padding: [0, 5, 0, 5],
          color: this.chartData.color[index],
        };
        this.$set(rich, `value${index}`, style);
      });

      // 定义图表配置项
      let option = {
        color: this.chartData.color,
        legend: {
          show: true,
          orient: 'vertical',
          right: '5%',
          top: 'center',
          itemWidth: this.fontSize(16),
          itemHeight: this.fontSize(4),
          textStyle: {
            fontWeight: 400,
            color: '#CEE8F8',
            fontSize: this.fontSize(14),
            lineHeight: this.fontSize(26),
            rich: rich,
          },
          formatter: function (name) {
            let res = that.chartData.data.find(v => v.name === name);
            return `{name1|${res.name}}{name${that.chartData.data.indexOf(res) + 2}|${res.value}}{name0|${res.unit}}`;
          },
        },
        tooltip: {
          formatter: function (optionsData) {
            let value = that.chartData.data.find(v => v.name === optionsData.seriesName)?.value || 0;
            return `${optionsData.seriesName}: ${value}`;
          },
          borderColor: this.chartColor.bg,
          backgroundColor: this.chartColor.bg,
          textStyle: {
            color: '#fff',
            fontSize: this.fontSize(12),
            rich: rich
          },
        },
        title: {
          text: that.chartData.name,
          textAlign: 'center',
          left: '30%',
          top: '43%',
          textStyle: { color: "#fff", fontSize: this.fontSize(14) },
        },
        series: series,
      };

      this.chart.setOption(option, true); // 设置图表配置项
      this.chart.resize(); // 图表自适应
      window.onresize = () => this.chart.resize(); // 监听窗口大小变化
    },

    /**
     * 生成扇形的参数方程
     * @param {Number} startRatio 扇形起始比例
     * @param {Number} endRatio 扇形结束比例
     * @param {Boolean} isSelected 是否选中
     * @param {Boolean} isHovered 是否悬浮
     * @param {Number} k 辅助参数
     * @param {Number} height 扇形高度
     * @param {Number} i 当前序号
     * @return {Object} 曲面参数方程
     */
    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height, i) {
      // 曲面参数方程的实现，计算每个扇形的坐标和大小
      // ...
    },

    /**
     * 生成模拟 3D 饼图的配置项
     * @param {Array} pieData 饼图数据
     * @param {Number} internalDiameterRatio 内环直径比
     * @return {Array} 图表 series 配置项
     */
    getPie3D(pieData, internalDiameterRatio) {
      let series = [];
      let sumValue = pieData.reduce((sum, data) => sum + data.value, 0); // 计算总值
      let startValue = 0;

      pieData.forEach((data, i) => {
        let endValue = startValue + data.value;
        let seriesItem = {
          name: data.name || `series${i}`,
          type: "surface",
          parametric: true,
          pieData: data,
          pieStatus: { selected: false, hovered: false, k: (1 - internalDiameterRatio) / (1 + internalDiameterRatio) }
        };
        seriesItem.parametricEquation = this.getParametricEquation(
          startValue / sumValue,
          endValue / sumValue,
          false,
          false,
          seriesItem.pieStatus.k,
          10,
          i
        );
        startValue = endValue;
        series.push(seriesItem);
      });

      return series;
    },
  },
}
</script>

实战篇：（六）创建属于自己的 Vue 3 组件库：主题切换与样式管理

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