Blazor 向 ECharts 传递 option

目标

  将ECharts封装为Blazor组件,然后通过jsRuntime向ECharts传递参数,即设置option。

封装ECharts

步骤:

1. 在index.html中引入echarts.min.js;

2. 创建blazor组件,将ref传递给js用于初始化echarts;

<div style="@Style" @ref="elementReference"></div>

3. 在js中写初始化代码

window.EChart ={ charts: {},init: function (element, id, option) {if (element == null)return;var chart = echarts.init(element);c.charts[id] = chart;this.setOption(id,option);},setOption: function (id, option) {if (!c.charts[id])return;if (!option) {option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]};}c.charts[id].setOption(option);},
}

4. C#调用js的EChart.init函数

public static async Task EChartInit(this IJSRuntime jsRuntime, ElementReference element, Dictionary<string, object> option)
{await jsRuntime.InvokeVoidAsync("EChart.init", element, element.Id, option);
}

5. 在Blazor组件渲染完成后调用EChartInit 

        protected override async Task OnAfterRenderAsync(bool firstRender){await base.OnAfterRenderAsync(firstRender);if (firstRender){await JSRuntime.EChartInit(elementReference, Option);}}

用Dictionary<string,object>传递option

   ECharts里 option配置项是坐标轴、系列、图例、数据集等灵活组合的复杂对象,用C#强类型定义代码量会很大,用弱类型的Dictionary<string,object>来做更灵活,你可以把Dictionary<string,object>视为C#里的JSON。

  我把ECharts官网示例里的data最后数字从260修改为60来测试是否可行:

   调用后画出的曲线:

总结

  C#的jsRuntime序列化机制和ECharts的option对象之间,刚好可以用Dictionary<string,object>做媒,再复杂的对象都可以用Dictionary<string,object>来解构,学问在于里面的object可以是基本类型、对象(还是Dictionary<string,object>)、集合(List<object>),为此我专门做了个工具来定义任意解构的对象,这个万能的弱类型似乎有大用处。

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

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

相关文章

#stm学习总结 (二十八)硬件随机数实验

28.1 随机数发生器简介 STM32F407 自带了硬件随机数发生器&#xff08;RNG&#xff09;&#xff0c;RNG 处理器是一个以连续模拟噪声为基础的随机数发生器&#xff0c;在主机读数时提供一个 32 位的随机数。 28.1.1 RNG 框图 STM32F407 的随机数发生器&#xff08;RNG&#x…

ffmpeg单张图片生成固定时长的视频

ffmpeg -r 25 -f image2 -loop 1 -i fps_1.jpg -vcodec libx264 -pix_fmt yuv420p -s 1080*1920 -r 25 -t 30 -y fps.mp4这个命令将 fps_1.jpg 图片转换为一个 30 秒长的视频&#xff0c;分辨率为 1920x1080&#xff0c;帧率为 25 帧/秒&#xff0c;并使用 libx264 编码器进行压…

LeetCode -- 79.单词搜索

1. 问题描述 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格是那些水…

Linux系统——Nginx负载均衡模式

目录 一、Nginx优点 二、Nginx配置项——Conf Upstream 模块 三、Nginx负载均衡 1.负载均衡策略 1.1轮询 1.2IP_hash 1.3URL_hash 1.4Least_conn 1.5Weight 1.6Fair 2.Nginx负载均衡配置状态参数 3.什么是会话保持 3.1会话保持有什么作用呢 3.2Nginx会话保持 3…

《开源软件的影响力》

目录 开源软件的影响力 技术影响力&#xff1a; 经济影响力&#xff1a; 社会影响力&#xff1a; 结论&#xff1a; 开源软件的影响力 简介&#xff1a; 在当今快速发展的科技领域&#xff0c;开源软件已经成为了一种重要的开发模式。本文将重点探讨开源软件对技术、经济和…

用JavaScript动态提取视频中的文字

现阶段整个社会短视频&#xff0c;中视频为王&#xff0c;文字传播虽然被弱化&#xff0c;但在业务中还是有一定的传播价值&#xff0c;今天就来讲一讲如何使用js动态提取视频中的字幕。 先来看看效果&#xff1a; 屏幕录制2024-02-29 15.40.18 一&#xff0c;tesseract.js介…

Android Termux安装MySQL并实现公网远程连接本地数据库

文章目录 前言1.安装MariaDB2.安装cpolar内网穿透工具3. 创建安全隧道映射mysql4. 公网远程连接5. 固定远程连接地址 前言 Android作为移动设备&#xff0c;尽管最初并非设计为服务器&#xff0c;但是随着技术的进步我们可以将Android配置为生产力工具&#xff0c;变成一个随身…

如何解决 C/C++ 编译器优化导致的编译BUG(程序崩溃)支援VC++/CLANG/GCC

本文仅适用于&#xff0c;有愿意、爱捣鼓的童靴。 因编译器优化导致编译BUG&#xff0c;即DEBUG下面无故障稳定工作&#xff0c;但RELESE下程序会在特定函数位置上崩溃。 这要求 C/C 开发人员拥有最基本的素质&#xff0c;需要能够承受&#xff0c;逐行审视编译器输出的目标平…

【二叉搜索树】【递归】【迭代】Leetcode 700. 二叉搜索树中的搜索

【二叉搜索树】【递归】【迭代】Leetcode 700. 二叉搜索树中的搜索 二叉搜索树解法1 递归法解法2 迭代法 ---------------&#x1f388;&#x1f388;题目链接&#x1f388;&#x1f388;------------------- 二叉搜索树 二叉搜索树&#xff08;Binary Search Tree&#xff…

使用Python,maplotlib绘制树型有向层级结构图

使用Python&#xff0c;maplotlib绘制树型有向层级结构图 1. 效果图2. 源码2.1 plotTree.py绘制层级结构及不同样式2.2 plotArrow.py 支持的所有箭头样式 参考 前俩篇博客介绍了 1. 使用Python&#xff0c;networkx对卡勒德胡赛尼三部曲之《群山回唱》人物关系图谱绘制 2. 使用…

MySQL 使用 pt-archiver 删除数据

文章目录 前言1. 环境准备1.1 模拟造数1.2 工具安装 2. 删除数据2.1 批次删除表2.2 原理解析2.3 批处理思路 后记 前言 在线核心业务都会有日志表&#xff0c;随着业务持续运行&#xff0c;日志表每天都在增大&#xff0c;最后超过阈值触发空间使用率告警。DBA 处理空间告警时…

爬取某牙视频

爬取页面链接&#xff1a;游戏视频_游戏攻略_虎牙视频 爬取步骤&#xff1a;点进去一个视频播放&#xff0c;查看media看有没有视频&#xff0c;发现没有。在xhr中发现有许多ts文件&#xff0c;但这种不是很长的视频一般都有直接的播放链接&#xff0c;所以目标还是找直接的链…

数据结构-----再谈String,字符串常量池,String对象的创建、intern方法的作用

文章目录 1.字符串常量池1.1. 创建对象的思考2.2. 字符串常量池(StringTable)1.3. 再谈String对象创建1.4. intern方法 1.字符串常量池 1.1. 创建对象的思考 下面两种创建String对象的方式相同吗&#xff1f; public static void main(String[] args) {String s1 "hel…

我用 Navicat 的这些技能少加了好多班,也为公司挣了不少w

今天又用 Navicat 解决了一个数据同步的需求&#xff0c;财务又到账一笔收入....... 本文我将结合我过去的实践&#xff0c;给大家推荐一款数据库的运维工具。给大家呈现一下竟然可以用 Navicat 解决这些实际问题 。 熬了几个夜&#xff0c;毫无保留地将这些技能分享&#xf…

vue中动态引入图片

分析 很多时间&#xff0c;不管是vue2&#xff0c;还是vue3开发中都会遇到&#xff0c;动态渲染图片的功能&#xff0c;但是为什么我们直接将图片的路径直接赋值给变量的时候&#xff0c;图片渲染不出来&#xff0c;而通过require引入加载图片后却能正常渲染呢&#xff1f;主要…

华为HarmnyOS TypeScript基础语法快速入门

华为HarmnyOS TypeScript基础语法快速入门 一、JavaScript、TypeScript、ArkTS二、TypeScript基础语法1. 基础类型2. 条件语句3. 函数4. 类5. 模块6. 迭代器 一、JavaScript、TypeScript、ArkTS ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript&#xff08;简称TS&am…

Axios入门

1.概念 Axios是一个开源的可以用在浏览器和node.js的异步通信框架&#xff0c;他的主要功能是实现Ajax异步通信 2.Axios入门程序 2.1.准备json格式的文件 {"name": "小明","address": {"street": "雁塔","city"…

动画原理:表面形变算法的思考与总结

前言&#xff1a; 之前我的文章 Mesh形变算法_mesh算法-CSDN博客就有大致的讨论过&#xff0c;介绍的也比较粗略&#xff01;现在主要是想在Triangulated Surface Mesh Deformation方向上更深入的讨论一下&#xff01;结合今年我对这一块的学习谈谈我的理解~ 下面要介绍大致几…

MySQL(基础篇)——函数、约束

一.函数 1.定义 函数是指一段可以直接被另一段程序调用的程序或代码。 2.字符串函数 常见如下&#xff1a; -- 字符串拼接 SELECT CONCAT(hello,MySql) AS CONCAT -- 将字符串全部转为小写 SELECT LOWER(HEllo MYSql) AS LOWER -- 将字符串全部转为大写 SELECT UPPER(Hello…

环境配置 |Jupyter lab/Jupyter Notebook 安装与设置

ipynb使用Jupyterlab/Jupyter Notebook 来编写Python程序时的文件,在使用时,可以现转换为标准的.py的python文件 1.Jupyter Lab 1.1.下载安装 环境&#xff1a;Linux pip install jupyterlab 1.2.使用 jupyter lab 点击后进入 1.3.jupyter lab更换内核 因为我的是在anac…