v-charts areaStyle All In One

v-charts areaStyle All In One

shit 封装

堆叠面积图

https://codepen.io/xgqfrms/pen/MWEdROy?editors=1010

shit demo

<section class="content">
    <ve-line
        ref="chart"
        class="trend-chart"
        style="margin: 20px; width: calc(100% - 40px);"
        :data="chartData"
        :settings="chartSettings"
        :extend="chartExtend"
        :colors="chartColors"
        :loading="chartLoading"
        :data-empty="dataEmpty"
        height="300px"
        width="auto"
    />
</section>

data () {
    return {
        chartData: [],
        dataEmpty: false,
        chartColors: Util.chartColors,
        chartLoading: false,
        chartSettings: {
            type: 'line',
            // labelMap: data.labels,
            // yAxisType: ['percent'],
        },
        chartExtend: {
            ...UtilTableChart.chartExtend('line'),
            stack: {
                cols: [],
            },
            area: true,
            // grid: {
            //     bottom: 0,
            // },
            legend: {
                show: true,
            },
            tooltip: {
                formatter: (params) => {
                    // 多个 column 返回 数组
                    console.log('params =', params);
                    let result = '';
                    for(const [i, param] of params.entries()) {
                        const {
                            name,
                            marker,
                            value,
                        } = param;
                        console.log('param', param, i);
                        if (i === 0) {
                            result += `
                            <span style="color: #0f0;">🚀${name}</span>
                            <br/>
                            ${marker}${value[1]}<br/>
                            `;
                        } else {
                            result += `${marker}${value[1]}<br/>`;
                        }
                    }
                    return result;
                    // return 'bug ？？？';
                },
            },
            series: (v) => {
                Array.from(v).forEach((e, idx) => {
                    e.areaStyle = 'value';
                });
                return v;
            },
        },
    };
},

    async getData () {
        this.chartLoading = true;
        this.dataEmpty = false;
        const params = this.getParams();
        if(this.filterData.isDefaultTime) {
            params.starttime = dayjs(this.filterData.defaultEndTime).subtract(12, 'months').startOf('months').format('YYYY-MM-DD');
            params.endtime = dayjs(this.filterData.defaultEndTime).subtract(1, 'months').endOf('months').format('YYYY-MM-DD');
        }
        const res = await APIService.getChart(params).finally(() => {
            this.chartLoading = false;
        });
        const {data, labels, xAxisKey: key} = res.data.data;
        // console.log('data, labels', data, labels);
        // console.log('key', key);
        const columns = labels.map(obj => obj.key);
        // key: "其他"
        // title: "其他"
        const rows = this.formatRows(data, columns);
        this.chartExtend.stack.cols = columns;
        console.log('rows', rows);
        this.chartData = {
            columns: [key, ...columns],
            rows: this.formatRows(data, columns),
            // columns: ['日期', '访问用户', '下单用户', '下单率'],
            // rows: [
            //     { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            //     { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            //     { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 1.76 },
            //     { '日期': '1/4', '访问用户': 1723, '下单用户': 2423, '下单率': 0.49 },
            //     { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            //     { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
            // ],
        };
        // const id = this.$refs.chart.echarts.id;
        // const div = document.querySelector(`[_echarts_instance_="${id}"]`);
        // if(div) {
        //     div.style.display = 'block';
        // }
        // if (!data.length) {
        //     if(div) {
        //         div.style.display = 'none';
        //     }
        //     this.dataEmpty = true;
        //     return;
        // }
    },

API

refs

https://v-charts.xgqfrms.xyz/#/line?id=settings-配置项

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---