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;
                },
相关文章
|
2月前
|
前端开发 算法 数据可视化
怎么在echarts图上左右滑动切换数据区间
怎么在echarts图上左右滑动切换数据区间
58 0
|
2月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
51 0
|
2月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
64 2
|
3天前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
10 0
|
1天前
|
新零售 分布式计算 数据可视化
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
|
1天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
11 0
|
9天前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
20 0
|
3月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
160 2
react+datav+echarts实现可视化数据大屏
|
4月前
|
JavaScript
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
182 0
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案