echarts 折線圖、曲線圖

import React, { Component, createRef } from 'react'
import { Cart } from 'antd'
import echarts from 'echarts'

var option = {
    // 圖表名
    title: {
        text: '店鋪銷售折線圖'
    },
    tooltip: {
        trigger: 'axis',  //開啟tips框框
        axisPointer: {type: 'cross'} //y軸刻度跟隨鼠標顯示
    },
    color:["red", "yellow", "blue"],
    // 頂部說明
    legend: {
        data:['銷量','廣告主數','預估收益'],
        left:'right' // 對齊方式
    },
    // 設置折線圖大小
    grid: {
        top: 60, // 主圖距離整個容器頂部的距離
        left:60,
        right:0,
        bottom: 60
    },  
    // x軸刻度
    xAxis: {
        type: 'category',
        axisTick: {
            alignWithLabel: true
        },
        axisLine: {
            onZero: true,
            lineStyle: {
                color: 'purple',
                width:'92%'
            }
        },
        axisPointer: {
            label: {
                //相當於tips的標題
                formatter: function (params) {
                    return  params.value+'詳情';
                }
            }
        },
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: [{
        type: 'value',
        //刻度對出去的線的顏色
        splitLine:{
            lineStyle:{
                color:'lightblue'
            }
        },
        axisLabel: {
            color: "pink" //Y軸刻度字顏色
        },
        axisLine: {
            lineStyle: {
            // 設置y軸軸線顏色
                color: 'blue'
            }
        }
    }],
    series: [{
        name: '銷量',  // 折線名
        type: 'line', 
        data: [1344, 1342, 1432, 1232, 1346, 1336]
    }, {
        name:'廣告主數',
        type:'line',
        smooth: false,
        data: [232, 433, 235,636, 334, 233]
    },
    {
        name:'預估收益',
        type:'line',
        smooth: true, // true曲線  false折線
        data: [1133, 1323, 4323, 2323, 1343, 1033]
    }
    ]};

export default class index extends Component {

    constructor(){
        super()
        this.chartRef = createRef()
    }

    componentDidMount(){
        let myChart = echarts.init(this.chartRef.current)
        myChart.setOption(option)
    }
    
    render() {
        return (
            <div>
                <div ref={this.chartRef} style={{height:"400px"}}></div>
            </div>
        )
    }
}