taos/src/components/chart/line/img-line-chart.vue

<template>
    <div class="chart" :id="id"></div>
</template>

<script>
    import util from "@/helper/util.js";
    import partten from "@/helper/partten.js";
    import * as echarts from "echarts";

    export default {
        name: "img-line-chart",
        componentName: "img-line-chart",
        props: {
            width: {
                type: String,
                default: "100%",
            },
            height: {
                type: String,
                default: "13.889vh",
            },
            // 数据
            list: {
                type: Array,
                default: () => [
                    {
                        title: "日发电量",
                        yAxisIndex: 0,
                        value: [
                            {
                                text: "1",
                                value: 1,
                                weather: "sun",
                                direction: "n",
                                angle: 0,
                            },
                            {
                                text: "2",
                                value: 2,
                                weather: "sun",
                                direction: "s",
                                angle: 10,
                            },
                            {
                                text: "3",
                                value: 1,
                                weather: "sun",
                                direction: "w",
                                angle: 40,
                            },
                            {
                                text: "4",
                                value: 3,
                                weather: "sun",
                                direction: "e",
                                angle: 80,
                            },
                            {
                                text: "5",
                                value: 3,
                                weather: "sun",
                                direction: "nw",
                                angle: 120,
                            },
                            {
                                text: "6",
                                value: 3,
                                weather: "sun",
                                direction: "ne",
                                angle: 150,
                            },
                            {
                                text: "7",
                                value: 3,
                                weather: "sun",
                                direction: "se",
                                angle: 180,
                            },
                            {
                                text: "8",
                                value: 3,
                                weather: "sun",
                                direction: "sw",
                                angle: 270,
                            },
                            {
                                text: "9",
                                value: 3,
                                weather: "sun",
                                direction: "sw",
                                angle: 290,
                            },
                            {
                                text: "10",
                                value: 3,
                                weather: "sun",
                                direction: "sw",
                                angle: 10,
                            },
                            {
                                text: "11",
                                value: 3,
                                weather: "sun",
                                direction: "sw",
                                angle: 10,
                            },
                            {
                                text: "12",
                                value: 3,
                                weather: "sun",
                                direction: "sw",
                                angle: 10,
                            },
                            {
                                text: "13",
                                value: 3,
                                weather: "sun",
                                direction: "sw",
                                angle: 10,
                            },
                            {
                                text: "14",
                                value: 3,
                                weather: "sun",
                                direction: "sw",
                                angle: 10,
                            },
                            {
                                text: "15",
                                value: 3,
                                weather: "sun",
                                direction: "sw",
                                angle: 10,
                            },
                            {
                                text: "16",
                                value: 3,
                                weather: "sun",
                                direction: "sw",
                                angle: 10,
                            },
                        ],
                    },
                    {
                        title: "上网电量",
                        yAxisIndex: 0,
                        value: [
                            {
                                text: "1",
                                value: 1,
                            },
                            {
                                text: "2",
                                value: 2,
                            },
                            {
                                text: "3",
                                value: 1,
                            },
                            {
                                text: "4",
                                value: 3,
                            },
                        ],
                    },
                ],
            },
            // 单位
            units: {
                type: Array,
                default: () => ["(MW)"],
            },
            showLegend: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                id: "",
                chart: null,
                color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
                imgs: {
                    sun: require("@assets/png/weather/sun.png"),
                    cloud: require("@assets/png/weather/cloud.png"),
                    rain: require("@assets/png/weather/rain.png"),
                },
                directions: {
                    n: require("@assets/png/direction/n.svg"),
                    s: require("@assets/png/direction/s.svg"),
                    w: require("@assets/png/direction/w.svg"),
                    e: require("@assets/png/direction/e.svg"),
                    nw: require("@assets/png/direction/nw.svg"),
                    ne: require("@assets/png/direction/ne.svg"),
                    sw: require("@assets/png/direction/sw.svg"),
                    se: require("@assets/png/direction/se.svg"),
                },
                angles: []
            };
        },
        computed: {
            legend() {
                return this.list.map((t) => {
                    return t.title;
                });
            },
            xdata() {
                return this.list[0].value.map((t) => {
                    return t.text;
                });
            },
            yAxis() {
                let result = [
                    {
                        type: "value",
                        name: "",
                        axisLabel: {
                            show: false,
                        },
                        //分格线
                        splitLine: {
                            show: false,
                        },
                        min: 0,
                        max: 10,
                    },
                ];
                this.units.forEach((value, index) => {
                    result.push({
                        type: "value",
                        name: value,
                        axisLabel: {
                            formatter: "{value}",
                            fontSize: util.vh(14),
                        },
                        //分格线
                        splitLine: {
                            lineStyle: {
                                color: partten.getColor("gray"),
                                type: "dashed",
                            },
                        },
                    });
                });

                return result;
            },
            series() {
                let result = [];

                this.list.forEach((value, index) => {
                    if (index == 0) {
                        result.push({
                            name: value.title,
                            type: "line",
                            smooth: true,
                            zlevel: index,
                            lineStyle: {
                                normal: {
                                    color: this.color[index],
                                    width: 1,
                                },
                            },
                            yAxisIndex: value.yAxisIndex,
                            data: value.value.map((t) => {
                                return {
                                    value: t.value,
                                    label: {
                                        show: true,
                                        position: "top",
                                        formatter: function (e) {
                                            return ["  {weather| }"];
                                        },
                                        rich: {
                                            weather: {
                                                height: 15,
                                                backgroundColor: {
                                                    image: this.imgs[t.weather],
                                                },
                                            },
                                        },
                                        borderWidth: 1,
                                        borderRadius: 4,
                                        padding: [4, 10],
                                        lineHeight: 26,
                                        distance: 20,
                                    },
                                };
                            }),
                        });
                        result.push({
                            name: "风向",
                            type: "bar",
                            smooth: true,
                            zlevel: 9999,
                            lineStyle: {
                                normal: {
                                    color: this.color[index],
                                    width: 1,
                                },
                            },
                            yAxisIndex: 0,
                            barGap: "0%",
                            barCategoryGap: "0%",
                            clip: false,
                            data: value.value.map((t) => {
                                return {
                                    value: -2,
                                    label: {
                                        show: true,
                                        position: "inside",
                                        formatter: function (e) {
                                            return ["  {direction| }"];
                                        },
                                        rich: {
                                            direction: {
                                                height: 20,
                                                backgroundColor: {
                                                    image: this.angles[parseInt(t.angle) % 360],
                                                },
                                            },
                                        },
                                        borderWidth: 1,
                                        borderRadius: 4,
                                        padding: [4, 10],
                                        lineHeight: 26,
                                        distance: 20,
                                    },
                                    itemStyle: {
                                        borderWidth: 1,
                                        borderColor: "#606769",
                                        color: "transparent",
                                    },
                                };
                            }),
                        });
                    } else {
                        result.push({
                            name: value.title,
                            type: "line",
                            smooth: true,
                            zlevel: index,
                            label: {
                                show: false,
                                position: "top",
                                borderWidth: 1,
                                borderRadius: 4,
                                padding: [4, 10],
                                lineHeight: 26,
                                distance: 20,
                            },
                            lineStyle: {
                                normal: {
                                    color: this.color[index],
                                    width: 1,
                                },
                            },
                            yAxisIndex: value.yAxisIndex,
                            data: value.value.map((t) => {
                                return t.value;
                            }),
                        });
                    }
                });

                return result;
            },
        },
        methods: {
            initChart() {
                const chart = echarts.init(this.$el);
                let option = {
                    color: this.color,
                    tooltip: {
                        trigger: "axis",
                        backgroundColor: "rgba(0,0,0,0.4)",
                        textStyle: {
                            color: "#fff",
                            fontSize: util.vh(16),
                        },
                        formatter: function (params) {
                            let str = "";
                            for (let i = 0; i < params.length; i++) {
                                if (params[i].seriesName == "风向") {
                                    continue;
                                }
                                if (i == 0) {
                                    str += `${params[i].name}<br/>${params[i].seriesName}: ${
                                        params[i].data.value ? params[i].data.value : params[i].data
                                    }<br/>`;
                                    continue;
                                }
                                str += `${params[i].seriesName}: ${
                                    params[i].data.value ? params[i].data.value : params[i].data
                                }<br/>`;
                            }
                            return str;
                        },
                    },
                    legend: {
                        show: this.showLegend,
                        data: this.legend,
                        right: 56,
                        icon: "circle",
                        itemWidth: 6,
                        inactiveColor: partten.getColor("gray"),
                        textStyle: {
                            color: partten.getColor("grayl"),
                            fontSize: 12,
                        },
                    },
                    grid: {
                        top: 32,
                        left: 8,
                        right: 8,
                        bottom: 32,
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: "category",
                            // boundaryGap: false,
                            axisLabel: {
                                formatter: "{value}",
                                fontSize: 14,
                                textStyle: {
                                    color: partten.getColor("gray"),
                                },
                            },
                            data: this.xdata,
                            offset: 32,
                            axisLine: { onZero: true },
                        },
                    ],
                    yAxis: this.yAxis,
                    series: this.series,
                };

                chart.clear();
                chart.setOption(option);

                this.resize = function () {
                    chart.resize();
                };

                window.addEventListener("resize", this.resize);
            },
        },
        created() {
            this.id = "pie-chart-" + util.newGUID();
            for (let i = 0; i <= 360; i++) {
                this.angles.push(require(`@assets/png/angle/angle${i}.svg`));
            }
        },
        mounted() {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.$el.style.width = this.width;
                    this.$el.style.height = this.height;
                    this.initChart();
                }, 1000);
            });
        },
        updated() {
            this.$nextTick(() => {
                this.initChart();
            });
        },
        unmounted() {
            window.removeEventListener("resize", this.resize);
        },
    };
</script>

<style lang="less">
    .chart {
        width: 100%;
        height: 100%;
        display: inline-block;
    }
</style>