散点图

基本使用

暂无数据

<template>
    <care-scatter
        :data="chartData"
        :settings="chartSettings">
    </care-scatter>
</template>

<script>
export default {
    data() {
        this.chartSettings = {
            metrics: ['日期', '衣', '食', '住', '行']
        };
        return {
            chartData: [
                { '日期': '2016', '衣': 720, '食': 320, '住': 150, '行': 220 },
                { '日期': '2017', '衣': 732, '食': 332, '住': 232, '行': 182 },
                { '日期': '2018', '衣': 701, '食': 301, '住': 201, '行': 191 },
                { '日期': '2019', '衣': 734, '食': 334, '住': 154, '行': 234 },
                { '日期': '2020', '衣': 690, '食': 390, '住': 190, '行': 290 },
            ]
        }
    }
}
</script>

显示代码 复制代码 复制代码

使用echart原始配置

暂无数据

<template>
    <care-scatter
        :data="chartData"
        :settings="chartSettings"
        :raw-option="chartRawOption">
    </care-scatter>
</template>

<script>
export default {
    data() {
        this.chartSettings = {
            dimension: ['日期'],
            metrics: ['衣', '食', '住', '行'],
            symbolSize: function(dataItem) {
                return dataItem[1] / 20;
            }
        };
        return {
            chartRawOption: {
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        fontSize: 14,
                    }
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    type: 'value'
                }
            },
            chartData: [
                { '日期': '2016', '衣': 720, '食': 320, '住': 150, '行': 220 },
                { '日期': '2017', '衣': 732, '食': 332, '住': 232, '行': 182 },
                { '日期': '2018', '衣': 701, '食': 301, '住': 201, '行': 191 },
                { '日期': '2019', '衣': 734, '食': 334, '住': 154, '行': 234 },
                { '日期': '2020', '衣': 690, '食': 390, '住': 190, '行': 290 },
            ]
        }
    }
}
</script>

显示代码 复制代码 复制代码