vue 使用echarts绘制折线图

Lyndon1107

已于 2024-01-10 16:55:59 修改

阅读量9.6k

点赞数 3

分类专栏：前端文章标签： echarts

于 2021-08-24 17:37:12 首次发布

本文链接：https://blog.csdn.net/qq_19636353/article/details/119895029

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue 使用echarts绘制折线图

实时曲线图，查询前15条数据。后台使用redis的 LPUSH命令构建List。

在这里插入图片描述

代码

<template>
    <div>
        <!-- 方法一，注册echarts到vue的原型对象中，指定某个div作为echarts的画布 -->
        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="24">
                <el-card shadow="always">
                    <el-input v-model="query.deviceId" placeholder="请输入设备编号" style="width:250px;" clearable></el-input>
                    <el-button icon="el-icon-search" @click="getDevMeterHistoryData()">查询</el-button>
                    <div id="myChart" style="{width:1000px; height:500px;}"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { fetchGet } from "@/assets/js/api";
export default {
    name: "dashboard",
    data() {
        return {
            query: {
                deviceId: "884A1882E80A",
                fields: "",
            },
            myChart: "",
            option: [],
            minData: 0,
            data_totalVoltage: [],
            data_electricCurrentData: [],
            data_activePower: [],
            data_powerFactor: [],
            data_frequency: [],
            data_energy: [],
        };
    },
    mounted() {
        this.initChart();
        this.getDevMeterHistoryData();
        this.getLegendSelectChanged();
    },
    methods: {
        initChart() {
            //echarts.init(document.getElementById("myChart")).dispose(); //销毁前一个echarts实例
            //获取容器元素,初始化echarts实例
            this.myChart = this.$echarts.init(document.getElementById("myChart"));
            this.option = {
                title: { text: "" },
                tooltip: {
                    trigger: "axis",
                    textStyle: { align: "left" },
                },
                toolBox: {
                    show: true,
                    feature: {
                        dataView:{show: true},
                        dataZoom:{show: true},//数据缩放视图
                        magicType:{type :['line','bar']},
                        restore:{show: true},
                        saveAsImage: { show: true }
                    },
                },
                xAxis: {
                    data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
                    splitLine: { show: false }, //去除网格分割线（默认false）
                    splitArea: { show: false }, //保留网格区域
                    axisLine: {
                        lineStyle: {
                            //坐标线
                            type: "solid",
                            //color: '#d8d8d8',//轴的颜 色
                            width: "1", //坐标线宽度
                        },
                    },
                    axisTick: {
                        show: false, //x轴初始化不显示
                    },
                },
                yAxis: {
                    name: "", //y轴的名称（单位）
                    //max: '241.0',//y轴最大刻度
                    min: 0, //y轴最小刻度
                    type: "value",
                    axisLine: {
                        show: false,
                    },
                },
                legend: {
                    //itemWidth: 34, //图例
                    //itemHeight: 14,
                    align: "left",
                    data: [ "电压", "电流", "有功功率", "频率", "功率因数", "用电量"],
                },
                series: [
                    { name: "电压", type: "line", data: [], , smooth: true }, //smooth 是否平滑 也可以设置为 0到1 的值，表示平滑程度
                    { name: "电流", type: "line", data: [] },
                    { name: "有功功率", type: "line", data: [] },
                    { name: "频率", type: "line", data: [] },
                    { name: "功率因数", type: "line", data: [] },
                    { name: "用电量", type: "line", data: [] },
                ],
            };
            //重绘, 设置option
            window.addEventListener("resize", this.myChart.resize());
            this.myChart.setOption(this.option);
            this.getLegendSelectChanged();
        },
        getDevMeterHistoryData() {
            fetchGet("getDevMeterHistoryData", {
                deviceId: this.query.deviceId,
                pageNo: 1,
                pageSize: 15,
            }).then((rsp) => {
                if (rsp.code == 0) {
                    this.setChartData(rsp.data);
                }
            });
        },
        //设置图表实体数据
        setChartData(rspData) {
            let opt = this.option;
            opt.xAxis.data = rspData.xAxisData;
            opt.legend.data = [];
            opt.series = [];
            //
            for (var i = 0; i < rspData.data.length; i++) {
                let vo = rspData.data[i];
                if (rspData.size == 1) {
                    opt.yAxis.name = vo.unit;
                    opt.yAxis.min = vo.minData;
                }
                opt.legend.data.push(vo.name);
                //
                // 给一个对象中增加属性markPoint
                var markPoint = {data: [{type: 'max', name: '最大值'}]}
                this.$set(vo, 'markPoint', markPoint)
                console.log(vo)
                opt.series.push(vo);
            }
            this.myChart.setOption(opt);
        },
        getLegendSelectChanged() {
            let opt = this.option;
            this.myChart.on("legendselectchanged", function (param) {
                var keys = Object.keys(param.selected);
                var values = Object.values(param.selected);
                //
                console.log(param.name);
                //
                if (keys == null || keys.length == 0 || opt.series == null) {
                    return;
                }
                for (var i = 0; i < opt.series.length; i++) {
                    if (param.name != keys[i]) {
                        //根据点击的参数，如果只有一个数据展示，则动态设置y轴的最小参考数值（未处理）
                        //this.minData = opt.series[i].minData;
                        //console.log(opt.series[i]);
                    } else {
                        //console.log("1 minData:" + this.minData +", series minData:" + opt.series[i].minData);
                        this.minData = opt.series[i].minData;
                        console.log("2 minData:" + this.minData + ", series minData:" + opt.series[i].minData);//
                    }
                }
            });
            this.myChart.setOption(opt);
        }
    },
};
</script>

使用$set 给一个对象中增加属性

//给一个对象中增加属性markPoint
var markPoint = {data: [{type: 'max', name: '最大值'}]}
this.$set(vo, 'markPoint', markPoint)
console.log(vo)
opt.series.push(vo);

接口实体参数

{
    "result":"SUCCESS",
    "code":"0",
    "msg":"ok",
    "data":{
        "xAxisData":["17:46:20","17:46:40","17:46:50","17:47:00","17:47:10","17:47:20","17:47:40", "17:47:50","17:48:00","17:48:10","17:48:20","17:48:30","17:48:50","17:49:00","17:49:10"],
        "data":[{
                "field":"voltage",
                "id":"voltage",
                "name":"电压",
                "unit":"V",
                "minData":240,
                "type":"line",
                "data":[236.71,236.7,236.82,236.62,236.75,236.58,236.6,236.53,236.68,236.52,236.65,236.44,236.95,236.84,236.81]
            },{
                "field":"electricCurrent",
                "id":"electricCurrent",
                "name":"电流",
                "unit":"mA",
                "minData":5,
                "type":"line",
                "data":[0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002]
            },{
                "field":"activePower",
                "id":"activePower",
                "name":"有功功率",
                "unit":"KW",
                "minData":0,
                "type":"line",
                "data":[0.537,0.534,0.53,0.531,0.53,0.529,0.533, 0.527,0.525, 0.537,0.532,0.535,0.526, 0.53,0.528]
            },{
                "field":"frequency",
                "id":"frequency",
                "name":"频率",
                "unit":"Hz",
                "minData":51,
                "type":"line",
                "data":[49.9,49.92,49.94,49.92,49.88,49.88,49.88,49.88,49.82,49.9,49.9,49.88,49.92,49.96,49.9]
            },{
                "field":"powerFactor",
                "id":"powerFactor",
                "name":"功率因数",
                "unit":"λ",
                "minData":0,
                "type":"line",
                "data":[0.88,0.87,0.87,0.86,0.87,0.87,0.87,0.86,0.87,0.88,0.87,0.87,0.86,0.87,0.88 ]
            },{
                "field":"energy",
                "id":"energy",
                "name":"用电量",
                "unit":"千瓦·时(度)",
                "minData":0,
                "type":"line",
                "data":[1.784, 1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784]
            }
        ]
    }
}

参考资料

vue中绘制echarts折线图
https://www.cnblogs.com/yanl55555/p/12544109.html

echarts 改变折线图曲线颜色、区域颜色
https://www.cnblogs.com/justyouadmin/p/11421680.html

echarts中设置markPoint
https://www.cnblogs.com/aixuexi-504682107/p/13575733.html

markPoint: {
    data: [
        {
            type: "max",
            name: "最大值",
            color: "pink",
            itemStyle: {
                color: "rgba(115, 159, 250, .5)"
                },
                symbol: "rect",
                symbolSize: [25, 25], // 容器大小
                symbolOffset: [0, -15], //位置偏移
        },
        {
                type: "min",
                name: "最小值",
                color: "rgba(255, 148, 77, 1)",
                itemStyle: {
                    color: "rgba(255, 148, 77, .5)"
                    },
                    symbol: "rect",
                    symbolSize: [25, 25], // 容器大小
                    symbolOffset: [0, -15], //位置偏移
        },
    ]
},