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

1.修改图例

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

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

 import * as echarts from 'echarts'; //引入echarts
  export default {
    mounted() {
      this.opt()
    },
    methods: {
      opt() { 
        const option = {
            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)
          const mychart = 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)
                        return name
                    },
                },

1.4在看下浏览器打印效果

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

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

1.6在看下页面实际效果

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)
                                return data.name
                            }
                        },
                    }
                ]

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

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

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

2.4 看下实际的效果

拜拜!!

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

——香蕉麻花皮

原文地址:https://blog.csdn.net/m0_58002043/article/details/131413212

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_29204.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注