React + Echarts 绘制移动端步数统计图

设计来源：www.zcool.com.cn/work/ZNTk4M…

安装命令

yarn add echarts echarts-for-react 

或者

npm install --save echarts echarts-for-react

初始使用

import React from 'react';
import ReactEcharts from 'echarts-for-react';
import './index.css'

export default class Line extends React.Component {
  getOption = () => {
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };
    return option
  }

  render() {
    return (
      <div className='wrapper'>
        <ReactEcharts option={this.getOption()} style={{ height: '400px' }} />
      </div>
    )
  }
}

1. 改变柱状图颜色

let option = {
  color: ['#8c65f1'],
};

2. 隐藏 x 轴和 y 轴的刻度线

xAxis: {
  type: 'category',
  // 隐藏x轴
  axisLine: {
    show: false,
  },
  // 刻度线
  axisTick: {
    show: false
  },
  axisLabel: {
    show: false
  },
},
yAxis: {
  type: 'value',
  // 去除网格线
  splitLine: false,
  // 刻度线
  axisTick: {
    show: false
  },
  // 隐藏y轴
  axisLine: {
    show: false
  },
  // 隐藏刻度值
  axisLabel: {
    show: false
  },
},

3. 圆角

series: [
  {
    itemStyle: {
      normal: {
        barBorderRadius: [20, 20, 20, 20]
      }
    },
  }
]

到此，柱状图部分，就完成啦啦啦啦啦啦啦

现在绘制上面的爱心，设计图是静态，不过我们可以让它动起来。

<div className="box left"></div>
<div className="box center"></div>
<div className="box right"></div>

三个部分

.box {
  width: 20px;
  height: 20px;
  background-color: #d5093c;
  box-shadow: 0 0 70px #d5093c;
  animation: sport 1s infinite;
}

.left {
  border-radius: 100px;
  position: absolute;
  top: 20px;
  left: 23px;
}

.right {
  border-radius: 100px;
  position: absolute;
  top: 20px;
  left: 35px;
}

.center {
  transform: rotate(45deg);
  position: absolute;
  top: 26px;
  left: 29px;
}

@keyframes sport {
  0% {
    transform: scale(1) rotate(45deg);
  }

  50% {
    transform: scale(1.1) rotate(45deg);
  }

  100% {
    transform: scale(1) rotate(45deg);
  }
}

搞定