React Native 中Echarts 饼图不渲染原因剖析

React Native 中Echarts 饼图不渲染原因剖析

正常来说，导致Echarts 图表不渲染的原因有以下几个：

（1）图表的data数据源不正确（无论是legend.data还是series.data的值，比如series数组里有一些值是null）

（2）图表的legend数组长度与series数组长度不一致

（3）图表的配置项不正确，如下配置是正确的：

const chartOption = {

      tooltip: {

        trigger: 'item',

        confine: true,

        formatter: '{b} : {c} ({d}%)',

        backgroundColor: 'rgba(0, 0, 0, .7)',

        textStyle: {

          fontSize: 12,

        },

      },

      legend: {

        left: '30%',

        top: 'center',

        orient: 'vertical',

        data: legend,

        itemGap: 8,

        itemWidth: 4, // 设置宽度

        itemHeight: 4, // 设置高度

        textStyle: {

          fontSize: 12,

          color: OAColor.lightText

        },

      },

      series: {

        name: '拜访统计',

        type: 'pie',

        radius: ['18%', '45%'],

        center: ['17%', '37%'],

        avoidLabelOverlap: false,

        data: seriesData,

        label: {

          normal: {

            show: false,

            position: 'center'

          },

        },

        labelLine: {

          normal: {

            show: false

          }

        },

      }

    };

（4）没有给图表一个高度和宽度（例如：flex: 1， width: '100%'）

（5）图表库版本bug

下面举一个博主真实遇到且坑了我2天半的例子：

首页饼图：

错误❌代码：

// 渲染图表_renderChart = () => {let { chartData, total } = this.state;const seriesData = chartData.map((item, index) => {if (index < 5) {if (!item.name) item.name = '其他'return {name: item.name,value: unt,} // 问题就出在这里，使用map函数，并且if限制在5条记录以内，多余的统计归为‘其他’// 由于数组chartData的长度length是大于5的，因此超出5以外的都会返回null，// 这就直接导致了数据异常，图表无法渲染出来}});let legend = chartData.map(item => item.name);let otherTotal = 0;chartData.forEach((item, index) => {if (index >= 5)otherTotal += unt;});if (chartData.length > 5) {seriesData.push({ name: '其他', value: otherTotal })};const chartOption = {tooltip: {trigger: 'item',confine: true,formatter: '{b} : {c} ({d}%)',backgroundColor: 'rgba(0, 0, 0, .7)',textStyle: {fontSize: 12,},},legend: {left: '30%',top: 'center',orient: 'vertical',data: legend,itemGap: 8,itemWidth: 4, // 设置宽度itemHeight: 4, // 设置高度textStyle: {fontSize: 12,color: OAColor.lightText},},series: {name: '拜访统计',type: 'pie',radius: ['18%', '45%'],center: ['17%', '37%'],avoidLabelOverlap: false,data: seriesData,label: {normal: {show: false,position: 'center'},},labelLine: {normal: {show: false}},}};return <View style={styles.pieContainer}><Charts cellType='pie' chartOption={chartOption} chartHeight={150} /><View style={{ flexDirection: 'row', position: 'absolute', right: '13%' }}><View style={{ flexDirection: 'column', paddingRight: 20 }}>{chartData ? chartData.map((item, index) => {if (index < 5)return <Text key={index} style={styles.vcount}>{unt}</Text>else if (index == 5)return <Text key={index} style={styles.vcount}>{otherTotal}</Text>}) : null}</View><View style={{ flexDirection: 'column' }}>{chartData ? chartData.map((item, index) => {if (index < 5)return <Text key={index} style={styles.vcount}>{this._unt, total)}</Text>else if (index == 5)return <Text key={index} style={styles.vcount}>{this._computeRate(otherTotal, total)}</Text>}) : null}</View></View></View>};

正确✅代码： 

// 渲染图表_renderChart = () => {let { chartData, total } = this.state;const arr = [];chartData.forEach((item, index) => {if (index < 5) {if (!item.name) item.name = '其他'arr.push({name: item.name,value: unt,})}});const seriesData = arr;let legend = chartData.map(item => item.name);let otherTotal = 0;chartData.forEach((item, index) => {if (index >= 5)otherTotal += unt;});if (chartData.length > 5) {seriesData.push({ name: '其他', value: otherTotal })};const chartOption = {tooltip: {trigger: 'item',confine: true,formatter: '{b} : {c} ({d}%)',backgroundColor: 'rgba(0, 0, 0, .7)',textStyle: {fontSize: 12,},},legend: {left: '30%',top: 'center',orient: 'vertical',data: legend,itemGap: 8,itemWidth: 4, // 设置宽度itemHeight: 4, // 设置高度textStyle: {fontSize: 12,color: OAColor.lightText},},series: {name: '拜访统计',type: 'pie',radius: ['18%', '45%'],center: ['17%', '37%'],avoidLabelOverlap: false,data: seriesData,label: {normal: {show: false,position: 'center'},},labelLine: {normal: {show: false}},}};return <View style={styles.pieContainer}><Charts cellType='pie' chartOption={chartOption} chartHeight={150} /><View style={{ flexDirection: 'row', position: 'absolute', right: '13%' }}><View style={{ flexDirection: 'column', paddingRight: 20 }}>{chartData ? chartData.map((item, index) => {if (index < 5)return <Text key={index} style={styles.vcount}>{unt}</Text>else if (index == 5)return <Text key={index} style={styles.vcount}>{otherTotal}</Text>}) : null}</View><View style={{ flexDirection: 'column' }}>{chartData ? chartData.map((item, index) => {if (index < 5)return <Text key={index} style={styles.vcount}>{this._unt, total)}</Text>else if (index == 5)return <Text key={index} style={styles.vcount}>{this._computeRate(otherTotal, total)}</Text>}) : null}</View></View></View>};