vue3 + typescript + echarts后端动态获取数据显示问题总结

echarts组件提供多样的图表组件，常用有柱状图、饼图、折线图、散点图。应用方便快捷，个人就在应用中遇到的问题做个自我总结，希望对他人有一捏捏的帮助。

echarts官网网址：Apache ECharts

当时本人使用时也是第一次使用，前期都没有遇到问题，在后期做好界面，与其他页面切换显示时出现图表不显示问题。在浏览众博客文章之后做出总结。代码如下：

<template lang="pug">
div(:id="barPage" style="float: right; width: 55%; height: 100%;") //高度必须设定</template><script lang="tsx">
import echarts from 'echarts';
import MixinModal from "@/mixin/view/modal";
import { ref } from '@vue/reactivity';export default class BarChart extends MixinModal{barPage: any = ref("barPage" + Date.now() + Math.random()) //设置动态ID，解决搭配tags切换页面造成的图表不显示问题myChart: anydata1: any = []data2: any = []data3: any = []year: any = []BarChart() {    //详细配置项讲解及更多参数可以查看echarts配置项手册this.myChart = echarts.init(document.getElementById(this.barPage) as any)this.myChart.setOption({title: {text: '图表标题',x: 'left' ,              //标题位置textStyle: {             //标题内容的样式color: '#000',fontSize: 16           //主题文字字体大小，默认为18px},},legend: {data: ['', '', ''],       //柱状条代表的数据，需要和series.name相同，否则不显示type: "plain",right: '2%',},tooltip: {                    //鼠标悬浮文字提示trigger: 'axis',axisPointer: { type: 'shadow' }},grid: {                       //图标坐标left: '0%',top: '50px',right: '0%',bottom: '10px',containLabel: true},xAxis: [{                    //横轴数据type: 'category',data: this.year,splitLine: {show: true,},}],yAxis: [{                   //纵轴数据type: 'value',axisLabel: {formatter: (value: any) => {        //此处我采用if判断设置了数值单位if(value >= 100000000 || value <= -100000000) { value = (value / 100000000) + '亿'}if(value >= 10000 || value <= -10000) { value = (value / 10000) + '万' }if(value >= 1000 || value <= -1000) { value = (value / 1000) + '千' }return value},textStyle: {fontSize: '12',}}}],series: [        //数据赋值{type: 'bar',   //类型为柱状图barGap:  '0%',name : "",data: this.data1,itemStyle: {normal: {color: '#00FFFF', //柱子颜色barBorderRadius: 5, //圆角}}},{type: 'bar',barGap:  '0%',name : "",data: this.data2,itemStyle: {normal: {color: '#F0E68C', barBorderRadius: 5,  }}},{type: 'bar',barGap:  '0%',name : "",data: this.data3,itemStyle: {normal: {color: '#1E90FF', barBorderRadius: 5, }}}]})}async initData() {        //处理后台返回数据（部分代码已省略）const promise = '获取到后台数据'if(promise.code == 0) {for(let i = 0; i < promise.data.length; i++) {this.data1.push(promise.data[i].data1)this.data2.push(promise.data[i].data2)this.data3.push(promise.data[i].data3)this.year.push(promise.data[i].year)}//获取到数组之后再次赋值给myChartthis.myChart.setOption({xAxis: [ { data: this.year }],series: [{ data: this.data1}, { data: this.data2}, { data: this.data3}]})}}mounted() {window.addEventListener('resize', () => {    //图表随屏幕大小变化this.myChart.resize()})this.$nextTick(() => {    //此处必须在$nextTick里调用数据处理方法和生成图表this.initData()this.BarChart()})}
}
</script>

效果图：

总结：多个图表在同一页面情况下，div的初始宽高必须设置；动态获取数据时虽然处理数据的代码在前，但图表仍会先加载（但是上述代码顺序不能变），所以刚开始加载图表时，如若数据量较大，会先显示空图表。动态id是为了在搭配element-ui的tags标签页，切换页面时图表id已存在导致的空白页问题。

（以上为个人就开发中遇到的问题所总结的方案，如若大佬们有啥优化的方案，欢迎指出，小白编写，有错误也欢迎指出。跪谢）

vue3 + typescript + echarts后端动态获取数据显示问题总结相关推荐

[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
echarts图表动态获取后台数据详解（二）
前篇文章介绍了如何在现有的页面中,建立容器存放echarts图表,如何引入echarts.js文件,和配置图表库的路径.并将静态数据在页面上呈现出来.相当于是为动态获取后台数据做了铺垫.那么这篇文章, ...
Vue3+Typescript+Vite 实现动态访问静态图片（含微信小程序端）
前言:在最近新起的项目中,用到了较新的技术栈vue3.2+vite+ts,跟着网上的写法渐渐上手了,在菜单这一块我按照以往的写法,自己写了一个静态资源数据并用 require 包裹声明, 再以循环的方 ...
vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...
从后端数据库获取数据并传值到前端vue项目的echarts柱状图/折线图/饼图里
不同图表的数据获取有一定的区别在这些区别上花了不少功夫试验,把最后成功的方法做个记录,如果有类似项目要做的话,也可看看当个参考. 后端后端都大同小异,方法上没有区别,在这里以柱状图为例. sql: ...
微信小程序使用echarts动态获取数据
Number2 echarts动态获取数据继续上一篇,结合echarts动态获取数据官方提供了一个微信与echarts相结合的数据,里面就是简单的各种工具,数据获取没有进行动态绑定,各种搜索资料最 ...
vue使用echarts是，动态获取数据，动态更新图表数据。
当我们初始化完数据后,需要更新数据时,虽然请求成功,获取到新的数据.但是echarts的图表没有根据数据更新而更新,原因是数据更新了,但echarts还是初始化时的那个. 我们可以在请求成功后,重新初 ...
Echarts饼状图数据动态获取
首先肯定是引入echarts的相关jar包,地址:https://www.echartsjs.com/zh/download.html 你可以引入在线定制生成的jar包,如下图所示: 然后接下来就自己 ...
ajax动态获取后台数据绘制echarts图表
Echarts是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻 ...
golang后端动态生成图片、一文搞懂image/draw使用、一张图片粘贴到另一张图片上、根据url获取图片内容、在图片周围画线、invalidJPEGformat: missingSOImarke
后端动态生成图片.在图片上写文字.将另一张图片贴到模板图片上.图片生成边框最近做项目,遇到一个需求,在后端根据模板文件动态的生成图片然后返回给前端,原以为是一个很简单的需求,但在此过程中遇到了很多的 ...

vue3 + typescript + echarts后端动态获取数据显示问题总结

vue3 + typescript + echarts后端动态获取数据显示问题总结相关推荐

最新文章

热门文章