Echarts散点效果2

echarts yekong 273℃

Echarts散点效果2

drawLine3() {
                var that = this;
                var chartDom = document.getElementById('echarts3');
                var myChart = echarts.init(chartDom);
                var option = {
                    color: ["#315C94", "#497FB6", "#6F8FCF", "#7AA0BB", "#9FBEDD", "#BCD4E1"],
                    textStyle: {
                        color: '#fff',

                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            lineStyle: {
                                type: 'dashed',
                                width: 2,
                                color: '#4B941A'
                            },
                            animation: true
                        }
                    },
                    legend: {
                        show: false,
                        data: ['100', 'b', 'c', 'd', 'e', 'f'],
                        left: 'right',
                    },
                    grid: {
                        left: "3%",
                        right: "3%",
                        top: "12%",
                        bottom: "15%",
                        containLabel: true,
                    },
                    yAxis: {
                        name: '贷款金额',
                        nameTextStyle: {
                            color: '#969696',
                            padding: [0, 0, 0, -50],
                        },
                        data: ['0', '100', '200', '300', '400', '500',],
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#E4E4E4'],
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: "rgba(51, 51, 51, 1)",
                            fontSize: 12,
                        },
                    },
                    xAxis: {
                        data: ['大型', '中型', '小型', '微型'],
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#E4E4E4',
                            },
                        },
                        axisLabel: {
                            color: "rgba(51, 51, 51, 1)",
                            fontSize: 12,
                        },
                        axisTick: {
                            show: false
                        },
                    },
                    series: [
                        {
                            name: 'a',
                            type: 'scatter',
                            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                            symbolSize: function (data) {
                                return Math.sqrt(data[2]) * 1;
                            },
                            label: {
                                emphasis: {
                                    show: false,
                                    formatter: function (param) {
                                        return param.data[2];
                                    },
                                    position: 'top'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            },
                            data: [
                                ['大型', '250', 200],
                                ['中型', '250', 200],
                                ['小型', '250', 200],
                                ['微型', '250', 200],
                            ]
                        },
                        {
                            name: 'b',
                            type: 'scatter',
                            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                            symbolSize: function (data) {
                                return Math.sqrt(data[2]) * 1;
                            },
                            label: {
                                emphasis: {
                                    show: true,
                                    formatter: function (param) {
                                        return param.data[2];
                                    },
                                    position: 'top'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#C94C15'
                                }
                            },
                            data: [
                                ['大型', '150', 200],
                                ['中型', '150', 200],
                                ['小型', '150', 200],
                                ['微型', '150', 200],
                            ]
                        },
                        {
                            name: 'c',
                            type: 'scatter',
                            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                            symbolSize: function (data) {
                                return Math.sqrt(data[2]) * 1;
                            },
                            label: {
                                emphasis: {
                                    show: true,
                                    formatter: function (param) {
                                        return param.data[2];
                                    },
                                    position: 'top'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#A18F1D'
                                }
                            },
                            data: [
                                ['大型', '100', 200],
                                ['中型', '100', 200],
                                ['小型', '100', 200],
                                ['微型', '100', 200],
                            ]
                        },
                        {
                            name: 'd',
                            type: 'scatter',
                            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                            symbolSize: function (data) {
                                return Math.sqrt(data[2]) * 1;
                            },
                            label: {
                                emphasis: {
                                    show: true,
                                    formatter: function (param) {
                                        return param.data[2];
                                    },
                                    position: 'top'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#17885C'
                                }
                            },
                            data: [
                                ['大型', '200', 200],
                                ['中型', '200', 200],
                                ['小型', '200', 200],
                                ['微型', '200', 200],
                            ]
                        },
                        {
                            name: 'e',
                            type: 'scatter',
                            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                            symbolSize: function (data) {
                                return Math.sqrt(data[2]) * 1;
                            },
                            label: {
                                emphasis: {
                                    show: true,
                                    formatter: function (param) {
                                        return param.data[2];
                                    },
                                    position: 'top'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#2769CF'
                                }
                            },
                            data: [
                                ['大型', '300', 200],
                                ['中型', '300', 200],
                                ['小型', '300', 200],
                                ['微型', '300', 200],
                            ]
                        },
                        {
                            name: 'f',
                            type: 'scatter',
                            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                            symbolSize: function (data) {
                                return Math.sqrt(data[2]) * 1;
                            },
                            label: {
                                emphasis: {
                                    show: true,
                                    formatter: function (param) {
                                        return param.data[2];
                                    },
                                    position: 'top'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#509820'
                                }
                            },
                            data: [
                                ['大型', '500', 200],
                                ['中型', '400', 200],
                                ['小型', '500', 200],
                                ['微型', '500', 200],
                            ]
                        },
                    ]
                };
                myChart.clear();
                myChart.resize();
                myChart.setOption(option);
            },
喜欢 (0)