最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ReactJS的ReactJS-AdminLTE中添加ECharts

ReactJS crifan 3136浏览 0评论

之前已经:

【已解决】使用react-hot-boilerplate去集成ReactJS-AdminLTE

虽然有点其他不完美,但是是可以正常调试了。

现在去尝试把ECharts集成到ReactJS-AdminLTE中

react js echarts

hustcc/echarts-for-react: baidu Echarts(v3.0) components for React wrapper. 一个简单的 echarts(v3.0) 的 react 封装。

luqin/react-echarts: React ECharts

echarts-for-react

react中使用echarts就这么简单 – 前端架构经验分享 – SegmentFault

一个简单的 echarts react 封装——echarts-for-react – CNode技术社区

在react中使用echarts · jingchenxu-s-blog

Scatterplot example using React + ECharts

reactjs+echarts实现绘图 – 那些年写过的代码 – CSDN博客

➜  react-hot-boilerplate git:(master) ✗ npm install –save echarts-for-react
npm WARN [email protected] requires a peer of react@^15.6.1 but none was installed.
added 4 packages in 7.937s

代码:

  getOption() {
    const option = {
      title: {
        text: ‘ECharts入门示例:饼图’
      },
      tooltip: {},
      legend: {
        data:[‘销量’]
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: ‘销量’,
        type: ‘bar’,
        data: [100,20,30,12,7,208]
      }]
    };
    return option;
  }
          <section className="content">
            <ReactEcharts
              option={this.getOption()}
              style={{height: ‘350px’, width: ‘100%’}}  
              className=’react_for_echarts’ />
          </section>

效果:

然后再去试试,实现类似于这种的效果:

多层饼图

多层圆环的饼图

echarts 多层饼图

ECharts · Example

ECharts 3.0 Examples

-》

http://echarts.baidu.com/examples.html#chart-type-pie

嵌套环形图

然后去找到官网的参数的文档:

ECharts Documentation

然后想办法去添加css去控制样式,结果:

【已解决】ReactJS中css不起效果

【已解决】ECharts如何实现饼图中只有一个百分比的数字的时候居中显示且tooltip和其他环不一样

【总结】

目前已经实现了ReactJS-AdminLTE中添加ECharts的多层饼图==嵌套环形图了:

先去安装ECharts:

npm install –save echarts-for-react

代码:

import ReactEcharts from ‘echarts-for-react’;
//import ‘./app.css’;
export default class App extends Component {
  getProspectOption() {
    const option = {
      title: {
        text: ‘有望监控:本月新增有望客户目标完成进度’,
        // text: ‘有望客户’,
        // textAlign: ‘left’,
        // textAlign: ‘center’,
        // textAlign: ‘right’,
        // textBaseline: ‘middle’,
        // padding: 1,
        // left: 10,
        textStyle: {
          color: ‘red’
        }
      },
      tooltip: {
        trigger: ‘item’,
        formatter: ‘{a} <br/>{b}: {c}<br/>百分比:{d}%’
      },
      // legend: {
      //   orient: ‘vertical’,
      //   x: ‘left’,
      //   data:[‘差值’, ‘DCC’,’电话’,’进店’,’外拓’,’二级网点’]
      // },
      series: [
        {
          name:’43%’,
          type:’pie’,
          selectedMode: ‘single’,
          radius: [‘0%’, ‘20%’],
          // labelLine :{show:true},
          label: {
            normal: {
              position: ‘center’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{a}’,
              textStyle: {
                color: ‘#000000’,
                fontSize: 24
              }
            },
            emphasis:{
              position: ‘center’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{a}’,
              textStyle: {
                color: ‘#000000’,
                fontSize: 24
              }              
            }
          },
          itemStyle: {
            normal: {
              color: ‘#ECF0F5’             
            }
          },
          data:[
            {
              value: 83/200,
              name:’新增百分比’
              // selected:true
            }
          ]
        },
        {
          name:’访问来源’,
          type:’pie’,
          selectedMode: ‘single’,
          radius: [‘20%’, ‘50%’],
          label: {
            normal: {
              position: ‘inner’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{b} {c}’
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data:[
            // {value:113, name:’缺口’, selected:true},
            {value:113, name:’缺口’},
            {value:87, name:’新增数’}
          ]
        },
        {
          name:’访问来源’,
          type:’pie’,
          radius: [‘58%’, ‘70%’],
          label: {
            normal: {
              // position: ‘inner’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{b} {c}’
            }
          },
          labelLine : {
            normal : {
              length : 10,
              length2 : 15
            }
          },
          data:[
            {value:113, name:’差值’},
            {value:17, name:’DCC’},
            {value:16, name:’电话’},
            {value:30, name:’进店’},
            {value:23, name:’外拓’},
            {value:1, name:’二级网点’}
          ]
        }
      ]
    };
    return option;
  }
  render() {
    return (
      <div className="wrapper">
        <HeaderBar />
        <NavigationMenu />
        <div className="content-wrapper">
          …
          <section className="content">
            {/* <div className={style.prospect_object}>有望监控:本月新增有望客户目标完成进度</div> */}
            {/* <div className="prospect_object">有望监控:本月新增有望客户目标完成进度</div> */}
            <ReactEcharts
              option={this.getProspectOption()}
              style={{height: ‘350px’, width: ‘100%’}}
              className=’react_for_echarts’ />
          </section>
  
        </div>

效果:

注:

其中此处的option中的title的配置有bug:

text都没有显示完整,

且如果设置textAlign为center,显示出来的内容更少

-》感觉是左边内容被挡住了很多。抽空再去看看如何规避这个bug。

说明:

1.关于echart的更多option的示例代码,可以参考官网:

ECharts Examples

-》点击进去后,可以进入对应的示例,比如:

嵌套环形图的

2.关于具体参数的含义,可以参考官网文档:

ECharts Documentation

【未解决】ReactJS中echarts-for-react的饼图的标题文字显示不全

转载请注明:在路上 » 【已解决】ReactJS的ReactJS-AdminLTE中添加ECharts

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.185 seconds, using 22.17MB memory