发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

vue3中使用Apache ECharts的详细方法

睢宁王健林

7

主题

7

帖子

21

积分

新手上路

Rank: 1

积分
21
显示全部楼层
首先祝贺Echarts顺利的从Apache毕业，多了个响亮的名字：
  1. Apache ECharts
复制代码
，现在的官网地址在这里：传送门，首页相当的国际范，看着比以前舒服多了，但是文档还是那个文档(Ｔ▽Ｔ)
  1. ps：从Apache毕业的字面意思从一个国内项目变成了一个国际化开源项目，简单说就是从一个很厉害的项目变成了超厉害的项目
复制代码
项目效果



前言

最近在做一些数据透析的项目需要用到报表图，那么报表图好用的有老牌的ECharts，比较新意的AntV，思前马后的想了一下还是用了Echarts，因为AntV的产品线真的是五花八门，比如G2、G6、F2、L7，看得我头晕眼花，所以决定用Echarts省事多了。

一、安装
  1. 目前安装自动指向的版本是5.4.0
复制代码
  1. npm install echarts --save
复制代码
二、测试运行
  1. 官方快速入门文档地址：<a href="https://echarts.apache.org/handbook/zh/basics/import" rel="external nofollow"  target="_blank">传送门</a>，文档真就是快速，只有使用代码，连个框架案例都懒得写了。。
复制代码
测试的话直接用全量引入了，看着简洁点。使用的话还是和以前差不多，获取dom的话可以用
  1. id
复制代码
或
  1. ref
复制代码
，但我不太喜欢在vue项目中看到原生的东西，所以就用ref了，ref的话取值记得带上
  1. .value
复制代码
；如果进入页面就要显示图表，一定要把初始代码放到
  1. onMounted
复制代码
生命周期函数中，不然会报
  1. Error: Initialize failed: invalid dom.
复制代码
的错误；另外高度一定要设置实高，不然页面会空白。
setup测试代码： 随便拷贝到一个vue文件，能显示图表的话说明echarts能正常运行了
  1. <template>
  2.   <div class="test">
  3.     <h1>setup测试代码</h1>
  4.     <div ref="echartRef" class="echart"></div>
  5.   </div>
  6. </template>
  7. <script setup>
  8. import { ref, onMounted } from 'vue'
  9. import * as echarts from 'echarts';
  10. const echartRef = ref()
  11. onMounted(() => {
  12.   // 基于准备好的dom，初始化echarts实例
  13.   const myChart = echarts.init(echartRef.value);
  14.   // 绘制图表
  15.   myChart.setOption({
  16.     title: {
  17.       text: 'ECharts 入门示例'
  18.     },
  19.     tooltip: {},
  20.     xAxis: {
  21.       data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  22.     },
  23.     yAxis: {},
  24.     series: [
  25.       {
  26.         name: '销量',
  27.         type: 'bar',
  28.         data: [5, 20, 36, 10, 10, 20]
  29.       }
  30.     ]
  31.   });
  32. })
  33. </script>
  34. <style lang="scss" scoped>
  35. .test {
  36.   margin: auto;
  37.   max-width: 60vw;

  39.   .echart {
  40.     width: 100%;
  41.     height: 500px;
  42.   }
  43. }
  44. </style>
复制代码
三、全局配置

为了不让使用到的页面重复导入echarts，我们得把它设置成全局模块，而vue3现在提供全局化的形式有两种：
  1. globalProperties
复制代码
和
  1. provide/inject
复制代码
，接下来我们看一下怎么用着两种形式去实现全局化。
小提示
按需引入的话需要在
  1. 'echarts/core'
复制代码
包里引入自己要使用的图表，名字为
  1. Xxx+Chart
复制代码
，比如折线图就是
  1. LineChart
复制代码
，不知道图表叫什么名字可以到官方示例的标题里看一下，首字母要大写，之后还需要在
  1. echarts.use
复制代码
中注册一下。


1. globalProperties形式：

先在
  1. main.js
复制代码
中引入echarts，并且把它挂载在
  1. app.config.globalProperties
复制代码
，名字风格最好用
  1. $
复制代码
开头，如用了路由，也会自动在这上面挂载
  1. $router
复制代码
和
  1. $route
复制代码
。
①全量引入：
main.js
  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import * as echarts from 'echarts';
  5. const app = createApp(App)
  6. app.use(router)
  7. app.mount('#app')
  8. app.config.globalProperties.$echarts = echarts
复制代码
②按需引入：
main.js
  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  5. import * as echarts from 'echarts/core';
  6. // 引入柱状图图表，图表后缀都为 Chart
  7. import { LineChart } from 'echarts/charts';
  8. // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  9. import {
  10.     TitleComponent,
  11.     TooltipComponent,
  12.     GridComponent,
  13.     DatasetComponent,
  14.     TransformComponent
  15. } from 'echarts/components';
  16. // 标签自动布局，全局过渡动画等特性
  17. import { LabelLayout, UniversalTransition } from 'echarts/features';
  18. // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  19. import { CanvasRenderer } from 'echarts/renderers';
  20. // 注册必须的组件
  21. echarts.use([
  22.     TitleComponent,
  23.     TooltipComponent,
  24.     GridComponent,
  25.     DatasetComponent,
  26.     TransformComponent,
  27.     LabelLayout,
  28.     UniversalTransition,
  29.     CanvasRenderer,
  30.     LineChart
  31. ]);
  32. const app = createApp(App)
  33. app.use(router)
  34. app.mount('#app')
  35. app.config.globalProperties.$echarts = echarts
复制代码
测试代码：
使用的话先在vue中引入
  1. getCurrentInstance
复制代码
模块，之后就可以在
  1. appContext.config.globalProperties
复制代码
中找到我们挂载的
  1. $echarts
复制代码
了。
xxx.vue
  1. <template>
  2.   <div class="global-properties">
  3.     <h1>globalProperties</h1>
  4.     <div ref="LineChartRef" class="echart"></div>
  5.   </div>
  6. </template>
  7. <script setup>
  8. import { ref, onMounted, getCurrentInstance } from 'vue'
  9. const LineChartRef = ref()
  10. onMounted(() => {
  11.   // 获取全局echarts实例
  12.   const echarts = getCurrentInstance().appContext.config.globalProperties.$echarts
  13.   // 基于准备好的dom，初始化echarts实例
  14.   const lineChar = echarts.init(LineChartRef.value);
  15.   // 绘制图表
  16.   lineChar.setOption({
  17.     title: {
  18.       text: '折线图'
  19.     },
  20.     xAxis: {
  21.       type: 'category',
  22.       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  23.     },
  24.     yAxis: {
  25.       type: 'value'
  26.     },
  27.     series: [
  28.       {
  29.         data: [150, 230, 224, 218, 135, 147, 260],
  30.         type: 'line'
  31.       }
  32.     ]
  33.   });
  34. })
  35. </script>
  36. <style lang="scss" scoped>
  37. .global-properties {
  38.   margin: auto;
  39.   max-width: 60vw;

  41.   .echart {
  42.     width: 100%;
  43.     height: 500px;
  44.   }
  45. }
  46. </style>
复制代码
2. provide / inject 形式：

由于
  1. provide
复制代码
和
  1. inject
复制代码
必须在
  1. setup
复制代码
中使用，所以我们得在app里提供
  1. echarts
复制代码
①全量引入：
app.vue:
  1. <script setup>
  2. import * as echarts from 'echarts';
  3. import { provide } from 'vue'
  4. provide('echarts', echarts)
  5. </script>
复制代码
②按需引入：
app.vue:
  1. <script setup>
  2. import { provide } from 'vue'
  3. // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  4. import * as echarts from 'echarts/core';
  5. // 引入柱状图图表，图表后缀都为 Chart
  6. import { BarChart, LineChart } from 'echarts/charts';
  7. // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  8. import {
  9.   TitleComponent,
  10.   TooltipComponent,
  11.   GridComponent,
  12.   DatasetComponent,
  13.   TransformComponent
  14. } from 'echarts/components';
  15. // 标签自动布局，全局过渡动画等特性
  16. import { LabelLayout, UniversalTransition } from 'echarts/features';
  17. // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  18. import { CanvasRenderer } from 'echarts/renderers';
  19. // 注册必须的组件
  20. echarts.use([
  21.   TitleComponent,
  22.   TooltipComponent,
  23.   GridComponent,
  24.   DatasetComponent,
  25.   TransformComponent,
  26.   LabelLayout,
  27.   UniversalTransition,
  28.   CanvasRenderer,
  29.   BarChart,
  30.   LineChart
  31. ]);
  32. provide('echarts', echarts)
  33. </script>
复制代码
测试代码：
接着就可以在子页面注入echarts去使用了
xxx.vue：
  1. <template>
  2.     <div class="provide-inject">
  3.         <h1>provide / inject</h1>
  4.         <div ref="BarChartRef" class="echart"></div>
  5.     </div>
  6. </template>
  7. <script setup>
  8. import { ref, onMounted, inject } from 'vue'
  9. const BarChartRef = ref()
  10. onMounted(() => {
  11.     // 注入echarts实例
  12.     const echarts = inject("echarts");
  13.     // 基于准备好的dom，初始化echarts实例
  14.     const BarChart = echarts.init(BarChartRef.value);
  15.     // 绘制图表
  16.     BarChart.setOption({
  17.         title: {
  18.             text: '柱状图'
  19.         },
  20.         tooltip: {},
  21.         xAxis: {
  22.             data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  23.         },
  24.         yAxis: {},
  25.         series: [
  26.             {
  27.                 name: '销量',
  28.                 type: 'bar',
  29.                 data: [5, 20, 36, 10, 10, 20]
  30.             }
  31.         ]
  32.     });
  33. })
  34. </script>
  35. <style lang="scss" scoped>
  36. .provide-inject {
  37.     margin: auto;
  38.     max-width: 60vw;

  40.     .echart {
  41.         width: 100%;
  42.         height: 500px;
  43.     }
  44. }
  45. </style>
复制代码
❀简单封装

上面的按需引入需要导入的东西太多了，导致
  1. main.js/app.vue
复制代码
文件看起来极其肮脏，所以我们可以把它封装起来，需要使用时引入一下就好。
本地工作目录：
  1. Vue3脚手架项目
  2.         |-src
  3.                 |-utils
  4.                         |-echarts.js
复制代码
echarts.js： 文件我放到自己建的utils文件夹了，如果换了位置记得自己改一下引入路径。
  1. // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  2. import * as echarts from 'echarts/core';
  3. // 引入柱状图图表，图表后缀都为 Chart
  4. import { BarChart, LineChart } from 'echarts/charts';
  5. // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  6. import {
  7.     TitleComponent,
  8.     TooltipComponent,
  9.     GridComponent,
  10.     DatasetComponent,
  11.     TransformComponent
  12. } from 'echarts/components';
  13. // 标签自动布局，全局过渡动画等特性
  14. import { LabelLayout, UniversalTransition } from 'echarts/features';
  15. // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  16. import { CanvasRenderer } from 'echarts/renderers';

  18. // 注册必须的组件
  19. echarts.use([
  20.     TitleComponent,
  21.     TooltipComponent,
  22.     GridComponent,
  23.     DatasetComponent,
  24.     TransformComponent,
  25.     LabelLayout,
  26.     UniversalTransition,
  27.     CanvasRenderer,
  28.     BarChart,
  29.     LineChart
  30. ]);

  32. export {
  33.     echarts
  34. }
复制代码
如果你选择globalProperties形式，在
  1. main.js
复制代码
这样引入一下就好了：（使用方式不变）
  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import { echarts } from '@/utils/echarts' // 按需引入echarts
  5. const app = createApp(App)
  6. app.use(router)
  7. app.mount('#app')
  8. app.config.globalProperties.$echarts = echarts // 挂载全局使用
复制代码
而如果你选择provide / inject形式，则在
  1. app.vue
复制代码
这样引入一下就好了：（使用方式不变）
  1. <script setup>
  2. import { provide } from 'vue'
  3. import { echarts } from '@/utils/echarts' // 按需引入echarts
  4. provide('echarts', echarts) // 提供全局使用
  5. </script>
复制代码
四、循环输出

有时候我们要输出的图表数目可能是不确定的，这时我们要动态的绑定ref来获取dom，不知道的可以看官方文档的示例：传送门，接着假设拿到后端数据后并且页面也更新完了，我们就可以循环的去生成图表了，具体看下的案例。
代码演示：
  1. <template>
  2.     <div class="loop-output">
  3.         <h1>循环输出</h1>
  4.         <div class="box">
  5.             <div v-for="item in echartsData.value" :key="item.id" ref="refList" class="echart"></div>
  6.         </div>
  7.     </div>
  8. </template>
  9. <script setup>
  10. import { ref, reactive, onMounted, nextTick } from 'vue'
  11. import * as echarts from 'echarts';
  12. onMounted(() => {
  13.     loadData()
  14. })
  15. const refList = ref([])
  16. const echartsData = reactive({ value: [] })
  17. // 模拟加载后端数据
  18. const loadData = () => {
  19.     echartsData.value = [
  20.         {
  21.             id: '1',
  22.             value: 30,
  23.             name: '藤原拓海'
  24.         },
  25.         {
  26.             id: '2',
  27.             value: 60,
  28.             name: '高桥凉介'
  29.         },
  30.         {
  31.             id: '3',
  32.             value: 90,
  33.             name: '奔驰上树'
  34.         }
  35.     ]
  36.     // 需要等页面再次更新完，不然拿不到dom
  37.     nextTick(() => {
  38.         echartsData.value.forEach((e, i) => {
  39.             initEcharts(e, refList.value[i])
  40.         })
  41.     })
  42. }
  43. const initEcharts = (data, echartRef) => {
  44.     // 基于准备好的dom，初始化echarts实例
  45.     const chart = echarts.init(echartRef);
  46.     let option = {
  47.         tooltip: {
  48.             formatter: '{a} <br/>{b} : {c}%'
  49.         },
  50.         series: [
  51.             {
  52.                 name: 'Pressure',
  53.                 type: 'gauge',
  54.                 detail: {
  55.                     formatter: '{value}'
  56.                 },
  57.                 data: [data]
  58.             }
  59.         ]
  60.     };
  61.     // 绘制图表
  62.     chart.setOption(option);
  63. }
  64. </script>
  65. <style lang="scss" scoped>
  66. .loop-output {
  67.     margin: auto;
  68.     max-width: 60vw;
  69.     overflow: hidden;

  71.     .box {
  72.         display: flex;
  73.         justify-content: space-around;
  74.         flex-wrap: wrap;
  75.     }

  77.     .echart {
  78.         width: 50%;
  79.         height: 280px;
  80.     }
  81. }
  82. </style>
复制代码
五、动态更新

在我做的项目中不仅页面初次加载时要显示图表，还要根据筛选条件结果去动态更新图表，echarts的图表是用
  1. canvas
复制代码
画出来的，所以想要二次更新需要先在
  1. onMounted
复制代码
中初始化图表，接着用
  1. getOption()
复制代码
拿到图表的
  1. option
复制代码
实例，并且替换更新option里对应的图表数据，再用
  1. setOption(option)
复制代码
去二次触发更新，否则是不会生效的；当然，强制用
  1. v-if
复制代码
去销毁重建图表的dom，然后每次都去
  1. init
复制代码
初始化图表也是可以实现二次更新的，不过那样图表会有闪烁的现象。
代码演示：
  1. <template>
  2.     <div class="update">
  3.         <h1>动态更新</h1>
  4.         <div ref="echartRef" class="echart"></div>
  5.         <h3>集齐七天不洗头你的愿望是什么？</h3>
  6.         <button @click="updateEchart(0)" class="blue">脱单</button>
  7.         <button @click="updateEchart(1)" class="green">双休</button>
  8.         <button @click="updateEchart(2)" class="orange">暴富</button>
  9.     </div>
  10. </template>
  11. <script setup>
  12. import { ref, onMounted } from 'vue'
  13. import * as echarts from 'echarts'
  14. onMounted(() => {
  15.     // 初始化报表
  16.     pieChart = echarts.init(echartRef.value)
  17.     option_pie.series[0].data = requestData
  18.     pieChart.setOption(option_pie)
  19. })
  20. const echartRef = ref()
  21. let pieChart
  22. const option_pie = {
  23.     title: {
  24.         text: '饼图',
  25.         subtext: '',
  26.         left: 'center'
  27.     },
  28.     tooltip: {
  29.         trigger: 'item'
  30.     },
  31.     legend: {
  32.         orient: 'vertical',
  33.         left: 'left'
  34.     },
  35.     series: [
  36.         {
  37.             name: '',
  38.             type: 'pie',
  39.             radius: '50%',
  40.             data: [],
  41.             emphasis: {
  42.                 itemStyle: {
  43.                     shadowBlur: 10,
  44.                     shadowOffsetX: 0,
  45.                     shadowColor: 'rgba(0, 0, 0, 0.5)'
  46.                 }
  47.             }
  48.         }
  49.     ]
  50. }
  51. // 模拟服务器获取的数据
  52. let requestData = [
  53.     { value: 1, name: '脱单' },
  54.     { value: 1, name: '双休' },
  55.     { value: 1, name: '暴富' },
  56. ]
  57. // 点击更新报表
  58. const updateEchart = (id) => {
  59.     // 模拟数据更新
  60.     if (id != undefined) requestData[id].value += 1
  61.     // 获取报表option实例
  62.     let option = pieChart.getOption()
  63.     // 给实例赋上新的值
  64.     option.series[0].data = requestData
  65.     // 二次更新图表
  66.     pieChart.setOption(option)
  67. }
  68. </script>
  69. <style lang="scss" scoped>
  70. .update {
  71.     margin: auto;
  72.     max-width: 60vw;

  74.     .echart {
  75.         width: 100%;
  76.         height: 450px;
  77.     }

  79.     button {
  80.         margin: 0 10px;
  81.         color: white;
  82.         cursor: cell;
  83.     }

  85.     .blue {
  86.         background: #5470C6;
  87.     }

  89.     .green {
  90.         background: #95D178;
  91.     }

  93.     .orange {
  94.         background: #FAC858;
  95.     }
  96. }
  97. </style>
复制代码
获取项目Demo

有积分的交一下公粮，没有的话到Gitee下载就好
❀CSDN:
vue3-echarts（js原味）：传送门
vue3-echarts-ts（ts风味）：传送门
❀Gitee:
vue3-echarts（js原味）：传送门
vue3-echarts-ts（ts风味）：传送门
到此这篇关于vue3中使用Apache ECharts的文章就介绍到这了,更多相关vue使用Apache ECharts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/266728.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: node+vue前后端分离实现登录时使用图片验证码功能

下一篇: React深入浅出分析Hooks源码

发表于 2023-1-2 12:18:16

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4