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;
                },
相关文章
|
6月前
Echarts 热力图自定义开发
Echarts 热力图自定义开发
258 0
|
1月前
|
资源调度 JavaScript API
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
这篇文章介绍了如何在vue-element-admin项目中引入并封装ECharts组件,以及如何实现折线图、柱状图和饼图的展示。
78 4
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
|
1月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
54 2
|
1月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
51 1
|
2月前
|
UED
使echarts图例legend只选中一个(selectedMode)
本文介绍了如何在ECharts图表中设置图例(legend)的选中模式为单选('single'),以确保在有多个图例时,用户只能选择一个图例项进行展示,从而提升图表的可读性和用户体验。
326 1
使echarts图例legend只选中一个(selectedMode)
|
6月前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
111 0
|
5月前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
198 0
 ECharts 雷达图案例001-自定义节点动画
|
5月前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
5月前
|
JSON JavaScript 定位技术
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
|
6月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
674 0