react+echarts折柱图实现

本博文主要是记录一下在实现折柱图的过程中遇到的一些问题，由于对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;
    }
}

react+echarts折柱图实现

原文：https://www.cnblogs.com/min77/p/14875786.html