Echarts饼状图遇到的问题

最新推荐文章于 2025-02-24 14:42:44 发布

110susie

最新推荐文章于 2025-02-24 14:42:44 发布

阅读量2.4k

点赞数

分类专栏： ECHart

本文链接：https://blog.youkuaiyun.com/qq_43127471/article/details/109601118

版权

ECHart 专栏收录该内容

2 篇文章

订阅专栏

1.在react-native-secharts中formatter不换行
echarts官方文档的series[i]-pie.label.normal.formatter说明中这样说道（标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行），但是在某种特定情况下仍然不能换行，这时需要使用\nn进行换行或者

进行格式化后数据换行
在这里插入图片描述

2.使用\nn换行后数据不居中
需要在series下声明avoidLabelOverlap: false，即：

series: [
    {
         ...
          avoidLabelOverlap: false,
         ...
    }
]

3、不需要高亮,隐藏鼠标悬浮高亮效果

series: [
    {
         ...
         hoverAnimation:false,//鼠标悬浮是否有区域弹出动画，false:无  true:有
         ...
    }
]

4、formatter用法
首先ECharts官网API提供了一些formatter格式化参数模板：

字符串模板

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。在 trigger 为’axis’ 的时候，会有多个系列的数据，此时可以通过{a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。不同图表类型下的{a}，{b}，{c}，{d}含义不一样。其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

u 折线（区域）图、柱状（条形）图、K线图: {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

u 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

u 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

u 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

回调函数

回调函数格式：(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
在这里插入图片描述

ECharts图表组件内的格式化常用的地方：

tooltip

图表内数据点的悬浮框提示框信息展现的时候我们可以加以数据格式化，以便于更好地观察数据和分析数据。
在这里插入图片描述
2. axisLabel

坐标轴刻度上面的刻度格式化，比如Y表示长度，我们往往需要在每一个刻度值后面带上“m”的单位，Y轴意义不同，加不同的单位。
在这里插入图片描述

series内的label

例子

 pieEchart(){
        let {data}=this.state;
        let  option1;
        option1 = {
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '80%'],
                    avoidLabelOverlap: false,
                    hoverAnimation:false,
                    label: {
                        show: true,
                        textStyle: {
                            fontSize: dp(24),
                            color: "#727C87"
                        },
                        formatter: // "{b} : {c} ({d}%)",
                        //"{d}%\\nn{b}"
                            function (params,index){
                               var str =params.percent + '%'+'\nn'+params.name;
                                return str;
                        }
                    },
                    labelLine: {
                        show: true,
                    },
                    data: data,
                    color:['#EEC54E','#FF6180','#00B7F4','#8C83EC'],  //手动设置每个图例的颜色
                }
            ]
        };
        return(
            <View style={{flex:1,borderRadius:dp(20),backgroundColor:"#fff",paddingTop:dp(20)}}>
                {/*<Text>设备监控页面22</Text>*/}
                <Echarts option={option1} height={dp(540)}/>
            </View>
        )
    }
    ```
效果：

在这里插入图片描述