echarts图表插件

图表组件

ECharts，全称为Enterprise Charts，是一个使用JavaScript实现的开源可视化库。它主要用于数据可视化领域，能够方便地创建出直观、交互性强的图表。ECharts由百度团队开发，目前是Apache的顶级项目之一。ECharts支持的图表类型非常丰富，包括但不限于柱状图、折线图、饼图、散点图、雷达图、地图、热力图、树图、桑基图等多种。ECharts的设计哲学是可高度定制化和拓展性好，能够满足多种数据可视化需求。

ECharts的主要特点

Echarts官方链接

  1. 丰富的图表类型：ECharts提供了丰富的图表类型，能够满足大部分数据可视化需求。
  2. 高度可定制：用户可以通过配置项自定义图表的各个元素，如色彩、字体、样式等，满足个性化展示需求。
  3. 良好的交互性：ECharts支持图表的交互操作，如缩放、拖拽、点击等，提高用户体验。
  4. 强大的性能：利用zrender作为渲染引擎，优化渲染算法，即使是大数据量也能保证较好的性能。
  5. 多端适应：支持基于HTML5的Web标准，可在PC和移动设备上使用。
  6. 国际化：ECharts支持多国语言，方便国际化项目使用。

安装命令如下：

cd bingo_web  # 注意，客户端安装模块的所有命令，务必在package.json所在目录下操作。
npm config set strict-ssl true 
npm install echarts --save --registry=https://registry.npm.taobao.org

安装完成以后，直接可以在src/views/Bingo.vue页面组件中进行使用Echarts基本示例查看效果。
你遇到的错误信息 "Initialize failed: invalid dom." 指示 ECharts 试图在一个无效的 DOM 元素上进行初始化。这个问题通常是因为在试图初始化 ECharts 实例的时候，对应的 DOM 元素还没有被渲染或不可见，导致 ECharts 无法找到这个元素。

在你的代码中的以下部分：

var myChart = echarts.init(document.getElementById('main'));

你试图使用 document.getElementById('main') 来获取 DOM 元素，但在 Vue 应用中并不存在一个 id="main" 的元素。另外，由于你使用了 Vue 组合式API (<script setup> 标签)，直接操作 DOM 可能不是最佳实践。

为了解决这个问题，并且以 Vue 的方式来正确地使用 ECharts，你可以按照以下步骤来修改你的代码：

步骤 1: 使用 Vue 引用来访问 DOM 元素

首先，使用 Vue 的 ref 来创建一个引用，而不是使用 document.getElementById。你已经为 div 元素创建了一个引用 echartsDom：

<div ref="echartsDom" style="width: 600px; height: 400px;"></div>

步骤 2: 在合适的生命周期钩子中初始化 ECharts

由于直接在 <script setup> 中执行代码可能会在 DOM 元素准备好之前尝试访问它们，因此你需要确保在 DOM 元素可用时初始化 ECharts 实例。在 Vue 3 中，你可以使用 onMounted 钩子来保证 DOM 已经挂载：

import { onMounted, ref } from 'vue';const echartsDom = ref(null); // 创建一个 refonMounted(() => {if (echartsDom.value) {var myChart = echarts.init(echartsDom.value);// 指定图表的配置项和数据var option = {// 配置项...};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}
});

注意：在使用组合式 API 时，通过 ref 创建的引用在模板中使用时不需要 .value，但在 JavaScript 中访问时，需要通过 .value 来获取其真实的 DOM 元素。

完整的修改建议

根据上述步骤修改后，你的 <script setup> 部分应该类似于这样：

import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
// 其他 import...const echartsDom = ref(null);onMounted(() => {if (echartsDom.value) {var myChart = echarts.init(echartsDom.value);var option = {title: {text: 'ECharts入门示例'},tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};myChart.setOption(option);}
});

并在 template 部分相应地更新 echartsDom ref 的使用：

<div ref="echartsDom" style="width: 600px; height: 400px;"></div>

执行效果：
在这里插入图片描述

例子2

<template><h1 class="time">Time</h1><div><div class="c1"><ConfigProvider :locale="zhCN"><!-- 应用的其他内容 --><div><a-button type="primary" @click="showModal">Open Modal</a-button><a-modal v-model:open="open" title="Basic Modal" @ok="handleOk"><a-form:model="formState"name="basic":label-col="{ span: 8 }":wrapper-col="{ span: 16 }"autocomplete="off"@finish="onFinish"@finishFailed="onFinishFailed"><a-form-itemlabel="Username"name="username":rules="[{ required: true, message: 'Please input your username!' }]"><a-input v-model:value="formState.username" /></a-form-item><a-form-itemlabel="Password"name="password":rules="[{ required: true, message: 'Please input your password!' }]"><a-input-password v-model:value="formState.password" /></a-form-item><a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }"><a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox></a-form-item><a-form-item :wrapper-col="{ offset: 8, span: 16 }"><a-button type="primary" html-type="submit">Submit</a-button></a-form-item></a-form></a-modal></div><a-calendar v-model:value="value" @panelChange="onPanelChange" @select="onSelect"></a-calendar><router-view/></ConfigProvider></div><div class="c2"><div ref="echartsDom" style="width: 600px; height: 400px;"></div></div><div class="c3"><div class="chart" ref="chart"></div></div><div class="c4" ><!-- 在HTML中指定一个容器，用来容纳将要绘制的图表 --><div class="drak" ref="dark"></div></div></div></template><script setup>import * as echarts from 'echarts';import { ConfigProvider } from 'ant-design-vue';import zhCN from 'ant-design-vue/es/locale/zh_CN';import {onMounted, ref} from 'vue';const open = ref(false);const showModal = () => {open.value = true;};const handleOk = e => {console.log(e);open.value = false;};import { reactive } from 'vue';const formState = reactive({username: '',password: '',remember: true,});const onFinish = values => {console.log('Success:', values);};const onFinishFailed = errorInfo => {console.log('Failed:', errorInfo);};const value = ref();const onPanelChange = (value, mode) => {console.log(value, mode);};const echartsDom = ref(null);/*饼图*/const chart = ref(null)let setbing = () =>{//基于准备好的dom，初始化echarts实例const myChart1 = echarts.init(chart.value);var option1;option1 = {legend: {top: 'bottom'},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},series: [{name: 'Nightingale Chart',type: 'pie',radius: [50, 250],center: ['50%', '50%'],roseType: 'area',itemStyle: {borderRadius: 8},data: [{ value: 40, name: 'rose 1' },{ value: 38, name: 'rose 2' },{ value: 32, name: 'rose 3' },{ value: 30, name: 'rose 4' },{ value: 28, name: 'rose 5' },{ value: 26, name: 'rose 6' },{ value: 22, name: 'rose 7' },{ value: 18, name: 'rose 8' }]}]};//使用刚指定的配置项和数据显示图表。option1 && myChart1.setOption(option1);}/*3d图*/const dark = ref()let ditu = () =>{var myChart2 = echarts.init(dark.value);var option2;option2 = {title: {text: 'Proportion of Browsers',subtext: 'Fake Data',top: 10,left: 10},tooltip: {trigger: 'item'},legend: {type: 'scroll',bottom: 10,data: (function () {var list = [];for (var i = 1; i <= 28; i++) {list.push(i + 2000 + '');}return list;})()},visualMap: {top: 'middle',right: 10,color: ['red', 'yellow'],calculable: true},radar: {indicator: [{ text: 'IE8-', max: 400 },{ text: 'IE9+', max: 400 },{ text: 'Safari', max: 400 },{ text: 'Firefox', max: 400 },{ text: 'Chrome', max: 400 }]},series: (function () {var series = [];for (var i = 1; i <= 28; i++) {series.push({type: 'radar',symbol: 'none',lineStyle: {width: 1},emphasis: {areaStyle: {color: 'rgba(0,250,0,0.3)'}},data: [{value: [(40 - i) * 10,(38 - i) * 4 + 60,i * 5 + 10,i * 9,(i * i) / 2],name: i + 2000 + ''}]});}return series;})()};option2 && myChart2.setOption(option2);}onMounted(() => {if (echartsDom.value) {var myChart = echarts.init(echartsDom.value);var option = {title: {text: 'ECharts入门示例'},tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};myChart.setOption(option);}setbing()ditu()});</script><style scoped>.events {list-style: none;margin: 0;padding: 0;}.events .ant-badge-status {overflow: hidden;white-space: nowrap;width: 100%;text-overflow: ellipsis;font-size: 12px;}.notes-month {text-align: center;font-size: 28px;}.notes-month section {font-size: 28px;}.chart{width: 500px;height: 500px;float: left;margin: 0 auto 0 100px;}.c1,.c2,.c3,.c4  {float: left;}.drak{width: 300px;height: 500px;float: left;margin: 0 auto 0 100px;}</style>

实现效果：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/674779.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JVM调优（Window下）

JVM调优（Window下）

1、编写代码&#xff0c;像下面代码这样&#xff0c;产生OOM&#xff0c; private static final Integer K 1024;/*** 死循环&#xff0c;验证JVM调优* return*/GetMapping(value "/deadLoop")public void deadLoop(){int size K * K * 8;List<byte[]> lis…
阅读更多...
Java后端技术助力，党员学习平台更稳定

Java后端技术助力，党员学习平台更稳定

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…
阅读更多...
Linux介绍和命令使用

Linux介绍和命令使用

目录 目录 一、Linux简介 1.1 主流操作系统 1.2 Linux 发展历史 1.3 Linux系统版本 二、Linux安装 三、Linux 目录结构 四、Linux常用命令 4.1 基础常用命令说明 4.2 Linux 命令使用技巧 4.3 Linux 命令格式 4.4 进阶重点常用命令 4.4.1 拷贝移动命令 4.4.2 打包…
阅读更多...
AI嵌入式K210项目（26）-二维码识别

AI嵌入式K210项目（26）-二维码识别

文章目录 前言一、什么是二维码&#xff1f;二、实验准备三、实验过程四、API接口总结 前言 本章介绍基于机器视觉实现二维码识别&#xff0c;主要包含两个过程&#xff0c;首先检测图像中是否有二维码&#xff0c;如果有则框出并打印二维码信息&#xff1b; 一、什么是二维码…
阅读更多...
STM32——LCD（1）认识

STM32——LCD（1）认识

目录 一、初识LCD 1. LCD介绍 2. 显示器的分类 3. 像素 4. LED和OLED显示器 5. 显示器的基本参数 &#xff08;1&#xff09;像素 &#xff08;2&#xff09;分辨率 &#xff08;3&#xff09;色彩深度 &#xff08;4&#xff09;显示器尺寸 &#xff08;5&#xff…
阅读更多...
Docker-Learn（二）保存、导入、使用Docker镜像

Docker-Learn（二）保存、导入、使用Docker镜像

1.保存镜像 根据上一节内容&#xff0c;将创建好镜像进行保存&#xff0c;需要退出当前的已经在运行的docer命令行中断里面&#xff0c;可以通过在终端里面输入指令exit或者按下键盘上的 ctrlD建退出&#xff1a; 回到自己的终端里面&#xff0c;输入指令&#xff1a; docker…
阅读更多...
计算机网络-数据链路层概述（功能概述 链路 数据链路 物理通道 逻辑通道）

计算机网络-数据链路层概述（功能概述 链路 数据链路 物理通道 逻辑通道）

文章目录 总览数据链路层的研究思想数据链路层的基本概念数据链路层功能概述 总览 封装成帧指的是数据链路层将来自上层的网络层数据包&#xff08;如IP数据报&#xff09;添加上自己的帧头和帧尾&#xff0c;形成一个完整的帧。这个过程包括了对数据的封装&#xff0c;以便于在…
阅读更多...
电脑多出一个虚拟驱动器又无法删除怎么办

电脑多出一个虚拟驱动器又无法删除怎么办

下载解压UltraISO https://wwb.lanzoum.com/i8vY71nqnp4d 右键UltraISO.exe以管理员身份运行 点击选项 点击配置 91fddbd892a0.png) 点击虚拟光驱&#xff0c;把设备数量改成无&#xff0c;点击确定即可
阅读更多...
【PTA浙大版《C语言程序设计（第4版）》|编程题】习题7-3 判断上三角矩阵（附测试点）

【PTA浙大版《C语言程序设计（第4版）》|编程题】习题7-3 判断上三角矩阵（附测试点）

目录 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; 代码呈现 测试点 上三角矩阵指主对角线以下的元素都为0的矩阵&#xff1b;主对角线为从矩阵的左上角至右下角的连线。 本题要求编写程序&#xff0c;判断一个给定的方阵是否…
阅读更多...
[大厂实践] Netflix容器平台内核panic可观察性实践

[大厂实践] Netflix容器平台内核panic可观察性实践

在某些情况下&#xff0c;K8S节点和Pod会因为出错自动消失&#xff0c;很难追溯原因&#xff0c;其中一种情况就是发生了内核panic。本文介绍了Netflix容器平台针对内核panic所做的可观测性增强&#xff0c;使得发生内核panic的时候&#xff0c;能够导出信息&#xff0c;帮助排…
阅读更多...
倒计时61天

倒计时61天

M-智乃的36倍数(normal version)_2024牛客寒假算法基础集训营3 (nowcoder.com) //非ac代码,超时了,54.17/100#include<bits/stdc.h> using namespace std; const int N1e55; const int inf0x3f3f3f3f; #define int long long int n; string s1[N]; void solve() {cin>…
阅读更多...
字节跳动公益平台“公益聚力计划”上线

字节跳动公益平台“公益聚力计划”上线

为更好地联合社会多方力量参与社会公益&#xff0c;字节跳动公益平台于近日正式推出“公益聚力计划”&#xff08;以下简称“计划”&#xff09;。“计划”支持公益项目的策划与筛选、公益机构撮合&#xff0c;以及多种定制化的产品功能&#xff0c;如定制版公益证书、爱心回礼…
阅读更多...
uniapp小程序端使用计算属性动态绑定style样式踩坑

uniapp小程序端使用计算属性动态绑定style样式踩坑

踩坑点: 使用uniapp编译小程序端动态绑定复杂style使用计算属性方式&#xff0c;return必须返回json字符串格式&#xff0c;不能返回object&#xff0c;否则会不起作用。 代码总览 视图层 逻辑层&#xff08;注意这里是使用的计算属性哈&#xff09; 这里我封装成了一个个性化…
阅读更多...
【前端web入门第五天】01 结构伪类选择器与伪元素选择器

【前端web入门第五天】01 结构伪类选择器与伪元素选择器

文章目录: 1.结构伪类选择器 1.1 nth-child(公式) 2.伪元素选择器 1.结构伪类选择器 作用:根据元素的结构关系查找元素。 选择器说明E:first-child查找第一个E元素E:last-child查找最后一个E元素E:nth-child(N)查找第N个E元素&#xff08;第一个元素N值为1) 一个列表结构…
阅读更多...
【若依】若依框架在本地运行的操作方法，及踩坑记录

【若依】若依框架在本地运行的操作方法，及踩坑记录

若依框架简介 若依是一个Gitee上一个开源的基于SpringBoot开发的轻量级Java快速开发框架&#xff0c;用以快速构建后台管理系统&#xff0c;点击跳转到官方地址 本机部署过程 Step1. 下载项目源码 我选择的是直接下载zip压缩包&#xff0c;解压后得到如下文件夹&#xff0c…
阅读更多...
基于YOLOv8的暗光低光环境下（ExDark数据集）检测，加入多种优化方式---自研CPMS注意力，效果优于CBAM ，助力自动驾驶（二）

基于YOLOv8的暗光低光环境下（ExDark数据集）检测，加入多种优化方式---自研CPMS注意力，效果优于CBAM ，助力自动驾驶（二）

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文主要内容:详细介绍了暗光低光数据集检测整个过程&#xff0c;从数据集到训练模型到结果可视化分析&#xff0c;以及如何优化提升检测性能。 &#x1f4a1;&#x1f4a1;&#x1f4a1;加入 自研CPMS注意力 mAP0.5由原始的0.682提升…
阅读更多...
Syntax error on token “-＞“, : expected （jdk20 jdk8 switch）

Syntax error on token “-＞“, : expected （jdk20 jdk8 switch）

Syntax error on token "->", : expected &#xff08;jdk20 jdk8 switch&#xff09; switch
阅读更多...
Spring Boot的打包方式：JAR vs. WAR 打包方式

Spring Boot的打包方式：JAR vs. WAR 打包方式

Spring Boot的打包方式&#xff1a;JAR vs. WAR 打包方式 Spring Boot是一个流行的Java开发框架&#xff0c;提供了快速、便捷的应用程序开发和部署方式。本文将介绍Spring Boot的两种常见打包方式&#xff1a;JAR和WAR。我们将深入探讨它们的特点、适用场景和部署方式&#xf…
阅读更多...
Bpmn-js自定义Palette元素

Bpmn-js自定义Palette元素

Bpmn-js作为一个流程编辑器&#xff0c;常规的我们可以将其划分为几个功能区域&#xff0c;每个区域对应的负责不同的功能实现&#xff0c;bpmn-js的设计给我们留下了大量的留白和可扩展区域&#xff0c;其每一部分都可进行组合拼装&#xff0c;同时也支持我们的各种不同层次需…
阅读更多...
Redis主从复制原理工作流程和常见问题

Redis主从复制原理工作流程和常见问题

Redis主从复制原理 相信很多小伙伴都已经配置过主从复制&#xff0c;但是对于redis主从复制的工作流程和常见问题很多都没有深入的了解。咔咔这次用时俩天时间给大家整理一份redis主从复制的全部知识点。本文实现所需环境 centos7.0 redis4.0 一、什么是Redis主从复制&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023