核心概念介绍

该框架对 echart 库进行拓展与兼容，以下内容为图表通用属性

指标和维度

v-charts 的数据由指标和维度组成。以一组常见的数据为例：

日期	收入	支出
2020-01-01	1876	2333
2020-01-02	2334	122
2020-01-03	1234	322

“维度” 指的是数据的属性，例如表格中的 “日期” 维度，表示生成的每组数据的日期。

“指标” 是量化衡量标准，例如表格中的 “收入” 和 “支出”。

设置事件

统一通过在组件上绑定events属性，设置事件监听方法

暂无数据

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

<script>
export default {
    data() {
        this.chartSettings = {
            metrics: ['日期', '收入', '支出'],
        }
        return {
            chartData: [
                { '日期': '周一', '收入': 1876, '支出': 322 },
                { '日期': '周二', '收入': 2334, '支出': 2333 },
                { '日期': '周三', '收入': 332, '支出': 122 },
                { '日期': '周四', '收入': 1234, '支出': 223 },
            ],
            events: {
                click: function(param) {
                    console.log(param)
                }
            }
        }
    }
}
</script>

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

数据映射

可在需要数据的对象上，使用 dataMap 属性，维度或指标作为值，即可获取该维度或指标组成的数组数据

暂无数据

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

<script>
export default {
    data() {
        this.chartSettings = {
            dimension: ['日期'],
            metrics: ['收入', '支出'],
        }
        return {
            chartRawOption: {
                series: [
                    {
                        dataMap: '收入',
                        type: 'bar',
                    }
                ]
            },
            chartData: [
                { '日期': '周一', '收入': 1876, '支出': 322 },
                { '日期': '周二', '收入': 2334, '支出': 2333 },
                { '日期': '周三', '收入': 332, '支出': 122 },
                { '日期': '周四', '收入': 1234, '支出': 223 },
                { '日期': '周五', '收入': 452, '支出': 123 },
            ],
        }
    }
}
</script>

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

合并兼容 echart 原始格式数据

可通过添加 raw-option 属性来使用 echart 格式配置图表参数，该属性上配置的数据将会以合并的方式新增到图表参数中；

针对 series 等拥有数组数据的参数合并，默认通过两个数组中对象的索引进行合并，若两个索引相同，则合并数据，若不相同，则添加数据；

若要指定合并某个指标或数组中的对象，可显式设置 _name 属性，通过 _name 来匹配已存在于数组对象中的 name 属性，匹配成功则会将两个对象进行数据合并；

针对 series 属性数据的数组合并，还提供指定 _id 的方式进行合并，可通过 log 属性查看控制台输出的图表参数信息，其中已对 series 数组中每个对象新增 _id 字段，若要针对某个数组里的对象进行数据合并，则在该对象上显式设置 _id 即可；

若同时指定 _id 和 _name，则优先合并 _id 匹配的对象。

暂无数据

通过修改 raw-option 上的图例属性控制图例显示

通过内置方法修改图例属性控制图例显示

<template>
    <div>
        <care-bar
            :data="chartData"
            :settings="chartSettings"
            :raw-option="chartOption"
            :legend="legend">
        </care-bar>
        <div style="margin-bottom: 10px"><care-switch v-model="chartOption.legend.show">通过修改 raw-option 上的图例属性控制图例显示</care-switch></div>
        <care-switch v-model="legend">通过内置方法修改图例属性控制图例显示</care-switch>
    </div>
</template>

<script>
export default {
    data() {
        this.chartSettings = {
            metrics: ['日期', '利润', '收入', '支出'],
        }
        return {
            legend: true,
            chartOption: {
                legend: {
                    show: true
                },
                grid: {
                    top: '15%',
                },
                series: [
                    // 默认通过数组索引合并或增加对象数据，两个数组索引相同，则合并数据
                    {
                        itemStyle: { color: "red" }
                    },
                    // 指定 _id，会根据 _id 将对象合并到 series 里包含 _id=1 的对象中
                    {
                        _id: '2',
                        itemStyle: { color: "blue" }
                    },
                    // 指定 _name，会根据 _name 将对象合并到 series 里包含 name='收入' 的对象中
                    {
                        _name: '支出',
                        itemStyle: { color: "green" }
                    },
                    // 默认通过数组索引合并或增加对象数据，两个数组索引不同或原数组索引不存在，则增加数据
                    {
                        type: 'bar',
                        name: '支出',
                        dataMap: '支出',
                        itemStyle: { color: "#365695" }
                    }
                ]
            },
            chartData: [
                { '日期': '周一', '利润': 432, '收入': 1876, '支出': 322 },
                { '日期': '周二', '利润': 1132, '收入': 1334, '支出': 1333 },
                { '日期': '周三', '利润': 1213, '收入': 332, '支出': 122 },
                { '日期': '周四', '利润': 324, '收入': 1234, '支出': 223 },
                { '日期': '周五', '利润': 625, '收入': 452, '支出': 123 },
                { '日期': '周六', '利润': 233, '收入': 231, '支出': 122 },
                { '日期': '周日', '利润': 132, '收入': 1234, '支出': 567 },
            ]
        }
    }
}
</script>

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

通用快捷设置参数

内置了一些方法，可快速对一些图表通用属性进行设置，下面以 bar 组件为例

暂无数据

轴边距

显示X轴

显示Y轴

X轴分割线

Y轴分割线

显示图例

是否横向

以顶部间距为例(%单位) 图表字体 只设置图例字体

设置轴数据单位(以Y轴为例)

X轴滑动筛选器

Y轴滑动筛选器

<template>
    <div>
        <care-bar
            ref="bar"
            :data="chartData"
            :settings="chartSettings"
            :boundaryGap="boundaryGap"
            :showX="showX"
            :showY="showY"
            :showXSplit="showXSplit"
            :showYSplit="showYSplit"
            :direction="direction"
            :legend="legend"
            :grid="`top ${grid}`"
            :fontSize="fontSize"
            :yUnit="yUnit"
            :xSlider="xSlider"
            :ySlider="ySlider">
        </care-bar>
    </div>
    <care-switch v-model="boundaryGap">轴边距</care-switch>
    <care-switch v-model="showX">显示X轴</care-switch>
    <care-switch v-model="showY">显示Y轴</care-switch>
    <care-switch v-model="showXSplit">X轴分割线</care-switch>
    <care-switch v-model="showYSplit">Y轴分割线</care-switch>
    <care-switch v-model="legend">显示图例</care-switch>
    <care-switch v-model="changeDirection" @change="onDirectionChange">是否横向</care-switch>
    <div>
        <input class="number-control" type="number" :value="grid" @input="onGridChange($event.target.value)"/>以顶部间距为例(%单位)
        <input class="number-control" type="number" :value="fontSize" @input="onFontSizeChange($event.target.value)"/>图表字体
        <input class="number-control" type="number" :value="fontSize" @input="onLegendFontSizeChange($event.target.value)"/>只设置图例字体
    </div>
    <care-input class="number-control" type="number" v-model="yUnit"/>设置轴数据单位(以Y轴为例)
    <care-switch v-model="xSlider">X轴滑动筛选器</care-switch>
    <care-switch v-model="ySlider">Y轴滑动筛选器</care-switch>
</template>

<script>
export default {
    data() {
        this.chartSettings = {
            metrics: ['日期', '收入', '支出'],
        }
        return {
            boundaryGap: true,
            showX: true,
            showY: true,
            showXSplit: true,
            showYSplit: true,
            legend: true,
            changeDirection: false,
            direction: 'vertical',
            grid: 10,
            fontSize: 18,
            yUnit: '元',
            xSlider: false,
            ySlider: false,
            chartData: [
                { '日期': '周一', '收入': 1876, '支出': 322 },
                { '日期': '周二', '收入': 2334, '支出': 2333 },
                { '日期': '周三', '收入': 332, '支出': 122 },
                { '日期': '周四', '收入': 1234, '支出': 223 },
                { '日期': '周五', '收入': 452, '支出': 123 },
                { '日期': '周六', '收入': 231, '支出': 122 },
                { '日期': '周日', '收入': 1234, '支出': 567 },
            ]
        }
    },
    methods: {
        onGridChange(val) {
            this.grid = val;
        },
        onFontSizeChange(val) {
            this.fontSize = val;
        },
        onLegendFontSizeChange(val) {
            this.$refs.bar.setFontSize(val, 'legend');
        },
        onDirectionChange(val) {
            if (val) {
                this.direction = 'horizontal';
            } else {
                this.direction = 'vertical';
            }
        }
    }
}
</script>

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

内置钩子函数

每个组件都内置有 beforeSetOption、afterSetOption 钩子函数，方便在渲染前和渲染后对参数进一步处理。

暂无数据

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

<script>
export default {
    data() {
        this.chartSettings = {
            metrics: ['日期', '收入', '支出'],
        }
        return {
            chartData: [
                { '日期': '周一', '收入': 1876, '支出': 322 },
                { '日期': '周二', '收入': 2334, '支出': 2333 },
                { '日期': '周三', '收入': 332, '支出': 122 },
                { '日期': '周四', '收入': 1234, '支出': 223 },
                { '日期': '周五', '收入': 452, '支出': 123 },
            ],
        }
    },
    methods: {
        beforeSetOption(option) {
            console.log('beforeSetOption：', option);
            // 最后必须将 option 返回
            return option;
        }
    }
}
</script>

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

获取 echart 中原始格式的 series 属性值

内置 getOriginSeries 方法，可获取 echart 中 series 属性值

暂无数据

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

<script>
export default {
    data() {
        this.chartSettings = {
            dimension: ['日期'],
            metrics: ['收入', '支出'],
        }
        return {
            chartData: [
                { '日期': '周一', '收入': 1876, '支出': 322 },
                { '日期': '周二', '收入': 2334, '支出': 2333 },
                { '日期': '周三', '收入': 332, '支出': 122 },
                { '日期': '周四', '收入': 1234, '支出': 223 },
                { '日期': '周五', '收入': 452, '支出': 123 },
            ],
        }
    },
    mounted() {
        console.log("getOriginSeries: ", this.$refs.bar.getOriginSeries());
    }
}
</script>

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