echart

option ={
                grid: {
                    left: '80',
                    right: '90',
                    bottom: '20',
                    top: '20',
                    containLabel: true
                },
                graphic: [
                    {
                        type: 'text',
                        z: 100,
                        left: '20',
                        top: '20',
                        style: {
                            fill: '#5B79FB',
                            textAlign:'right',
                            text: [
                                '良好',
                                '同比高',
                                '達標率低'
                            ].join('\n'),
                            font: '12px Microsoft YaHei'
                        }

                    },
                    {
                        type: 'text',
                        z: 100,
                        right: '20',
                        top: '20',
                        style: {
                            fill: '#5B79FB',
                            text: [
                                '優秀',
                                '同比高',
                                '達標率高'
                            ].join('\n'),
                            font: '12px Microsoft YaHei'
                        }

                    },
                    {
                        type: 'text',
                        z: 100,
                        right: '20',
                        bottom: '20',
                        style: {
                            fill: '#5B79FB',
                            text: [
                                '一般',
                                '同比低',
                                '達標率高'
                            ].join('\n'),
                            font: '12px Microsoft YaHei'
                        }

                    },
                    {
                        type: 'text',
                        z: 100,
                        left: '20',
                        bottom: '20',
                        style: {
                            fill: '#5B79FB',
                            textAlign:'right',
                            text: [
                                '較差',
                                '同比低',
                                '達標率低'
                            ].join('\n'),
                            font: '12px Microsoft YaHei'
                        }

                    }
                ], //4個角的文字
                tooltip: {
                    // trigger: 'axis',
                    showDelay: 0,
                    backgroundColor:'rgba(255,255,255,0.95)',//通過設置rgba調節背景顏色與透明度
                    color:'#666666',
                    borderWidth:'1',
                    borderColor:'#fff',
                    textStyle:{
                        color:'#666666',
                        fontSize:12,
                    },
                    padding: [5, 10],
                    extraCssText:'box-shadow:0 2px 4px rgba(91,121,251,0.3);',
                    formatter: function (params) {
                        if (params.value.length > 4) {
                            var result = "<span style='display:inline-block;padding-bottom: 8px;'>"+params.value[4] + '</span><br>';
                            result += "<span style='color:#999999'>"+"達標率&nbsp;&nbsp;</span>"  + "<span style='color:#333333;font-size: 14px;font-weight: 400;margin-left: 12px;'>" + params.value[0] + '%</span><br>'
                            result += "<span style='color:#999999'>"+"同比&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>" + "<span style='color:#333333;font-size: 14px;font-weight: 400;margin-left: 12px;'>"+ params.value[1] + '%</span>';
                            return result;
                        } else {
                            return params.seriesName + ' <br>'
                                + params.name + '   '
                                + params.value + '% ';
                        }
                    },
                    axisPointer: {
                        show: true,
                        type: 'cross',
                        lineStyle: {
                            type: 'dashed',
                            width: 1
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'value',
                        /*min:0,
                        max:100,*/
                        scale: true,
                        show: true,
                        axisLine:{
                            show:false
                        },
                        axisLabel: {
                            formatter: '{value}%'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#a1a8ff',
                                type: 'dashed'
                            },
                            show: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        /*  min:0,
                          max:100,*/
                        scale: true,
                        show: true,
                        axisLine:{
                            show:false
                        },
                        axisLabel: {
                            formatter: '{value}%'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#a1a8ff',
                                type: 'dashed'
                            },
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        //name:'男性',
                        type: 'scatter',
                        symbolSize: function (data) {
                            return 55;
                        },
                        // [10,40,'aa'],[60,30,'bb'],[90,90,'cc'],[40,60,'bb']
                        data:[[10,40,'aa'],[60,30,'bb'],[90,90,'cc'],[40,60,'bb']],
                        itemStyle : {
                            normal: {
                                label : {
                                    show: true,
                                    formatter: function(params){
                                        if (params.value.length > 3) {
                                            return params.value[3]+"\n"+params.value[2];
                                        }
                                    }
                                }},
                            labelLine :{show:true}
                        }, //直接顯示內容
                        markLine: {
                            symbol:'none',//去掉箭頭
                            lineStyle: {
                                normal: {
                                    type: 'solid',
                                    color:'black'
                                }
                            },
                            data: [
                                {
                                    name: '全國達標率',
                                    yAxis: 50,
                                    symbol:'none',//去掉原點
                                    label:{
                                        formatter:'{b}:{c}'
                                    }
                                },
                                {
                                    name: '全國增長率',
                                    xAxis: 60,
                                     symbol:'none',//去掉原點
                                     label:{
                                        formatter:'{b}:{c}'
                                    }
                                }
                            ]
                        }
                    }
                ]
            }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章