vue之折线图

<template>
    <div style="width: 100%; height: 100%;overflow: scroll">
        <ve-line :data="data" :title="title" :settings="chartSettings" :legend="legend" :height="height" :grid="grid"
                 :xAxis="xAxis" :yAxis="yAxis" :tooltip="tooltip" :extend="chartExtend" :events="events"
                 :colors="colors" style="margin: 5px; border: solid 1px #1e1728;" @ready-once="readyOnce"></ve-line>
    </div>
</template>

<script>
    import "echarts/lib/component/legendScroll";
    import "echarts/lib/component/tooltip";
    import "echarts/lib/component/title";
    import VeLine from 'v-charts/lib/line.common'

    export default {
        name: 'LineChartWithArea',
        components: {
            VeLine
        },
        props: {
            height: String,
            data: Object,
            titleText: String,
            group: String
        },
        data() {
            let colors = [
                "#7eb26d",
                "#ffc107",
                "#673ab7",
                "#03a9f4",
                "#EF843C",
                "#E24D42",
                "#1F78C1",
                "#9c27b0",
                "#705DA0",
                "#508642",
                "#CCA300",
                "#447EBC",
                "#C15C17",
                "#890F02",
                "#0A437C",
                "#6D1F62",
                "#584477",
                "#db3c89",
                "#F4D598",
                "#70DBED",
                "#F9BA8F",
                "#AEA2E0",
                "#629E51",
                "#e53441",
                "#64B0C8",
                "#08209e",
                "#109e09",
                "#9e0c3d",
                "#20209e",
                "#1758a5",
                "#1758a5",
                "#1758a5",
                "#1758a5",
            ]
            return {
                events:{
                },
                title: {
                    text: ' ',
                    x: 'center',
                    y: 'top',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bold',
                        color: '#1c9ed2',
                    }
                },
                chartExtend: {
                    series(v) {
                        v.forEach((i, idx) => {
//                            i.areaStyle = {
//                                normal: {
//                                    color: colors[idx]
//                                }
//                            };
                            i.symbol = 'none';
                            i.itemStyle = {
                                normal: {
                                    lineStyle: {
                                        width: 1
                                    },
                                }
                            }

                        })
                        return v
                    },
                },
                colors: colors,
                chartSettings: {
                    area: false
                },
                legend: {
                    show: true,
                    x: 'center',
                    y: 'bottom',
                    icon: 'stack',
                    itemWidth: 10,
                    itemHeight: 10,
                    type: "scroll",
                    textStyle: {
                        color: '#f3f4f5'
                    },
                },
                tooltip: {
//                        confine: true,
                    show: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        let newParams = [];
                        let tooltipString = [];
                        newParams = [...params];
                        newParams.sort((a,b) => {return b.value[1] - a.value[1]});
                        newParams.forEach((p) => {
                            const cont = p.marker + ' ' + p.seriesName + ': ' + p.value[0] +"  " + p.value[1] + '<br/>';
                            tooltipString.push(cont);
                        });
                        return tooltipString.join('');
                    },

//                    formatter: function(params) {
//                        let astr = '';
//                        console.log(params);
//                        params.forEach(ele => {
//                            const data = ele.data
//                            for (const key in data) {
//                                // 不为0的展示
//                                    astr += `
//                    <div style="display: block;height:20px;width: 50%;float:left;">
//                      <i style="width: 10px;height: 10px;display: inline-block;background: ${ele.color};border-radius: 10px;"></i>
//                      <span>${ele.seriesName}: ${data[key]}</span>
//                    </div>
//                 `
//                            }
//                        })
//                        const b = '<div style="width: 100%;">' + astr + '<div>'
//                        return b
//                    },
//                    position: function(point, params, dom, rect, size) {
//                        return [point[1], 0]
//                    }
//                    position: function(point, params, dom, rect, size){
//                        return [0,point[1]];
//                    },
                    extraCssText:'text-align: right; overflow: scroll',
                    position: function (pt) {
                        return ["10%", '10%'];
                    }
                },
                grid: {
                    left: '25px',
                    right: '20px',
                    top: '15%',
                    bottom: '15%',
                    containLabel: true,
                    borderColor: '#ffffff'
                },
                xAxis: [
                    {
                        axisLabel: {
                            fontSize: 16,
                            color: '#e3f1ff'
                        },
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#0b3e53"
                            }
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "#5794d9"
                            }
                        },
                    },
                ],
                yAxis: [
                    {
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "#5794d9"
                            }
                        },
                        axisLabel: {
                            fontSize: 16,
                            color: '#e3f1ff'
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#0b3e53"
                            }
                        },
                    },``
                ],
            }
        },
        mounted() {
        },
        watch: {
            titleText: {
                handler(newName) {
                    console.log(newName)
                    this.title.text = newName
                },
                deep: true,
                immediate: true
            },
        },
        methods: {
            readyOnce(echart, options, echartsLib){
                console.log(this.group)
                if(this.group !== undefined && this.group !== "") {
                    echart.group = this.group;
                    echartsLib.connect(this.group);
                }

                let triggerAction = function(action, selected) {
                    let legend = [];

                    for ( let name in selected) {
                        if (selected.hasOwnProperty(name)) {
                            legend.push({name: name});
                        }
                    }

                    echart.dispatchAction({
                        type: action,
                        batch: legend
                    });
                };

                let isFirstUnSelect = function(selected) {

                    let unSelectedCount = 0;
                    for ( let name in selected) {
                        if (!selected.hasOwnProperty(name)) {
                            continue;
                        }

                        if (selected[name] === false) {
                            ++unSelectedCount;
                        }
                    }
                    return unSelectedCount===1;
                };

                let isAllUnSelected = function(selected) {
                    let selectedCount = 0;
                    for ( let name in selected) {
                        if (!selected.hasOwnProperty(name)) {
                            continue;
                        }

                        if (selected[name] === true) {
                            ++selectedCount;
                        }
                    }
                    return selectedCount===0;
                };

                this.events = {
                    legendselectchanged: function(obj) {
                        let selected = obj.selected;
                        let legend = obj.name;
                        if (selected !== undefined) {

                            if (isFirstUnSelect(selected)) {
                                triggerAction('legendToggleSelect', selected);
                            } else if (isAllUnSelected(selected)) {
                                triggerAction('legendSelect', selected);

                            }
                        }

                    }
                }
            }
        },
    }
</script>