echarts饼装图自定义图例和扇形区的文字

简介: 最近因为工作需要,需要开发一个大屏,后台给的数据是这个的,echarts是默认将数据data例的name属性作为图例和扇形图上展示文本,这里我需要自定义图例信息和内容,通过这篇文章,记录下如何修改这些内容,基于js和vue2,datav

最近因为工作需要,需要开发一个大屏,后台给的数据是这个的,echarts是默认将数据data例的name属性作为图例和扇形图上展示文本,这里我需要自定义图例信息和内容,通过这篇文章,记录下如何修改这些内容,基于js和vue2,datav


1.修改图例

1.1先看下页面渲染出来的结果

image.png

1.2,在看下实际代码,这里直接抄官方的代码了,为了省事

import*asechartsfrom'echarts'; //引入echartsexportdefault {
mounted() {
this.opt()
    },
methods: {
opt() { 
constoption= {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'            },
tooltip: {
trigger: 'item'            },
legend: {
orient: 'vertical',
left: 'left'            },
series: [
              {
name: 'Access From',
type: 'pie',
radius: '50%',
data: [  //图列和内容显示的都市name的值                  { value: 1048, name: '湖南' },
                  { value: 735, name: '上海' },
                  { value: 580, name: '北京' },
                  { value: 484, name: '天津' },
                  { value: 300, name: '河南' }
                ],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'                  }
                }
              }
            ]
        };
this.$nextTick(()=>{
console.log(this.$refs.oil_meter)
constmychart=echarts.init(this.$refs.oil_meter)
mychart.setOption(option)
        })
      }
    },
  }

1.3 对于一般的业务来说,这种用法也足够了,但是,有个特殊的需求,就是,我需要在图例中给湖南后面加上--美好地方,这时候,直接用官方的可能就不行了,这里就需要我们对配置项进行修改,然后修改图例的内容,只修改图例,不修改图示。

,我们在echarts配置项里,找到legend属性,在属性的属性值里在添加一个formatter属性,这个属性的属性值是一个函数,函数接收一个参数,这个参数就是我们要在图例上渲染的内容,有多少内容这个函数就会执行多少次,这个函数必须得return,不然无法在页面上渲染。代码如下

legend: {
selectedMode: false,
show: true,
right: '4%',
itemWidth: 10,
itemHeight: 6,
top: '6%',
textStyle: {
color: '#fff',
                    },
formatter: function (name) {  //这段代码就是回去图例显示内容的关键console.log(name, 1)
returnname                    },
                },

1.4在看下浏览器打印的效果

image.png

1.5 这时候 我们是不是修改图例的内容了咧,在函数里判断,然后在根据不同的内容做出不同的return,代码如下

legend: {
orient: 'vertical',
left: 'left',
formatter: function (name) {
if(name=="湖南"){  //判断name是不是湖南,如果是湖南则返回我们拼接的内容,如果不是则正常返回即可return`${name}--是个美丽的地方`                        }
returnname                    },
            },

1.6在看下页面实际效果

image.png

2,自定义图示

2.1 第二个需求,就是将图示上的上海修改成  上海--是一个美丽的地方,

实现的步骤和图例答题一直,主要差别就是数据结构和处理函数放置的位置不同

首先看代码,我们先看下函数接收到的内容是上面

series: [
                    {
name: 'Access From',
type: 'pie',
radius: '50%',
data: [  //图列和内容显示的都是拿的name的值                            { value: 1048, name: '湖南' },
                            { value: 735, name: '上海' },
                            { value: 580, name: '北京' },
                            { value: 484, name: '天津' },
                            { value: 300, name: '河南' }
                        ],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'                            }
                        },
label: { //在series里添加label属性,属性值里添加formatter属性,属性值是个函数,函数值接收一个参数,这fontSize: 13,
formatter: function (data) { //这个参数是一个对象console.log(data)
returndata.name                            }
                        },
                    }
                ]

2.2 浏览器打印的内容,我们能看到,返回的是一个对象,对象里有个name属性,这个属性就是我们需要处理并渲染上的数据,这里也要注意下,这个函数也需要有return返回值,我们直接判断不同的name,然后返回不同的return的值。

image.png

2.3 上一步骤我们已经把思路理清了,这时候我们就可以直接操作了

label: { //在series里添加label属性,属性值里添加formatter属性,属性值是个函数,函数值接收一个参数,这fontSize: 13,
formatter: function (data) { //这个参数是一个对象if(data.name=="上海"){  //判断是否是上海,如果是,则return出一个拼接的数据return`${data.name}--是一个美丽的城市`                                }
returndata.name                            }
                        },

2.4 看下实际的效果

image.png



拜拜!!

重要的不是代码,而是开发思路!!

------香蕉麻花皮

相关文章
|
6月前
Echarts 热力图自定义开发
Echarts 热力图自定义开发
269 0
|
2月前
Echarts中横坐标文字显示不全
本文讨论了在ECharts中横坐标文字显示不全的问题,并通过设置`xAxis`的`axisLabel.interval`属性为`0`来解决。这样设置后,横坐标上的所有标签都会显示,而不会根据自动计算的间隔来显示部分标签。文章提供了问题的具体示例图片和解决方法,并附有官方文档链接。
76 4
Echarts中横坐标文字显示不全
|
1月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
68 2
|
2月前
|
UED
使echarts图例legend只选中一个(selectedMode)
本文介绍了如何在ECharts图表中设置图例(legend)的选中模式为单选('single'),以确保在有多个图例时,用户只能选择一个图例项进行展示,从而提升图表的可读性和用户体验。
360 1
使echarts图例legend只选中一个(selectedMode)
|
1月前
|
算法 搜索推荐 Java
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
这篇文章介绍了如何使用Java后端技术,结合Graphics2D和Echarts等工具,生成包含个性化信息和图表的海报,并提供了详细的代码实现和GitHub项目链接。
107 0
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
|
2月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
6月前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
118 0
|
5月前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
218 0
 ECharts 雷达图案例001-自定义节点动画
|
5月前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
5月前
|
JSON JavaScript 定位技术
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
下一篇
无影云桌面