[Echarts] echarts progress bar, echarts linkage, click the histogram under the histogram linkage

 getBadWeatherChart() {
        const that = this;
        let option = {
            tooltip: {
                // 鼠标移入的住
                trigger: 'item',
                backgroundColor: '#fff',
                triggerOn: 'click',
                // position: function(point, params, dom, rect, size) {
                //     // 固定在顶部
                //     console.log(point);
                //     console.log(dom);
                //     // return [point[0], '25%'];
                // },
                position: 'top',
                axisPointer: {
                    type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'|'cross' cross为混合显示
                    shadowStyle: {
                        color: 'rgba(127,196,251,0.3)'
                    }
                },
                confine: true,
                formatter: params => {
                    console.log(params);
                    return (
                        '<div class="event-num"  style="text-align:center; color:#666;font-size: 10px;padding:5px">' +
                        '<div>事故数量</div><div>' +
                        // params[0].value +
                        '24起，9%</div></div>'
                    );
                }
            },
            xAxis: {
                type: 'category',
                show: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    barWidth: 50,
                    // label: {
                    //     show: true,
                    //     position: 'inside',
                    // }
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'insideBottom',
                                textStyle: {
                                    color: '#FFF'
                                }
                            },
                            color: function(params) {
                                return AccidentEportraitAnalysisComponent
                                    .sevenColor[params.dataIndex];
                            }
                        }
                    }
                }
            ]
        };
        that.badWeatherTopChart = echarts.init(that.chartRef.nativeElement);
        that.badWeatherTopChart.setOption(option);
        that.badWeatherTopChart.dispatchAction({
            type: 'showTip',
            // 可选，数据的 index
            seriesIndex: 0,
            dataIndex: 0,
            position: ['10%', '32%']
        });
        that.badWeatherTopChart.dispatchAction({
            type: 'highlight',
            // 可选，数据的 index
            seriesIndex: 0,
            dataIndex: 0
        });
        let datatest = [18203, 23489, 29034, 104970, 131744, 630230],
            datacz = [
                [18203, 23489, 29034, 104970, 131744, 630230],
                [122, 2333489, 292034, 1, 1, 2],
                [24, 23, 43, 56, 23, 12]
            ];
        this.badWeatherTopChart.on('click', function(params) {
            console.log(params);
            that.badWeatherTopChart.dispatchAction({
                type: 'downplay'
            });
            that.badWeatherTopChart.dispatchAction({
                type: 'highlight',
                // 可选，数据的 index
                dataIndex: params.dataIndex
            });
            datatest = datacz[params.dataIndex] || [45, 32, 234, 23, 2, 23];
            that.getBadWeatherChart2(datatest);
            that.cdr.markForCheck();
        });
        that.getBadWeatherChart2(datatest);
        that.cdr.markForCheck();
    }
    getBadWeatherChart2(data) {
        this.badWeatherTopChart2 = {
            tooltip: [
                {
                    show: false
                }
            ],
            legend: {
                data: ['2011年', '2012年']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    show: false
                }
            ],
            yAxis: {
                axisTick: {
                    show: false // 取消y轴的刻度线
                },
                type: 'category',
                data: [
                    '事故程度A',
                    '事故程度B',
                    '事故程度C',
                    '事故程度D',
                    '事故程度E',
                    '事故程度F'
                ]
            },
            color: new (echarts as any).graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#0076C3' },
                { offset: 1, color: '#6CB4ED' }
            ]),
            series: [
                {
                    type: 'bar',
                    barWidth: 20,
                    silent: true,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                    color: '#000'
                                },
                                formatter: ' {c} 起'
                            }
                        }
                    },
                    data: data
                }
            ]
        };
    }

Horizontal bar

option = {
    title: {
                text: '影响程度Top5',
                left: 'left',
                top: '10',
                textStyle: {
                    fontSize: '14',
                    color: '#8aeafd'
                }
            },
            grid: {
                left: '10px',
                right: '40px',
                bottom: '10',
                top: '40px',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                confine: true,
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                inverse: true,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    color: '#45b5dc',
                    fontSize: '14'
                },
                axisLine: {
                    show: false
                },
                data: ['影响程度1','影响程度2','影响程度3','影响程度4','影响程度5']
            },
            series: [{
                name: '',
                type: 'bar',
                barWidth: 14,
                stack: '',
                label: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: '#ccc759',
                        fontSize: '14'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#199ed2',
                        barBorderRadius: 5,
                    }
                },
                data: [10,20,30,40,20]
            }]
};