ECharts in React

[wusb]

ECharts是众所周知的一个百度出品的数据可视化图形框架，前两周在跟阿里健康合作的项目体重曲线正好有用到，借助ECharts的定制化开发，可高度还原产品及设计要求。

跟直接引用ECharts不同的是，我们可以NPM安装好后，按需引入：

1.安装ECharts

yarn add echarts --dev

2.引入需要的模块

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';

​ 这个模块只需要绘制曲线图，所以只引入折线图，这样打包的时候可以节省空间。

3.定义好绘制体重曲线的函数

drawWeightTrend(data){
    let xAxisDate = data.map((item)=>{
      return item.record_on;
    });
    let yAxisDate = data.map((item)=>{
      return item.weight;
    });

    xAxisDate = xAxisDate.reverse().slice(-7);
    yAxisDate = yAxisDate.reverse().slice(-7);

    let weightTrend = echarts.init(document.getElementById('weightTrend'));
    weightTrend.setOption({
      grid:{
        left: 30,
        top: 20,
        right: 30,
        bottom: 20
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: xAxisDate,
        axisLine: {
          show: false
        },
        axisTick:{
          length: 0
        },
        axisLabel: {
          color: '#999'
        },
        splitLine: {
          lineStyle:{
            color: '#eee'
          }
        }
      }],
      yAxis: [{
        type: 'value',
        axisLine: {
          show: false
        },
        axisTick:{
          length: 0
        },
        axisLabel: {
          color: '#999'
        },
        splitLine: {
          lineStyle:{
            color: '#eee'
          }
        },
        min:25
      }],
      series: [{
        type: 'line',
        label: {
          normal:{
            show: true,
            color: '#3acfb9',
            borderColor: '#3acfb9'
          }
        },
        itemStyle: {
          normal:{
            color: '#3acfb9',
            borderWidth: 2,
          }
        },
        lineStyle: {
          normal: {
            color: '#3acfb9'
          }
        },
        areaStyle: {
          normal: {
            color: '#3acfb9',
            opacity: 0.4
          }
        },
        showAllSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        data: yAxisDate
      }]
    })
  }

函数的setOption配置跟其他使用方式一致，可参考ECharts官方文档，