react native echarts图表

react native 圆环型和圆柱形图表

代码如下

import Echarts from "native-echarts";

 <Echarts option={this.state.optionArr}/>
//圆环形
 let optionArr1 = {
          tooltip: {
            trigger: 'item',
          },
          grid: {
            left: 5,
            containLabel: true,
          },
          color: ['#31B5FF', '#31CCB3', '#9F7BFF', '#1873F2'],
          legend: {
            top: 'center',
            left: '30%',
            orient: "vertical",
            itemWidth: 10,
            itemHeight: 10,
            formatter: (name) => {
              data.find((item) => {
                return item.name == name
              }).value
              let arr = ['{a|' + name + '}' + '{b|' + data.find((item) => {
                return item.name == name
              }).value + '}']
              // //此处的a,b,c是textStyle里面配置的a,b,c,d可以自定义
              return arr.join('')
            },
            textStyle: {//图例文字的样式
              rich: {
                b: {
                  fontSize: 14,
                  color: '#0F2646',
                  fontWeight: 'bold'
                },
                a: {
                  width: 30,
                  right: 0,
                  fontSize: 14,
                  color: '#0F2646',
                },
              }
            },
          },
          series: [{
            name: '',
            type: 'pie',
            right: '40%',
            radius: ['40%', '28%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            center: ['40%', '20%'],
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data,
            itemStyle: {
              borderWidth: 5, //设置border的宽度有多大
            },
          }],
        };
  //圆柱形
 let option = {
          grid: {
            left: '3%',
            right: '4%',
            top: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: xArr,
            axisLabel: {
              interval: 0,//横轴信息全部显示
              rotate: -20,// -20度角倾斜显示
            },
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true // 不显示网格线
            },
            axisLabel: {
              interval: 0,//横轴信息全部显示
              show: true,
              // rotate:-20,// -20度角倾斜显示
            },
          },
          series: [{
            type: 'bar',
            data: yArr,
            barWidth: '25%',
            // color: '#3CCEF9',
            showLine: true,
            label: {
              show: true,
              position: 'top',
            },
            itemStyle: {
              normal: {
                // 柱状图：圆角矩形
                // 方向：左上、右上、右下、左下
                barBorderRadius: [15, 15, 0, 0],
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {offset: 0, color: '#657BC3'}, // 0% 处的颜色
                    {offset: 0.5, color: '#3598FD'}, // 50% 处的颜色
                    {offset: 1, color: '#3598FD'}, // 100% 处的颜色
                  ],
                  global: false // 缺省为 false
                },
              },
            },
          }],
        };

效果图