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下)

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后端技术助力,党员学习平台更稳定

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

C++奇淫巧计:如何快速观察内存分配

需求 在不严肃的场景下&#xff0c;你想测试、跟踪自己的代码的内存分配&#xff0c;粗略评估有无错误的、意外的行为&#xff0c;怎么做&#xff1f; 代码 很简单&#xff0c;直接重写 new 操作符。 #include <iostream>static int malloc_count 0;void* operator …

38. C++ 引用的本质

1. C 引用的本质 1.1 引用的底层实现方式 引用被称为变量的别名&#xff0c;它不能脱离被引用对象独立存在&#xff0c;这是在高级语言层面的概念和理解&#xff0c;并未揭示引用的实现方式。常见错误说法是“引用“自身不是一个变量&#xff0c;甚至编译器可以不为引用分配空…

Day 41 | 动态规划 343. 整数拆分 、 96.不同的二叉搜索树

343. 整数拆分 题目 文章讲解 视频讲解 思路&#xff1a;不需要考虑正整数为1的情况。 dp[i]表示正整数i拆分后结果的最大乘积&#xff0c;递推公式中 j 表示拆分的正整数&#xff0c;最大不会超过 i-j &#xff0c;否则会轮回。dp[i-j]是正整数 i-j 拆分后结果最大乘积。 c…

堆排及时间复杂度分析

箴言: 初始阶段&#xff0c;不需要去纠结那一种更优美&#xff0c;非要找出那一种是最好的&#xff0c;其实能解决问题的就是好办法。 一&#xff0c;常见排序时间复杂度 冒泡快排归并堆排桶排时间O(n^2)O(nlogn)O(nlogn)O(nlogn)kn空间O(1)O(1)O(nlogn)O(1)kn 二&#xff…

Dijkstra求最短路(一) 朴素版本-算法基础-数据结构(二)

给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;所有边权均为正值。 请你求出 1 号点到 n 号点的最短距离&#xff0c;如果无法从 1 号点走到 n 号点&#xff0c;则输出 −1。 输入格式 第一行包含整数 n 和 m。 接下来 m 行每行包含三个整数…

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 打包…

[AIGC] 开源流程引擎哪个好,如何选型?

开源流程引擎是指一种自动化的工作流解决方案&#xff0c;它可以帮助你管理和协调你的业务流程和决策。但是&#xff0c;在开源世界里&#xff0c;有许多不同的流程引擎可以选择。因此&#xff0c;如何选择适合你的开源流程引擎&#xff0c;是一个具有挑战性和价值的话题。 文章…

AI嵌入式K210项目(26)-二维码识别

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

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…

爬虫为什么要使用代理?

爬虫使用的代理IP的原因是什么&#xff1a; 速度 选择速度较快的代理IP&#xff0c;能提高 爬虫 程序的效率和稳定性。 速度越快&#xff0c;建立连接和传输数据的时间越短&#xff0c;也就越不容易出现连接超时、连接中断等问题。 稳定性 选择稳定性好的代理IP&#xff0c;能够…

Docker-Learn(二)保存、导入、使用Docker镜像

1.保存镜像 根据上一节内容&#xff0c;将创建好镜像进行保存&#xff0c;需要退出当前的已经在运行的docer命令行中断里面&#xff0c;可以通过在终端里面输入指令exit或者按下键盘上的 ctrlD建退出&#xff1a; 回到自己的终端里面&#xff0c;输入指令&#xff1a; docker…

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

文章目录 总览数据链路层的研究思想数据链路层的基本概念数据链路层功能概述 总览 封装成帧指的是数据链路层将来自上层的网络层数据包&#xff08;如IP数据报&#xff09;添加上自己的帧头和帧尾&#xff0c;形成一个完整的帧。这个过程包括了对数据的封装&#xff0c;以便于在…

LeetCode回溯算法的解题思路

回溯法概念 回溯法&#xff1a;一种通过探索所有可能的候选解来找出所有的解的算法。如果候选解被确认不是一个解&#xff08;或者至少不是最后一个解&#xff09;&#xff0c;回溯算法会通过在上一步进行一些变化抛弃该解&#xff0c;即回溯并且再次尝试。 应用场景 回溯算…

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

下载解压UltraISO https://wwb.lanzoum.com/i8vY71nqnp4d 右键UltraISO.exe以管理员身份运行 点击选项 点击配置 91fddbd892a0.png) 点击虚拟光驱&#xff0c;把设备数量改成无&#xff0c;点击确定即可

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

目录 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; 代码呈现 测试点 上三角矩阵指主对角线以下的元素都为0的矩阵&#xff1b;主对角线为从矩阵的左上角至右下角的连线。 本题要求编写程序&#xff0c;判断一个给定的方阵是否…

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

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

倒计时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;如定制版公益证书、爱心回礼…