How to configure Echarts in Dashboard 2?

Dashboard
4

Here is a very basic working demo to get you moving.

chrome_3bl8y1grck

hook these 2 injects up to the input of your template

[{"id":"2d2e714030317eee","type":"inject","z":"85fb8b6df2be7ac8","name":"","props":[{"p":"payload"},{"p":"payload.title","v":"Average per hour","vt":"str"},{"p":"payload.labels","v":"[\"07:00\",\"08:00\",\"09:00\",\"10:00\",\"11:00\",\"12:00\",\"13:00\",\"14:00\",\"15:00\",\"16:00\",\"17:00\",\"18:00\"]","vt":"json"},{"p":"payload.data","v":"[8600, 8750, 7800, 8700, 9600, 6400, 5600, 4750, 5980, 6000, 5555, 5150]","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"data","payload":"{}","payloadType":"json","x":1210,"y":540,"wires":[["29ee8b5b2da056b6"]]},{"id":"b0e5da946de25ea9","type":"inject","z":"85fb8b6df2be7ac8","name":"","props":[{"p":"payload"},{"p":"payload.title","v":"Tons / Hour","vt":"str"},{"p":"payload.labels","v":"[\"07:00\",\"08:00\",\"09:00\",\"10:00\",\"11:00\",\"12:00\",\"01:00\",\"02:00\",\"03:00\",\"04:00\",\"05:00\",\"06:00\"]","vt":"json"},{"p":"payload.data","v":"[5300, 9280, 11250, 1260, 2270, 4300, 5550, 2500, 2400, 4390, 9380, 12390, 10400, 11500, 7600, 8750, 4800, 8700, 9600, 4400, 6600, 6750, 8980, 7000]","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"data","payload":"{}","payloadType":"json","x":1210,"y":580,"wires":[["29ee8b5b2da056b6"]]}]

Here is the template code - its not pretty but it works (I will leave it to you to re-arrange it for the parts you want to automate)

<template>
    <div ref="charttpw" style="width: 500px; height: 200px"></div>
</template>

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

<script>

    export default {
        data() {
            return {
                myChart: null
            }
        },
        watch: {
            msg: function () {
                if (this.msg.topic === "data") {
                    this.update(this.msg.payload.labels, this.msg.payload.data, this.msg.payload.title)
                }
            }
        },
        mounted() {
            let interval = setInterval(() => {
                if (window.echarts) {
                    clearInterval(interval);
                    // now it is loaded, we can initialise and use it
                    this.init();
                }
            }, 100);
        },
        methods: {
            init: function () {
                this.myChart = echarts.init(this.$refs.charttpw, "dark");
                // dummy / test data
                const labels = ['07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00']
                const data = [5300, 9280, 11250, 1260, 2270, 4300, 5550, 2500, 2400, 4390, 9380, 12390] 
                const title = "Tons per Hour"
                this.update(labels, data, title)
            },
            update: function (xAxisData, data, title) {
                this.myChart.setOption({
                    title: {
                        text: title
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                        },
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {},
                        },
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        //top: '30%',
                    containLabel: true,
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: xAxisData,
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            formatter: "{value} T",
                        },
                        axisPointer: {
                            snap: true,
                        },
                    },
                    visualMap: {
                        show: false,
                        dimension: 0,
                        pieces: [
                            { lte: 9, color: "green" },
                            { gt: 9, lte: 11, color: "red" },
                            { gt: 11, color: "green" },
                        ],
                    },
                    series: [{
                        name: "Tons",
                        type: "line",
                        smooth: true,
                        // prettier-ignore
                        data: data,
                        markArea: {
                        itemStyle: {
                            color: "rgba(255, 173, 177, 0.4)",
                        },
                        data: [[{ name: "Max Peak", xAxis: "9:00" }, { xAxis: "11:00" }]],
                        },
                    }],
                });
            }
        }
    }
</script>
2 Likes