在echarts官網(wǎng)上的散點(diǎn)圖的例子的x軸都是數(shù)字型的，沒(méi)有中文型的案例，所以在項(xiàng)目中遇到x軸為中文型的圖表是沒(méi)有案例參考，所以百度了一下，實(shí)現(xiàn)過(guò)程也很簡(jiǎn)單，但是還是記錄一下。

如果直接用官網(wǎng)上的案例配置[x,y]，散點(diǎn)圖上的點(diǎn)是沒(méi)有辦法顯示的。

echarts3.png

要單獨(dú)設(shè)置x軸的數(shù)據(jù)，并且根據(jù)x軸的數(shù)據(jù)獲取索引設(shè)置散點(diǎn)圖的data數(shù)據(jù)。以下是步驟：

1、下載echarts組件

npm install echarts -S

echarts1.png

2、在main.js中引入echarts組件

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

echarts2.png

源數(shù)據(jù)

list: [
    { date: "2023-07-07 10:00:00", num: 10 },
    { date: "2023-07-07 11:00:00", num: 20 },
    { date: "2023-07-07 12:00:00", num: 21 },
    { date: "2023-07-07 13:00:00", num: 14 },
    { date: "2023-07-07 14:00:00", num: 16 },
    { date: "2023-07-07 15:00:00", num: 10 },
    { date: "2023-07-07 16:00:00", num: 18 },
    { date: "2023-07-07 17:00:00", num: 19 },
    { date: "2023-07-07 18:00:00", num: 5 },
    { date: "2023-07-07 19:00:00", num: 9 },
    { date: "2023-07-07 20:00:00", num: 8 }
],

3、單獨(dú)配置x軸

// data
option: {
    xAxis: [{
        data:[]
    }],
    series: [
        {
            name: '',
            type: 'scatter',
            data: [],
            dimensions: ['x', 'y'],
            symbolSize: 10,
            large: true
        }
    ]
},
// methods
// 單獨(dú)配置x軸的數(shù)據(jù)
this.list.forEach(item => {
    this.option.xAxis[0].data.push(item.date)
})

4、配置散點(diǎn)圖data數(shù)據(jù)

// data
option: {
    series: [
        {
            name: '',
            type: 'scatter',
            data: [],
            dimensions: ['x', 'y'],
            symbolSize: 10,
            large: true
        }
    ]
},
// methods
// 根據(jù)x軸的數(shù)據(jù)，獲取散點(diǎn)圖數(shù)據(jù)的索引   
this.list.map(item => {
    this.option.series[0].data.push([
        this.option.xAxis[0].data.indexOf(item.date),
        item.num
    ])
})

完整代碼

<template>
    <div
      ref="echarts"
      class="echarts-box"
      style="width: 50%; height: 500px"
    ></div>
</template>

<script>
    export default {
        data: () => ({
            list: [
                { date: "2023-07-07 10:00:00", num: 10 },
                { date: "2023-07-07 11:00:00", num: 20 },
                { date: "2023-07-07 12:00:00", num: 21 },
                { date: "2023-07-07 13:00:00", num: 14 },
                { date: "2023-07-07 14:00:00", num: 16 },
                { date: "2023-07-07 15:00:00", num: 10 },
                { date: "2023-07-07 16:00:00", num: 18 },
                { date: "2023-07-07 17:00:00", num: 19 },
                { date: "2023-07-07 18:00:00", num: 5 },
                { date: "2023-07-07 19:00:00", num: 9 },
                { date: "2023-07-07 20:00:00", num: 8 }
            ],
            option: {
                title: {
                    text: ""
                },
                tooltip: {},
                xAxis: [{
                    data:[]
                }],
                yAxis: [{
                    scale:true
                }],
                gird: {
                    width: "10%"
                },
                dataZoom: [
                    {
                        type: 'inside'
                    },
                    {
                        // type: 'slider'
                    }
                ],
                animation: false,
                series: [
                    {
                        name: '',
                        type: 'scatter',
                        data: [],
                        dimensions: ['x', 'y'],
                        symbolSize: 10,
                        large: true
                    }
                ]
            },
        }),
        methods: {
            initEcharts() {
                let myChart = null
                // 單獨(dú)配置x軸的數(shù)據(jù)
                this.list.forEach(item => {
                    this.option.xAxis[0].data.push(item.date)
                })
                // 根據(jù)x軸的數(shù)據(jù)，獲取散點(diǎn)圖數(shù)據(jù)的索引   
                this.list.map(item => {
                    this.option.series[0].data.push([
                        his.option.xAxis[0].data.indexOf(item.date),
                        tem.num
                    ])
                })
                myChart = this.$echarts.init(this.$refs.echarts);
                myChart.setOption(this.option, true);
            }
        },
        mounted() {
            this.initEcharts();
        }
    };
</script>

效果圖

echarts4.png