菜单 搜索
首页 前端知识 Vue 3 中集成 ECharts(附一些案例)

Vue 3 中集成 ECharts(附一些案例)

2024-07-22 01:07:36 前端知识 前端哥 716 16 我要收藏

Vue 3 中集成 ECharts 的完全指南

引言

在现代Web开发中，Vue 3以其卓越的性能和灵活的Composition API赢得了广泛的关注。而ECharts，作为开源的一个使用JavaScript实现的强大可视化库，以其丰富的图表类型和高度可定制性成为了数据可视化的首选工具之一。今天，我们将结合Vue 3的<script setup>语法糖和ECharts，来详细探讨如何在Vue 3项目中集成ECharts，并不仅仅局限于折线图，而是展示一个通用的集成方法。

一、安装和配置

1.安装ECharts

首先，你需要通过npm或yarn来安装ECharts。在你的Vue 3项目根目录下打开终端，执行以下命令之一：

npm install echarts --save
# 或者
yarn add echarts
复制

2. Vue 3项目设置

确保你已经有一个Vue 3项目，并熟悉其基本结构。<script setup>是Vue 3引入的一种新的组件编写方式，它使得组件的编写更加简洁和直观。

二、编写Vue组件

1. 组件结构

在你的Vue 3项目中，创建一个新的组件，比如命名为EChartsComponent.vue。以下是该组件的基本结构，用于展示如何在Vue 3中集成ECharts：

<template>
  <div ref="chartDom" style="width: 600px; height: 400px;"></div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
 
// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null);
let chartInstance = null;
 
// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成
  chartInstance = echarts.init(chartDom.value);
  const option = {
    // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
    title: {
      text: 'ECharts 示例图表'
    },
    tooltip: {},
    xAxis: {
      data: ["类别1", "类别2", "类别3", "类别4", "类别5"]
    },
    yAxis: {},
    series: [{
      name: '数据系列',
      type: 'line', // 这里可以是'line'、'bar'、'pie'等，根据图表类型选择
      data: [120, 200, 150, 80, 70]
    }]
  };
  chartInstance.setOption(option);
});
 
// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>
 
<style scoped>
/* 添加一些CSS样式来美化图表容器（可选） */
</style>
复制

2. 关键点解释

  1. nextTick: 使用await nextTick();来确保Vue的DOM更新已经完成，这是初始化ECharts实例前的关键步骤。

  2. ECharts配置: 配置项option可以根据需要绘制不同类型的图表，如折线图、柱状图、饼图等。通过修改series中的type字段，可以轻松切换图表类型。

  3. 图表初始化与销毁: 在onMounted钩子中初始化ECharts实例，在onUnmounted钩子中销毁实例，以避免内存泄漏。

三、案例

好了，以上咱知道了基础用法，接下来展示几个案例

1. 堆叠柱状图案例

在这里插入图片描述
代码如下

const monthlyIndicators = ref(null);
 
// 绘制柱状图
const drawMonthlyIndicators = () => {
  const monthlyIndicatorsElement = echarts.init(monthlyIndicators.value);
  const option = {
    legend: {
      data: ['计划', '实际'],
      icon: 'circle', // 设置图例图标为圆形
      left: 'left', // 将图例定位到左侧
      top: 'top', // 将图例定位到顶部
    },
    grid: {
      top: '45', // 距离容器上边界的距离
      right: '10', // 距离容器右边界的距离
      bottom: '3', // 距离容器下边界的距离
      left: '10', // 距离容器左边界的距离
      containLabel: true, // 包含标签的绘图区域
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        show: false, // 不显示横坐标轴线
      },
      axisTick: {
        show: false, // 不显示刻度线
      },
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
    },
    series: [
      {
        name: '实际',
        data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 234, 123],
        type: 'bar',
        stack: 'total', // 添加堆积效果
        barWidth: '30%', // 调整柱子宽度
        itemStyle: {
          borderRadius: [5, 5, 0, 0], // 只有顶部圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // 设置渐变色
            { offset: 0, color: '#bdd1f6' },
            { offset: 1, color: '#4282ff' },
          ]),
        },
      },
      {
        name: '计划',
        data: [320, 132, 101, 134, 90, 230, 210, 320, 132, 101, 134, 90],
        type: 'bar',
        stack: 'total', // 添加堆积效果
        barWidth: '30%', // 调整柱子宽度
        itemStyle: {
          borderRadius: [5, 5, 0, 0], // 只有顶部圆角
          color: '#ebf2ff', // 设置柱子颜色
        },
      },
    ],
  };
 
  monthlyIndicatorsElement.setOption(option);
};
复制

2. 渐变折线图

在这里插入图片描述
代码如下

const businessTrends = ref(null);
 
// 绘制折线图
const drawBusinessTrends = () => {
  const businessTrendsElement = echarts.init(businessTrends.value);
  const option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: '3%', // 调整左边距
      right: '3%', // 调整右边距
      bottom: '3%', // 调整底部边距
      top: '5%', // 调整顶部边距
      containLabel: true, // 确保标签和轴标题被包含在容器内
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], // 示例数据
      axisLine: {
        show: false, // 不显示横坐标轴线
      },
      axisTick: {
        show: false, // 不显示刻度线
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}',
      },
    },
    series: [
      {
        name: '销售额',
        type: 'line',
        data: [620, 1032, 701, 1234, 890, 1430, 1120], // 示例数据，模拟起伏更大
        smooth: true, // 折线平滑
        lineStyle: {
          width: 2,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#62c1fe' },
            { offset: 0.5, color: '#ad90f7' },
            { offset: 1, color: '#e875f2' },
          ]),
        },
        symbolSize: (value, params) => {
          // 获取数据系列的长度
          const seriesLength = option.series[0].data.length;
          // 中间节点放大
          if (params.dataIndex === Math.floor(seriesLength / 2)) {
            return 8; // 中间节点的大小
          }
          return 8; // 其他节点的大小
        },
      },
    ],
  };
  businessTrendsElement.setOption(option);
};
复制

3. 环形饼图

在这里插入图片描述
代码如下

const projectSigningOverview = ref(null);
 
// 绘制饼图环形
const drawProjectSigningOverview = () => {
  const projectSigningOverviewElement = echarts.init(projectSigningOverview.value);
  const option = {
    legend: {
      orient: 'vertical',
      right: 10,
      align: 'left',
      top: 'center',
      textStyle: {
        rich: {
          name: {
            color: '#929292',
          },
          value: {
            color: '#000',
            fontWeight: 'bold',
            fontSize: 16, // 根据需要调整字体大小
          },
        },
      },
      data: [
        {
          name: '已签约 {value|80}{name| 个/5800万}',
          textStyle: { rich: { value: {}, name: {} } },
        },
        {
          name: '未签约 {value|18}{name| 个/5800万}',
          textStyle: { rich: { value: {}, name: {} } },
        },
        {
          name: '跟进中 {value|24}{name| 个/5800万}',
          textStyle: { rich: { value: {}, name: {} } },
        },
      ],
      icon: 'circle', // 设置图例图标为圆形
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['22%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 80, name: '已签约 {value|80}{name| 个/5800万}' }, // 已签约
          { value: 18, name: '未签约 {value|18}{name| 个/5800万}' }, // 未签约
          { value: 24, name: '跟进中 {value|24}{name| 个/5800万}' }, // 跟进中
        ],
        itemStyle: {
          borderRadius: 0,
          borderColor: '#fff',
          borderWidth: 0,
        },
      },
    ],
    graphic: [
      {
        type: 'text',
        left: '65%', // 将文本水平居中
        top: '19%', // 根据实际情况调整，确保文本显示在legend上方
        style: {
          // 使用富文本格式
          rich: {
            a: {
              // 为“80”设置的样式
              fontSize: 16, // 放大字体大小
              fontWeight: 'bold', // 加粗
              color: '#000', // 字体颜色
            },
            b: {
              // 为“个/5800万”设置的样式
              fontSize: 14, // 字体大小
              color: '#929292',
            },
          },
          text: '项目总数 {a|80} {b|个/5800万}', // 显示的文本内容，使用上面定义的样式标签
          textAlign: 'center',
          fill: '#000', // 默认文本颜色，这里可能不会生效因为已经在rich中指定了颜色
        },
      },
      {
        type: 'text',
        left: '18%',
        top: '40%',
        style: {
          text: '72%',
          textAlign: 'center',
          fill: '#000',
          fontSize: 20,
        },
      },
      {
        type: 'text',
        left: '18%',
        top: '55%',
        z: 100,
        style: {
          text: '转化率',
          textAlign: 'center',
          fill: '#000',
          fontSize: 14,
        },
      },
    ],
  };
  projectSigningOverviewElement.setOption(option);
};
复制

4. 横向柱状排行榜

在这里插入图片描述
代码如下

const salesRanking = ref(null);
 
// 绘制横向柱状图排行榜
const drawSalesRanking = () => {
  const salesRankingElement = echarts.init(salesRanking.value);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '0%', // 调整左边距
      right: '5%', // 调整右边距
      bottom: '3%', // 调整底部边距
      top: '5%', // 调整顶部边距
      containLabel: true, // 确保标签和轴标题被包含在容器内
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLine: {
        show: false, // 不显示横坐标轴线
      },
      axisTick: {
        show: false, // 不显示刻度线
      },
      splitLine: {
        show: false, // 不显示x轴网格线
      },
    },
    yAxis: {
      type: 'category',
      data: ['刘晓彬', '萧秀凝', '曲严琰'], // 示例数据
      axisLine: {
        show: false, // 不显示横坐标轴线
      },
      axisTick: {
        show: false, // 不显示刻度线
      },
      splitLine: {
        show: false, // 不显示y轴网格线
      },
      axisLabel: {
        rich: {
          iconStyle: {
            fontSize: 20, // 设置图标的字体大小为20
          },
          nameStyle: {
            // 定义名字的样式
            fontSize: 12, // 设置名字的字体大小为12，或者您希望的任何大小
          },
        },
        formatter: function (value, index) {
          // 根据index或value来决定显示哪个排名的图标
          const rankIcons = {
            2: '{iconStyle|🥇}',
            1: '{iconStyle|🥈}',
            0: '{iconStyle|🥉}',
          };
          return `${rankIcons[index]} {nameStyle|${value}}`;
        },
      },
    },
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: [920, 1032, 1201], // 示例数据
        barWidth: '30%', // 调整柱子宽度
        itemStyle: {
          borderRadius: [0, 5, 5, 0], // 只有右侧圆角
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 设置渐变色，方向也要调整为横向
            { offset: 0, color: '#bdd1f6' },
            { offset: 1, color: '#4282ff' },
          ]),
        },
        label: {
          show: true, // 显示标签
          position: 'right', // 标签位置在顶部
          formatter: '{c}万', // 自定义显示的内容，{c}是指当前数据点的值
        },
      },
    ],
  };
  salesRankingElement.setOption(option);
};
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/14224.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！