Echarts条形图图配置TSX文件简单示例

 

import * as echarts from 'echarts';
import {Component} from "react";




export default class Chart1 extends Component<{data:any}>{
    constructor(prop) {
        super(prop);
        this.state={

        }
    }
    componentDidMount() {
        type EChartsOption = echarts.EChartsOption;

        var chartDom = document.getElementById('main')!;
        var myChart = echarts.init(chartDom);
        var option: EChartsOption;
        option={
            //标题
            // title: {
            //     text: '112'
            // },
            //鼠标悬停显示数据
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            //色块对应描述
            legend: {
                // data: this.props.data,
                // textStyle: {
                //     color: '#ccc'
                // },
                //icon配置
                // icon:'rect',
                // itemWidth:20,
                // itemHeight:20,
            },
            //边距
            grid: {
                top:'10px',
                left: '10px',
                right: '10px',
                bottom: '10px',
                //边距是否计算xy轴文字
                containLabel: true
            },
            label: {

                show: true, //开启显示

                position: "right", //在右侧显示

                textStyle: { //数值样式

                    color: "black",

                    fontSize: 16,

                    fontWeight: 600

                }
            },
            //xy轴配置
            xAxis: {
                //显示数据
                type: 'value',
                //x轴最小值对比数据最小值，最大值对比最大值
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: this.props.data?this.props.data[0]:[]
            },
            //显示数据
            series: [
                {
                    type: 'bar',
                    data:this.props.data?this.props.data[1]:[],
                    //柱子样式
                    itemStyle: {
                        //每根柱子颜色随机设置
                        color: function (params) {
                            let colorList = [
                                "#DF4F4E",
                                "#1890FF",
                                "#FF816B",
                                "#FFC73D",
                                "#FBA244",
                                "#38BEDA",
                                "#CBA531",
                                "#CB8326",
                                "#CA5F25",
                            ];
                            return colorList[params.dataIndex];
                        }
                    }

                }
            ]
        }
        option && myChart.setOption(option);
    }

    render() {
        return (
            <div id={"main"} style={{width:"100%",height:"300px"}}>
            </div>
        );
    }
}

具体参数配置请见我另一篇文章Echarts柱状图配置