echarts 图片添加,注意一定echarts的版本坑了2天

【Echarts第四篇】用自定义图标渲染数据 前言: 项目中遇到一个需求,将Y轴数据源中的不同字段用对应的自定义图标展示,正好Echarts支持自定义系列图标,实现起来挺方便,所以我又自己做了一个小栗子,总结一下Echarts自定义系列的用法。 这是下文例子的成品demo,包含两个系列(series)的Echarts图,其中一个是普通的折线图,另一个则是根据数据自定义的系列。 一、Echarts自定义系列介绍 Echarts的自定义系列支持自定义系列中的图形元素,核心API如下: series: [ { type: custom, //指定系列类. 阅读详情
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
            #chart{
                width:500px;
                height:500px;
                border:1px solid #999;
            }
        </style>
	</head>
	<body>
        <div id="chart">
        </div>
		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var dataTemp = [
		{
			lng: "121.59874400",
			num: 10,
			time: "2020-03-19 08",
			stationname: "太古小学(鄞州)",
			lat: "29.85970300"
		},
		{
			lng: "121.57025100",
			num: 65,
			time: "2020-03-19 08",
			stationname: "万里学院(鄞州)",
			lat: "29.82393300"
		},
		{
			lng: "121.72304700",
			num: 120,
			time: "2020-03-19 08",
			stationname: "龙赛医院(镇海)",
			lat: "29.96021500"
		},
		{
			lng: "121.84661500",
			num: 165,
			time: "2020-03-19 08",
			stationname: "环保大楼(北仑)",
			lat: "29.91421000"
		},
		{
			lng: "121.57000639",
			num: 230,
			time: "2020-03-19 08",
			stationname: "白沙活动中心(江北)",
			lat: "29.90139717"
		},
		{
			lng: "121.53491900",
			num: 80,
			time: "2020-03-19 08",
			stationname: "市监测中心(海曙)",
			lat: "29.87092600"
		},
		{
			lng: "121.43101500",
			num: 59,
			time: "2020-03-19 08",
			stationname: "城南小学(宁海)",
			lat: "29.29136000"
		},
		{
			lng: "121.28829300",
			num: 270,
			time: "2020-03-19 08",
			stationname: "溪口镇政府(奉化)",
			lat: "29.69543800"
		},
		{
			lng: "121.26432700",
			num: 280,
			time: "2020-03-19 08",
			stationname: "实验小学(慈溪)",
			lat: "30.18224100"
		}
];
                                  
function addImage(url, params, api, realData){
    return  {
        type: 'image',

        style: {
            image: url,
            x: api.coord([
                realData[params.dataIndex].lng, realData[params.dataIndex]
                    .lat
            ])[0],
            y: api.coord([
                realData[params.dataIndex].lng, realData[params.dataIndex].lat
            ])[1],
            width: 20,
            height: 19,
        }
    }
}
var uploadedDataURL = "js/data-1509940365453-SkScnUTCW.json";
var myChart = echarts.init(document.getElementById('chart'));
$.getJSON(uploadedDataURL, function (usaJson) {
    myChart.hideLoading();
    echarts.registerMap('ningbo', usaJson);
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return params.data.stationname + ' : ' + params.data.num;  
                        }
                    },
                    geo: {
                        show: true,
                        map: "ningbo",
                        roam: true,
                        scaleLimit: {
                            min: 1,
                            max: 10
                        },
                        zoom: 1,
                        aspectScale: 1,
                        top:30,
                        itemStyle: {
                            normal: {
                                borderColor: "rgba(255, 255, 255, 0.5)",
                                areaColor: "rgba(0, 255, 255, 0.5)",
                                borderWidth: 1,
                                shadowBlur: 10,
                                shadowColor: "rgba(63, 218, 255, 0.5)"
                            },
                            emphasis: {
                                show: false,
                                areaColor: "#31d2ff"
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: "10",
                                color: "#333333"

                            },
                            emphasis: {
                                show: false
                            }
                        }
                    },
                    series: [
                        
                        {
                            name: '地图',
                            type: 'custom',
                            coordinateSystem: 'geo',
                            renderItem: function (params,api) {//具体实现自定义图标的方法
                                if (dataTemp[params.dataIndex].num > 0  &&  dataTemp[params.dataIndex].num <= 50) {
                                    return addImage("img/index2/jcd_1.png", params, api, dataTemp);
                                } else if (dataTemp[params.dataIndex].num > 50  &&  dataTemp[params.dataIndex].num <= 100) {
                                    return addImage("img/index2/jcd_2.png", params, api, dataTemp)
                                } else if (dataTemp[params.dataIndex].num > 100  &&  dataTemp[params.dataIndex].num <= 150) {
                                    return addImage("img/index2/jcd_3.png", params, api, dataTemp)
                                } else if (dataTemp[params.dataIndex].num > 150  &&  dataTemp[params.dataIndex].num <= 200) {
                                    return addImage("img/index2/jcd_4.png", params, api, dataTemp)
                                } else if (dataTemp[params.dataIndex].num > 200  &&  dataTemp[params.dataIndex].num <= 250) {
                                    return addImage("img/index2/jcd_5.png", params, api, dataTemp)
                                } else {
                                    return addImage("img/index2/jcd_6.png", params, api, dataTemp)
                                }
                            },
                            data: dataTemp
                           
                        }
                    ]
                };
                myChart.setOption(option);
});
        </script>
	</body>
	
</html>

在这里插入图片描述

echarts柱状图顶部添加图片 最近有个需求,在特定柱状图顶部要求展示图片,搜了下关于这方面的文章比较少,来记录下。 series:[ ... markPoint:{ symbol:'image://url',//url替换成你的图片地址 symbolSize:10,//图片大小 symbolOffset:[20,-20],//图片相对于x,y轴偏移量 data:[{ coord:[0,8000]//需要展示图片的柱型索引,y轴的va. 阅读详情

相关推荐

ECharts 的Base64图片后台解析

最近做了项目的报表使用到了百度的echarts,后来新的需求又来了,要求该报表图片实现邮件发送。也就是说报表图片能够被邮件发送。 实际上其他问题都没什么,最重要的就是怎么将前台的图片信息发送到后台,并且能够在后台能够使用Java进行解析。 在网上找了一些,但是并没找到完美的解决方案【可能是没找全吧!“勿喷”】。 以下是我的解决方案,希望能够解决你的问题。 前台: 首先在js中定义一个全局

踏歌行的专栏 2万+

在echarts中圆环图中间 自定义图片引入

首先 打开echarts官网实例 https://www.echartsjs.com/examples/zh/editor.html?c=pie-doughnut 其次复制代码 app.title = '环形图'; option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}...

小程子的博客 7933

6 赫斯曼网管软件industrial hivision用户管理

文章目录前言一、打开Industrial HiVision服务器二、在用户管理界面添加策略三、使用可选策略四、接受策略总结 前言 安装 Industrial HiVision 后,所有人都能广泛使用程序。安全起见,请进行相 关配置,对访问权限进行限制。 本文主要介绍用户管理基于某种角色模型。在访问角色中定义角色名称,通过分配访问权限给这些角色分配角色功能。例如,给管理人员自然要分配可用的权限,而观察员尽管可以登录,但没有能够进行更改的权限。Industrial HiVision 提供以下访问角色: 

t98746194的博客 1381

Echarts -- graphic 实现自定义图片/文字

1.graphic 组件相关配置参考:ECharts图形元素组件(graphic)_w3cschool 2. graphic 是与 series 同级别的对象,参考如下: series: [{ // ...... }], graphic: [{ type: 'group',// 组(可以包含图形、文字、图片) left: 0, top: 'bottom', children: [{ type: 'rect', ..

Le_12345679的博客 9222

压电传感器信号放大难题?用运放设计电荷放大器的5个关键步骤

本文详细解析了压电传感器信号放大难题,并提供了用运放设计电荷放大器的5个关键步骤。从电压放大到电荷放大的范式转换,到运放选型、反馈网络设计、PCB布局及频响特性验证,帮助工程师解决工业自动化中的信号衰减问题,提升测量精度和稳定性。

weixin_27303545的博客 450

Autodesk全家桶安装总报错1603?一个服务设置搞定3dsMax和CAD安装回滚问题

本文详细解析了Autodesk全家桶安装过程中常见的1603错误,特别是3ds Max和CAD安装回滚问题。通过调整AdskLicensingService服务的账户权限,提供四步修复法和安装流程优化策略,帮助用户彻底解决安装难题,提升Autodesk软件的安装成功率。

weixin_30955617的博客 1123

echarts图表实现图片的展示

需求二,在series插入图片展示:同理也是利用formatter与rich富文本实现。1,需求一,在坐标轴上插入图片展示:利用formatter与rich富文本实现。

m0_57005111的博客 1888

Rockchip MPP解码H264实战:从文件到YUV的完整流程解析

本文详细解析了在Rockchip平台上使用MPP(Media Process Platform)硬件解码H264视频文件并输出YUV数据的完整流程。通过实战代码示例,深入讲解了MPP解码器的初始化、数据包投递、非阻塞模式下的双循环控制以及YUV帧的提取与保存等核心步骤,并提供了环境搭建、编译运行和常见问题排查指南,帮助开发者高效利用硬件加速进行视频处理。

life6的博客 479

Echarts 根据data里面的type 使用rich自定义富文本的backgroundColor里面的image

【代码】Echarts 根据data里面的type 使用rich自定义富文本的backgroundColor里面的image。

qq_59625204的博客 1123

先进封装技术 Part03---重布线层(RDL)的科普

RDL是一种在芯片封装过程中用于重新分布电气连接的技术。它通过在芯片表面或中介层上形成额外的布线层,重新分配芯片的I/O(输入/输出)位置,以适应不同的封装需求和提高电气连接的灵活性。

阿拉伯梳子的专栏 4707

【STM32学习】(29)STM32实现595驱动三个数码管(标准库和HAL库实现)

我选用的单片机型号为:STM32F103系列 74LS595是一个串转并行输出的芯片,它能为单片机节省很多的IO口,应用场景广泛。 现要求三个数码管动态显示,常规设计都是并行实现,需要8个IO数据口,然后还需要3个IO片选数码管接口,这样大大占用了IO口,导致连接的外设变少。因此我们引入74LS595芯片。电路设计如下: 只需要三个共阴极数码管与三个595芯片级联即可完成,通过RCLK,SCK,SER三个IO即可完成对数码管的动态控制并显示。电路焊接的实物图如下: 要求完成功能:实现数.

XiaoCaiDaYong的博客 8265

echarts3D地图:旋转、添加纹理图片(vue3)

首先安装echarts和echarts-gl依赖,注意的是,echarts-gl版本安装低版本。跟echarts图表一般的使用和配置差不多,就series中type: 'map3D'以及给地图命名map: name。效果如图:(旋转效果自行运行查看)

weixin_66549669的博客 2593

6.6kW的车载充电器(On-Board Charger, OBC)电路分析

图片展示了6.6kW的车载充电器(On-Board Charger, OBC)电路,其中包含双向和单向两种拓扑结构。接下来我们将深入分析每个模块的设计、原理及其优势,以帮助理解不同结构在实际应用中的选型和应用。

weixin_43199439的博客 5674

echarts利用graphic属性给饼图添加内圈图片及外圈图片(可自适应宽度位于饼图中心)

echarts利用graphic属性给饼图添加内圈图片及外圈图片(可自适应宽度位于饼图中心) 给图表添加自定义文字 给图表添加自定义图片

苦瓜_小学生的博客 5840

【读论文】ASR大模型动态热词新方案

大型语言模型(LLMs)以其卓越的通用知识和推理能力重塑了 AI 领域,但它们在处理特定领域或用户的专有词汇(即“热词”)时,往往表现出“选择性失忆”。传统的 RAG 或 Prompting 方案在实时性和准确性上存在瓶颈。阿里的《Hotword Model for Large Models》论文提出了一种“神经插件”方案,它能够在不修改基座模型权重的前提下,动态、精准地将热词能力注入到生成过程中。本文将从架构设计、训练范式到推理逻辑,全方位拆解这一技术的内核,并探讨其在工业级应用中的价值。

kakaZhui的博客 295

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

Echarts图表中设置背景图片

Echarts 图表中设置背景图片 在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片。 graphic配置项: https://echarts.apache.org/zh/option.html#graphic,如下图所示: 在Echarts的实例中,找到一个实例(这里是折线图)https://echarts.apache.org/examples/zh/editor.html?c=line-simpl

筱竹的博客 1万+

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

使用freemarker将echarts图片保存到word中

使用freemarker将echarts图片保存到word中 在某已领域的业务中,经常需要对一类数据进行统计,生成echarts图表并且附带相应的描述材料导出: 将echarts保存到本地 java读取图片进行base64编码 制作freemarker模板 填充freemarker模板 下载word 将echarts保存到本地 使用js发送相应的请求: ...

gogo3485的博客 3228

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

echarts 中 symbol 自定义图片

首先我使用的技术框架的VUE,当然该方法在其他框架也是适用的,这点大家注意一下~ 在官方文档里面,修改标记的图形(symbol)的方法有三种: 一:ECharts 提供的标记类型有'circle','rect','roundRect','triangle','diamond','pin','arrow','none';例:symbol: 'pin' 二:可以通过'image...

weixin_30883311的博客 1万+

echarts地图添加背景图片

北京地图为例,需注意背景图片大小为700*700(与div大小一致),同时做背景图片时zoom设置为1来截图与图片重合,随后就可以任意调整zoom的值了。

xiaoxiangrikui的博客 638

echarts 地图九状线显示钓鱼岛系列 (1) 之 3.0 与2.0区别

由于echarts 3.0 和2.0版本不一样, 下文将分别介绍。 (vue项目,可以参考 echarts 地图九状线显示钓鱼岛(续-vue项目) echarts地图需要按数据值大小,显示区域颜色的深浅,或获取数据值、气泡显示的话,一定要将json文件中省份的名称对应接口的字段名,如 json文件中为:香港、台湾、青海、北京,而接口返回的为:香港特别行政区、台湾省、青海省、北京市...

Shimeng_1989的博客 2340

echarts 中添加图片/图标

【代码】echarts 中添加图片/图标。

szzlh123456789的博客 690

【生成PDF】【JAVA】纯后台生成Echarts图片,并将图片生成到PDF文档

本次任务:要求不经过web页面,Java如何生成含有Echarts图的PDF

qq_41773784的博客 1万+

echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮

echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮   &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&amp

weixin_33971130的博客 2782

echarts自定义拐点图片

效果 代码: html //注意一定要写宽高 <div id="main1" style="width:500px;height:260px"></div> //获取曲线图(循环多个) function GetLine() { var img = "https://www.easyicon.net/api/resizeApi.php?id=1236453&size=32"; //第一种方法:在data里面写,自定义每个数据的拐点图片比如 { value:

Web_Notes的博客 2007

将echarts图表导出图片

将页面中的echarts图标导出png echarts官网中有个 getDataURL方法 可以返回一个base64的URL let myChart = this.echarts.init(document.getElementById('large_chart')); const picInfo = myChart.getDataURL({ // 导出的格式,可选 png, jpg, svg // 注意:png, jpg 只有在 canvas 渲染器的时候可使用,svg 只...

workhard0905的博客 7444

如何给echarts图表添加下载图表成图片的功能

如何给echarts图表添加下载图表成图片的功能 1、先打开一个现成的图表效果图,注意图中圈出的地方,如图 2、打开源码找到option,如下: var chart2 = echarts.init(document.getElementById('chart2')); var chart2_option = { tooltip: { trigger: 'axis' }, legend: {

徊忆羽菲 4610
上一篇: java拦截器处理过滤对象中属性的特殊字符
下一篇: 文件图片远程url上传之ajax 加 body 参数传递
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值