echarts 折线图上只显示某一个点值

<template>

  <div>

    <!-- 数据来源 -->

    <div class="echarts" ref="echartsRef"></div>

  </div>

</template>

<script setup lang='ts' name="reconciled">

import { ref } from "vue";

import * as echarts from "echarts";

import { useEcharts } from "@/disco/hooks/useEcharts";

const echartsRef = ref<HTMLElement>();

const initChart = (data: any) => {

  console.log(data)

    const myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);

    let dataC1 = [20, 30, 60, 40, 50, 30];

    let xData = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'];

    // let xData = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'];

   // const fontColor = '#30eee9';

    const option = {

        backgroundColor: '#ffffff',

        grid: {

            left: '5%',

            right: '2%',

            top: '10%',

            bottom: '15%',

        },

        legend: {

            data:['a'],

            textStyle:{

                color:'#A9DDEE',

            },

         

            orient: 'horizontal',

            icon: 'rect',

            top: '5',

            right: '5%',

            itemGap: 10,

            itemWidth: 12,

            itemHeight: 7,

        },

           

        tooltip: {

            trigger: 'axis',

            axisPointer: {

                type: 'line',

                lineStyle: {

                    color: '#57617B',

                },

            },

        },

        xAxis: {

          type: 'category',

          boundaryGap: false, //顶头显示

         //横坐标下方坐标线线头

          axisTick: {

              show: false,

              lineStyle: {

                  color: '#3585d5',

              },

          },

          //true 显示横坐标竖线

          splitLine: {

            show: false,

            lineStyle: {

              type: 'dashed',

              color: '#3585d5',

            }

          },

          //true显示下方的线

          axisLine: {

              show: false,

              lineStyle: {

                  color: '#3585d5',

              },

          },

         // axisTick: { show: false },

         //true显示横坐标的字 false:不显示

          axisLabel: { show: false },

          // axisLabel: {

          //     fontSize: 18,

          // },

          data: xData,

        },

        yAxis: {

          type: 'value',

          min: 0,

          // max: 140,

          splitNumber: 2,

          splitLine: {

              show: true,

              lineStyle: {

                color: '#E2E2EA',

                type: 'dashed',

              }

          },

          axisLine: {

            show: false,

          },

          axisLabel: {

            show: false,

            margin: 20,

            textStyle: {

              color: '#d1e6eb',

            },

          },

          axisTick: {

            show: false,

          },

          boundaryGap: false,

        },

        series: [

          {

            name: '',

            type: 'line',

            stack: '',

            smooth: true,

            showAllSymbol: true,

           // symbol: 'circle', //none 不设置 circle 设定为实心点

            showSymbol: true,//是否默认展示圆点

            symbolSize: 12, //设定实心点的大小

            symbol: (value:any,ind:any)=>{

              //console.log(value,ind)

              value = 60; //如果数字等于60 只显示为60的点

              if (value == ind.value) {

                  return "circle";

              } else {

                return "none";

              }

            },

            //是否显示点上的值

            label: {

                show: false,

                position: 'top',

                textStyle: {

                    color: '#00b3f4',

                }

            },

            lineStyle: {

              normal: {

                width: 2,

                color: "rgba(25,163,223,1)", // 线条颜色

              },

              borderColor: 'rgba(0,0,0,.4)',

            },

            itemStyle: { //线区域设置

              color: "#00b3f4",

              borderColor: "#fff",

              borderWidth: 3,

              // shadowColor: 'rgba(22, 137, 229)',

              // shadowBlur: 14

            },

            areaStyle: {

                normal: {

                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

                            offset: 0,

                            color: 'rgba(0,179,244,0.3)'

                        },

                        {

                            offset: 1,

                            color: 'rgba(0,179,244,0)'

                        }

                    ], false),

                    shadowColor: 'rgba(0,179,244, 0.9)',

                    shadowBlur: 20

                }

            },

            // itemStyle: {

             

            //   color: "#fff",

            //   borderColor: "#fff",

            //   borderWidth: 3,

            //   shadowColor: 'rgba(0, 0, 0, .3)',

            //   shadowBlur: 0,

            //   shadowOffsetY: 2,

            //   shadowOffsetX: 2,

            //     normal: { //改变折线点的颜色

            //       color: '#1F824E',

            //       lineStyle: {//改变折线颜色

            //           color: '#1F824E',

            //           width: 3,

            //       },

            //       areaStyle: {

            //         //color: '#94C9EC'

            //         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [

            //             {

            //                 offset: 0.4,

            //                 color: 'rgba(240, 250, 230,0.1)',

            //             },

            //             {

            //                 offset: 1,

            //                 color: 'rgba(240, 250, 230,0.9)',

            //             },

            //         ]),

            //       },

            //   },

            // },

            data: dataC1,

          },

        ],

    };

 

  useEcharts(myChart, option);

}

defineExpose({

  initChart

});

</script>

<style lang="scss" scoped>

.echarts {

  width: 212px;

  height: 170px;

}

</style>