球加柱子echarts 柱状配置项内容和展示

bar,scatter

      option = {
            color: ['#3398DB'],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '145px',
                containLabel: true
            },
             xAxis: [{
                type: 'value',
                min: 0,
                max: 555,
                splitLine: {
                    show: false
                },
                 axisLine: {
                        show: false
                 },
                 axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
            }],
            yAxis: [{
                type: 'value',
                min: 0,
                max: 700,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
            }],
            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    barWidth: '20px',
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function (params) {
                            return params.value + "%"
                        }
                    },
                    data: [
                        {value: [100,150]},
                         {value: [200, 300]},
                          {value: [300, 210]},
                           {value: [400, 240]},
                        ]
                }, {
                    type: 'scatter',
                    coordinateSystem: 'cartesian2d',
                    zlevel: 3,
                    hoverAnimation: false,
                    symbolSize: 125,
                    itemStyle: {
                        opacity: 1
                    },
                    data: [{
                        name: '文字1',
                        value: [100, -80],
                        symbolSize: [80, 80],
                        symbol: 'circle',
                        itemStyle: {
                            color: 'rgba(0,89,255,0.08)',
                        },
                        label: {
                            show: true,
                            position: 'inside',
                            textStyle: {
                                color: '#fff',
                                fontSize: 0
                            },
                            offset: [0, 0],
                            formatter: '{a|测试}',
                            rich: {
                                a: {
                                    fontSize: 24,
                                    color: '#fff',
                                    align: 'left',
                                    lineHeight: 34,
                                    width: 50,
                                    verticalAlign: 'middle',
                                    fontWeight: 'bolder',
                                }
                            }
                        }
                    }, {
                        name: '文字2',
                        value: [200, -80],
                        symbolSize: [80, 80],
                        symbol: 'circle',
                        itemStyle: {
                            color: 'rgba(0,89,255,1)',
                        },
                        label: {
                            show: true,
                            position: 'inside',
                            textStyle: {
                                color: '#fff',
                                fontSize: 0
                            },
                            offset: [0, 0],
                            formatter: '{a|测试}',
                            rich: {
                                a: {
                                    fontSize: 24,
                                    color: '#ffbb00',
                                    align: 'left',
                                    lineHeight: 34,
                                    width: 50,
                                    verticalAlign: 'middle',
                                    fontWeight: 'bolder',
                                }
                            }
                        }
                    }, {
                        name: '文字2',
                        value: [300, -80],
                        symbolSize: [80, 80],
                        symbol: 'circle',
                        itemStyle: {
                            color: 'rgba(0,89,255,1)',
                        },
                        label: {
                            show: true,
                            position: 'inside',
                            textStyle: {
                                color: '#fff',
                                fontSize: 0
                            },
                            offset: [0, 0],
                            formatter: '{a|测试}',
                            rich: {
                                a: {
                                    fontSize: 24,
                                    color: '#ffbb00',
                                    align: 'left',
                                    lineHeight: 34,
                                    width: 50,
                                    verticalAlign: 'middle',
                                    fontWeight: 'bolder',
                                }
                            }
                        }
                    }, {
                        name: '文字2',
                        value: [400, -80],
                        symbolSize: [80, 80],
                        symbol: 'circle',
                        itemStyle: {
                            color: 'rgba(0,89,255,1)',
                        },
                        label: {
                            show: true,
                            position: 'inside',
                            textStyle: {
                                color: '#fff',
                                fontSize: 0
                            },
                            offset: [0, 0],
                            formatter: '{a|测试}',
                            rich: {
                                a: {
                                    fontSize: 24,
                                    color: '#ffbb00',
                                    align: 'left',
                                    lineHeight: 34,
                                    width: 50,
                                    verticalAlign: 'middle',
                                    fontWeight: 'bolder',
                                }
                            }
                        }
                    }]
                }, {
                    name: '线段',
                    type: 'lines',
                    coordinateSystem: 'cartesian2d',
                    zlevel: 1,
                    lineStyle: {
                        normal: {
                            width: 8,
                            type: 'solid',
                            color: '#46E7FF',
                            opacity: 0.1
                        }
                    },
                    itemStyle: {
                        normal: {
                            opacity: 1
                        }
                    },
                    data: [{
                        coords: [
                            [130, -80],
                            [400, -80]
                        ]
                    }]
                }, {
                    name: '线段动画',
                    type: 'lines',
                    coordinateSystem: 'cartesian2d',
                    zlevel: 2,
                    effect: {
                        show: true,
                        period: 3,
                        trailLength: 0.2,
                        symbolSize: 6
                    },
                    lineStyle: {
                        normal: {
                            width: 6,
                            opacity: 0,
                            color: '#ffbb00'
                        }
                    },
                    data: [{
                        coords: [
                            [130, -80],
                            [400, -80]
                        ]
                    }]
                }
            ]
        };