Echarts组件legend属性显示数据和icon图片自定义的解决方案

简介: Echarts组件legend属性显示数据和icon图片自定义的解决方案

20200302105542946.png


项目需求:

1、自定义icon图片样式;

2、相关数值直接显示;

解决方案:

自定义icon图片样式

data: ['家电', '服装', '数码'],

转为:

 data: [{name:'家电',icon:'image://lockdatav1.png'},
  {name:'服装',icon:'image://lockdatav2.png'},
   {name:'数码',icon:'image://lockdatav3.png'},
  ],

相关数值直接显示

                formatter: function (name) {
                    var index = 0;
                    var labels = ['家电', '服装', '数码'];
                    var counts = [123,234,345];
                    labels.forEach(function (value, i) {
                        if (value == name) {
                            index = i;
                        }
                    });
                    return counts[index] + "万元\n" + name;
                },
相关文章
Echarts 热力图自定义开发
Echarts 热力图自定义开发
1081 0
|
资源调度 JavaScript API
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
这篇文章介绍了如何在vue-element-admin项目中引入并封装ECharts组件,以及如何实现折线图、柱状图和饼图的展示。
1134 4
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
609 0
|
UED
使echarts图例legend只选中一个(selectedMode)
本文介绍了如何在ECharts图表中设置图例(legend)的选中模式为单选('single'),以确保在有多个图例时,用户只能选择一个图例项进行展示,从而提升图表的可读性和用户体验。
1334 1
使echarts图例legend只选中一个(selectedMode)
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
1747 2
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
1096 1
|
算法 搜索推荐 Java
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
这篇文章介绍了如何使用Java后端技术,结合Graphics2D和Echarts等工具,生成包含个性化信息和图表的海报,并提供了详细的代码实现和GitHub项目链接。
726 0
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
Echarts visualMap属性记录
这篇文章是关于ECharts中visualMap属性的详细记录。文中首先定义了visualMap的作用,即进行数据到视觉元素的映射。接着,通过一系列详细的配置参数,如类型、显示控制、数据范围、样式和格式化工具等,介绍了如何配置连续型和分段型visualMap组件。最后,作者通过具体代码示例,说明了如何将这些配置应用于实际的ECharts图表中,以实现数据的视觉编码效果。
1060 0
Echarts visualMap属性记录
|
Web App开发 数据可视化 前端开发
这就是第一张ECharts图片效果!
这就是第一张ECharts图片效果!
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
855 0
 ECharts 雷达图案例001-自定义节点动画