在echarts官网上的散点图的例子的x轴都是数字型的，没有中文型的案例，所以在项目中遇到x轴为中文型的图表是没有案例参考，所以百度了一下，实现过程也很简单，但是还是记录一下。

如果直接用官网上的案例配置[x,y]，散点图上的点是没有办法显示的。

echarts3.png

要单独设置x轴的数据，并且根据x轴的数据获取索引设置散点图的data数据。以下是步骤：

1、下载echarts组件

npm install echarts -S

echarts1.png

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

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

echarts2.png

源数据

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、单独配置x轴

// data
option: {
    xAxis: [{
        data:[]
    }],
    series: [
        {
            name: '',
            type: 'scatter',
            data: [],
            dimensions: ['x', 'y'],
            symbolSize: 10,
            large: true
        }
    ]
},
// methods
// 单独配置x轴的数据
this.list.forEach(item => {
    this.option.xAxis[0].data.push(item.date)
})

4、配置散点图data数据

// data
option: {
    series: [
        {
            name: '',
            type: 'scatter',
            data: [],
            dimensions: ['x', 'y'],
            symbolSize: 10,
            large: true
        }
    ]
},
// methods
// 根据x轴的数据，获取散点图数据的索引   
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
                // 单独配置x轴的数据
                this.list.forEach(item => {
                    this.option.xAxis[0].data.push(item.date)
                })
                // 根据x轴的数据，获取散点图数据的索引   
                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