前端图表库-bizcharts、echarts的小demo

bizcharts

饼图

1.设置饼图的颜色

设置<Interval />的color属性

<div className='reportCharts-line' onClick={
   this.waitDo.bind(this, '1407')} style={
   {
   cursor: 'pointer'}}>
  <div className='reportCharts-title'>待办</div>
  <div className='reportCharts-num'>{
   agentData?.total}</div>
  <Chart height={
   100} data={
   agentData?.ticketTypeCount || []}  autoFit >
    <Coordinate type="theta" radius={
   0.75} innerRadius={
   0.6}/>
    <Axis visible={
   false} />
    <Tooltip showTitle={
   false} />
    <Legend position='right' offsetX={
   -20}/>
    <Interval
      position="num"
      adjust="stack"
      // color="name"
      color={
   ['name', (xVal) => {
   
        if (xVal === '咨询单') {
   
          return '#FFB000';
        }else if(xVal === '需求单'){
   
          return '#44D6C9';
        }else if(xVal === '发布单'){
   
          return '#26C0DE';
        }else if(xVal === '用户系统权限申请单'){
   
          return '#1F90FF';
        }else if(xVal === 'DBA权限申请单'){
   
          return '#997B71';
        }else if(xVal === '培训申请单'){
   
          return '#71C922';
        }else if(xVal === '数据处理单'){
   
          return '#28D17C';
        }else if(xVal === '系统配置单'){
   
          return '#96A3FA';
        }else if(xVal === '资源申请单-马连道'){
   
          return '#B693FA';
        }else if(xVal === '资源申请单-华润云'){
   
          return '#FFA1A4';
        }else if(xVal === '统一资源回收'){
   
          return '#F26B0A';
        }else if(xVal === '任务分发'){
   
          return '#FFDB00';
        }
      }]}
      colorField='type'
      //  color={['blue','yellow','green']}
      style={
   {
   
        lineWidth: 1,
          stroke: '#fff',
      }}
      />
  </Chart>
</div>

2.设置Axis坐标轴的网格线

设置网格线为虚线：为axis设置 grid属性

renderGuide = () => {
   
    const {
    generalTot