本博文主要是記錄一下在實現折柱圖的過程中遇到的一些問題，由於對echarts使用不熟悉，在一些效果點產生了糾結。記錄點如下：
1、折線圖的實心圓點和顏色設定。設定itemStyle.normal.color
2、圖例元件不顯示。缺少legend的引入。
3、折線的區域面積顏色填充。設定areaStyle
4、柱狀圖重疊屬性。 設定barGap: '-100%', 使柱體重疊在一起顯示
5、柱狀圖堆疊屬性。stack值相同的情況下，柱體會堆疊在一起
6、yAxisIndex設定的Y軸的 index，不設定則折線圖會被放大兩倍。
7、設定折線圖折線點的形狀、是否實心和大小。 symbol: 'circle', smooth: true, symbolSize: 5,
8、設定折線圖折線的樣式。lineStyle
9、設定柱形圖的柱子的寬度。barWidth
10、X軸文字旋轉角度。rotate: 45

父元件：

<RGS seriesData={this.state.rgsData}
         xAxisData={this.state.rgsXAxis} />

子元件：

import React, { Component } from 'react';
import echarts from 'echarts/lib/echarts';
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import '../../stylus/charts/charts-com.less';
interface Props {
    seriesData: {},
    xAxisData: []
}
type StateType = {
    seriesData: any,
    xAxisData: []
}
class RainGearSale extends Component<Props, StateType> {
    constructor(props) {
        super(props);
        console.log('props', props);
        this.state = {
            seriesData: this.props.seriesData,
            xAxisData: this.props.xAxisData
        }
    }
    componentWillMount() {
        // 渲染前
        console.log('Component WILL MOUNT!')
    }
    componentDidMount() {
        // 渲染後
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'none',
                    lineStyle: {
                        color: 'transparent'
                    }
                },
            },
            legend: {
                data: [{
                    name:'雨衣', itemWidth: 10,
                    textStyle:{
                        color: '#4B52F1' 
                    }
                }, '雨傘', '銷售金額'],
                itemGap:20,
                height: 60,
                top: 0,
                left: 0,
                padding: [0, 0, 20, 0],
            },
            grid: {
                left: 30
                // containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: this.state.xAxisData,
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        fontSize: 12,
                        show: true,
                        color: "#333",
                        fontFamily: '"PingFangSC-Regular", "Microsoft YaHei"',
                        // rotate: 45
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(0,0,0,0.02)'
                        }
                    }
                }
            ],
            yAxis: [
                
                {
                    type: 'value',
                    name: '單位：億',
                    min: 0,
                    max: 20,
                    interval: 5,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisTick: {
                        show: false,
                        alignWithLabel: true
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            // color: '#e3e3e3'
                        }
                    },
                    textStyle: {
                        color: "rgba(0,0,0,1)"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(0,0,0,1)'
                        }
                    }
                },
                {
                    type: 'value',
                    name: '單位：%',
                    min: 0,
                    max: 100,
                    interval: 25,
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
            ],
            series: [
                {
                    name: '雨衣',
                    type: 'bar',
                    stack: "銷售量", // stack值相同的情況下，柱體會堆疊在一起
                    // barGap: '-100%',
                    barWidth: 12,
                    itemStyle: {
                        color: 'rgb(120,99,52)',
                        borderWidth: 1
                    },
                    data: this.state.seriesData.yy
                },
                {
                    name: '雨傘',
                    type: 'bar',
                    stack: "銷售量",
                    // barGap: '-100%', // 使柱體重疊在一起顯示
                    barWidth: 12,
                    itemStyle: {
                        color: 'rgb(247,192,82)', //"#e6a23c",
                        borderWidth: 1
                    },
                    data: this.state.seriesData.ys
                },
                {
                    name: '銷售金額',
                    type: 'line',
                    yAxisIndex: 1,
                    symbol: 'circle',
                    smooth: true,
                    symbolSize: 5,
                    itemStyle: {
                        normal: {
                          color: 'rgb(245,191,85)',// "#CEDCFE", //改變折線點的顏色
                          lineStyle: {
                            color: 'rgb(245,191,85)', //改變折線顏色
                          },
                        },
                    },
                    lineStyle: {
                        color: 'rgb(245,191,85)',
                        type:'solid'
                    },
                    areaStyle: { // 區域樣式
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(245,191,85)',
                        }, {
                            offset: 1,
                            color: '#fff'
                        }]),
                    },
                    data: this.state.seriesData.xs
                }
            ]
        };
        let myChart = echarts.init(document.getElementById('one'));
        myChart.setOption(option);
        console.log('myChart', myChart.getOption());
        window.addEventListener("resize", myChart.resize);
    }
    render() {
        return (
            <div className="rain-gear-sale">
                <h1>雨具銷售量</h1>
                <div className="chart-area">
                    <div id="one" className='canvasBox'></div>
                </div>
            </div>
        );
    }
}

export default RainGearSale;
 

畫布樣式：

.rain-gear-sale{
    width: 100%;
    .canvasBox{
        width: 800px;
        height: 600px;
        padding: 10px;
        box-sizing: border-box;
    }
}