带zoom轴的散点图echarts slider配置项内容和展示

测试zoom属性的应用

      let sourceData = [{
        prop_name: "IP联名",
        prop_value: "无",
        num: "2760270",
        itemCount: "288913",
        prop: "IP联名 / 无",
    },
    {
        prop_name: "长度",
        prop_value: "常规",
        num: "2193954",
        itemCount: "225673",
        prop: "长度 / 常规",
    },
    {
        prop_name: "风格",
        prop_value: "其它或未提及",
        num: "2096845",
        itemCount: "206479",
        prop: "风格 / 其它或未提及",
    },
    {
        prop_name: "松紧度",
        prop_value: "常规",
        num: "1835864",
        itemCount: "179823",
        prop: "松紧度 / 常规",
    },
    {
        prop_name: "图案",
        prop_value: "纯色",
        num: "1381297",
        itemCount: "148048",
        prop: "图案 / 纯色",
    },
    {
        prop_name: "袖型",
        prop_value: "常规",
        num: "1313665",
        itemCount: "145270",
        prop: "袖型 / 常规",
    },
    {
        prop_name: "袖长",
        prop_value: "长袖",
        num: "1228169",
        itemCount: "149488",
        prop: "袖长 / 长袖",
    },
    {
        prop_name: "主要颜色",
        prop_value: "白",
        num: "959038",
        itemCount: "80275",
        prop: "主要颜色 / 白",
    },
    {
        prop_name: "领型",
        prop_value: "其它",
        num: "905912",
        itemCount: "71932",
        prop: "领型 / 其它",
    },
];

let seriesData = sourceData.map(function(item, index, array) {
    return {
        name: item["prop"],
        //实际点的参数
        value: [item["num"], item["itemCount"]],
    };
});

let computeServicesAvgLine = function() {
    let sum = 0;
    sourceData.forEach(function(item) {
        sum += parseInt(item["itemCount"]);
    });
    return sum / sourceData.length;
};

let computeSalesAvgLine = function() {
    let sum = 0;
    sourceData.forEach(function(item) {
        sum += parseInt(item["num"]);
    });
    return sum / sourceData.length;
};
let avg = {
    servicesAvgLine: computeServicesAvgLine(),
    salesAvgLine: computeSalesAvgLine(),
};

let seriesLabel = {
    normal: {
        show: true,
        position: "inside",
        offset: [0, -50],
        padding: [0, 7],
        fontSize: 12,
        color: "#000",
        textAlign: "left",
        textBorderColor: "#333",
        textBorderWidth: 0,
        backgroundColor: "#fff",
        borderColor: "#fff",
        borderWidth: 1,
        borderRadius: 4,
        formatter: function(obj) {
            if (obj.componentType == "series") {
                return [
                    obj.name,
                    "销量 " + obj.data.value[0],
                    "销量上新" + obj.data.value[1],
                ].join("\n");
            }
        },
    },
};

option = {
    title: {
        text: "女装属性销量驱动表现",
        x: "center",
        y: "top",
    },
    tooltip: {
        trigger: "item",
        axisPointer: {
            show: true,
            type: "cross",
            lineStyle: {
                type: "dashed",
                width: 1,
            },
        },
        formatter: function(obj) {
            if (obj.componentType == "series") {
                return `<div style="border-bottom: 1px solid rgba(255,255,255,.3);font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">${obj.name}</div>
            <span>销量</span>:${obj.data.value[0]}<br/>
            <span>销量上新</span>:${obj.data.value[1]}`;
            }
        },
    },
    label: {
        fontSize: 8,
        show: true,
        formatter: function(params) {
            return params.name;
        },
        emphasis: {
            show: true,
            position: "bottom",
        },
    },
    xAxis: {
        name: "销量",
        type: "value",
        scale: true,
        axisLabel: {
            formatter: "{value}",
            fontSize: 8,
        },
        splitLine: {
            show: false,
        },
        axisLine: {
            lineStyle: {
                color: "#3259B8",
            },
        },
    },
    yAxis: {
        name: "上新数量",
        type: "value",
        scale: true,
        axisLabel: {
            formatter: "{value}",
            fontSize: 8,
        },
        splitLine: {
            show: false,
        },
        axisLine: {
            lineStyle: {
                color: "#3259B8",
            },
        },
    },
    dataZoom: [{
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 0,
            end: 100
        },
        {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            left: '94%',
            start: 0,
            end: 100
        },
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 100
        },
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 0,
            end: 100
        }
    ],
    series: [{
        type: "scatter",
        data: seriesData,
        label: seriesLabel,
        symbolSize: function(data, index) {
            return Math.sqrt(data[0]) / 4e1;
        },
        itemStyle: {
            normal: {
                opacity: 0.8,
            },
            color: function(params) {
                let colorarrays = [
                    "#2F9323",
                    "#D9B63A",
                    "#2E2AA4",
                    "#9F2E61",
                    "#4D670C",
                    "#BF675F",
                    "#1F814A",
                    "#357F88",
                    "#673509",
                    "#310937",
                    "#1B9637",
                    "#F7393C",
                ];
                return colorarrays[params.dataIndex];
            },
        },
        markLine: {
            label: {
                normal: {
                    formatter: function(params) {
                        if (params.dataIndex == 0) {
                            return params.value;
                        } else if (params.dataIndex == 1) {
                            return params.value;
                        }
                        return params.value;
                    },
                },
            },
            lineStyle: {
                normal: {
                    color: "#626c91",
                    type: "bashed",
                    width: 1,
                },
                emphasis: {
                    color: "#d9def7",
                },
            },
            data: [{
                    xAxis: avg.salesAvgLine,
                    name: "营业额平均线",
                    itemStyle: {
                        normal: {
                            color: "#b84a58",
                        },
                    },
                },
                {
                    yAxis: avg.servicesAvgLine,
                    name: "服务能力平均线",
                    itemStyle: {
                        normal: {
                            color: "#b84a58",
                        },
                    },
                },
            ],
        },
        markArea: {
            silent: true,
            data: [
                [{
                        name: "弱势区",
                        itemStyle: {
                            color: "white",
                        },
                        label: {
                            show: true,
                            position: "insideBottomRight",
                            fontStyle: "normal",
                            color: "#797979",
                            fontSize: 10,
                            // fontWeight: "blod",
                        },
                        coord: [avg.salesAvgLine, avg.servicesAvgLine],
                    },
                    {
                        coord: [Number.MAX_VALUE, 0],
                    },
                ],
                [{
                        name: "乏力区",
                        itemStyle: {
                            color: "white",
                        },
                        label: {
                            show: true,
                            position: "insideBottomLeft",
                            fontStyle: "normal",
                            color: "#797979",
                            fontSize: 10,
                            // fontWeight: "blod",
                        },
                        coord: [0, 0],
                    },
                    {
                        coord: [avg.salesAvgLine, avg.servicesAvgLine],
                    },
                ],
                [{
                        name: "强势区",
                        itemStyle: {
                            color: "white",
                        },
                        label: {
                            show: true,
                            position: "insideTopRight",
                            fontStyle: "normal",
                            color: "#797979",
                            fontSize: 10,
                            // fontWeight: "blod",
                        },
                        coord: [avg.salesAvgLine, avg.servicesAvgLine],
                    },
                    {
                        coord: [Number.MAX_VALUE, Number.MAX_VALUE],
                    },
                ],
                [{
                        name: "潜力区",
                        itemStyle: {
                            color: "white",
                        },
                        label: {
                            show: true,
                            position: "insideTopLeft",
                            fontStyle: "normal",
                            color: "#797979",
                            fontSize: 10,
                            // fontWeight: "blod",
                        },
                        coord: [0, Number.MAX_VALUE],
                    },
                    {
                        coord: [avg.salesAvgLine, avg.servicesAvgLine],
                    },
                ],
            ],
        },
    }, ],
};