react 中使用 echart（ReactEcharts和渐变色）

1、导入

import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts'; //渐变色

2、使用

<ReactEcharts option={option} style={{ width: '100%', height: '50%' }} />

3、option常用定义

const option = {
    // 图表周围空白边距（内边距）
    grid: {
        top: 40,
        bottom: 30,
        right: 0,
        left: 57,
    },
    // 鼠标移动至图表的提示框
    tooltip: {
        // 触发方式
        trigger: 'axis'
    },
    // x轴
    xAxis: {
        type: 'category',
        data: params.dataX,
        // 轴线
        axisLine: {
            lineStyle: {
                color: 'rgba(63, 163, 191, 0.49)',
            }
        },
        // 文本标签
        axisLabel: {
            color: 'rgba(194, 221, 248, 1)',
            fontSize: 16,
        },
        // 刻度线
        axisTick: {
            show: false,
        }
    },
    // y轴
    yAxis: {
        type: 'value',
        // 名称
        name: params.name,
        nameTextStyle: {
            color: 'rgba(194, 221, 248, 1)',
            fontSize: 16,
        },
        // 轴线
        axisLine: {
            show: false,
        },
        // 文本
        axisLabel: {
            color: 'rgba(194, 221, 248, 1)',
            fontSize: 16,
        },
        // 背景分割线
        splitLine: {
            lineStyle: {
                color: 'rgba(63, 163, 191, 0.49)',
                type: 'dashed',
            }
        }
    },
    series: [{
        data: params.dataY,
        type: 'line',
        // 折线
        lineStyle: {
            color: params.color,
            lineWidth: 4,
        },
        // 拐点
        itemStyle: {
            borderColor: params.color,
            borderWidth: 2,
        },
        // 填充面积（渐变色）
        areaStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    { offset: 0, color: params.color },
                    { offset: 1, color: 'rgba(255, 255, 255, 0)' }
                ]
            )
        }
    }]
};