boss_app/components/echarts/line.vue

<template>
<view class="charts-box">
    <qiun-data-charts :type="type" :opts="opts" :legend="false" :errorShow="true" errorMessage="暂无数据" :chartData="chartData" v-if="chartData.categories.length > 0 && chartData.series.length > 0" />
    <u-empty v-else mode="data" />
</view>
</template>

<script>
export default {
    // :chartData="chartData"
    //     :errorShow="chartData.categories.length === 0 || chartData.series.length === 0"
    props: {
        //图表数据
        chartData: {
            type: Object,
            default: () => {
                return {
                    categories: ["1月", "2月", "3月", "4月", "5月", "6月"],
                    series: [{
                            name: "无",
                            data: []
                        },
                        {
                            name: "无",
                            data: []
                        },
                        {
                            name: "无",
                            data: []
                        }
                    ]
                };
            }
        },
        //图表类型
        type: {
            type: String,
            default: "line"
        }
    },
    watch: {
        chartData(newVal, oldVal) {
            console.log('newVal', newVal);
        }
    },
    data() {
        return {
            // chartData: {},
            //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
            opts: {
                color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding: [15, 10, 0, 15],
                enableScroll: false,
                legend: {
                    show: false
                },
                dataLabel: false,
                dataPointShape: false,
                xAxis: {
                    disableGrid: true
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 2
                },
                extra: {
                    line: {
                        type: "straight",
                        width: 2,
                        activeType: "hollow"
                    }
                }
            }
        };
    },
    mounted() {
        this.getServerData();
    },
    methods: {
        getServerData() {
            //模拟从服务器获取数据时的延时
            setTimeout(() => {
                //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
                let res = {
                    categories: ["1月", "2月", "3月", "4月", "5月", "6月"],
                    series: [{
                            name: "成交量A",
                            data: [35, 8, 25, 37, 4, 20]
                        },
                        {
                            name: "成交量B",
                            data: [70, 40, 65, 100, 44, 68]
                        },
                        {
                            name: "成交量C",
                            data: [100, 80, 95, 150, 112, 132]
                        }
                    ]
                };
                // this.chartData = JSON.parse(JSON.stringify(res));
            }, 0);
        },
    }
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>