react.js - echart 怎么把这个绿色拐点的圆点变小又不影响我的指示线的白色圆圈?

Question

怎么把这个绿色的圆点变小又不影响我的指示线的白色圆圈

data:[    {        "name": "1月",        "value": 286    },    {        "name": "2月",        "value": 294    },    {        "name": "3月",        "value": 342    },    {        "name": "4月",        "value": 315    },    {        "name": "5月",        "value": 259    },    {        "name": "6月",        "value": 444    },    {        "name": "7月",        "value": 408    },    {        "name": "8月",        "value": 307    },    {        "name": "9月",        "value": 325    },    {        "name": "10月",        "value": 411    },    {        "name": "11月",        "value": 0    },    {        "name": "12月",        "value": 0    }]

传进去的data:[    {        "name": "1月",        "value": 286    },    {        "name": "2月",        "value": 294    },    {        "name": "3月",        "value": 342    },    {        "name": "4月",        "value": 315    },    {        "name": "5月",        "value": 259    },    {        "name": "6月",        "value": 444    },    {        "name": "7月",        "value": 408    },    {        "name": "8月",        "value": 307    },    {        "name": "9月",        "value": 325    },    {        "name": "10月",        "value": 411    },    {        "name": "11月",        "value": 0    },    {        "name": "12月",        "value": 0    }]import React, { memo, useEffect, useRef, useState } from 'react';import * as echarts from 'echarts';import styles from './index.less';import useInterval from '@/hook/useInterval';interface IProps {  data: any;  width: string;  height: string;  unit: string;  color: string;  colors: string;  colorItemList?: any[];  onChangeValue?: (index: number) => void;}const color1s = ['#A4FFAE', '#7498FF'];const color2s = [  { start: '#B1FFB9', end: '#6EFF7D' },  { start: '#98B7FF', end: '#5B8DFF' },];const BzLine: React.FC<IProps> = (props) => {  const {    width,    height,    data,    unit,    colors,    color,    colorItemList = color2s,    onChangeValue,  } = props;  const chartRef = useRef<HTMLDivElement>(null);  var chartInstance = useRef<echarts.ECharts>(null);  const [currentIndex, setCurrentIndex] = useState<number>(-1);  const [isBool, setIsBool] = useState<boolean>(true);  const [isBoolsyboolSize, setisBoolsyboolSize] = useState<any>(6);  const optionData: any = {    hoverLayerThreshold: 300,    grid: {      top: 30,      left: 0,      right: 0,      bottom: 0,      containLabel: true    },    tooltip: {      trigger: 'axis',      backgroundColor: 'rgba(0, 14, 24, 0.65)',      borderRadius: 4,      borderWidth: 0, borderColor: 'rgba(0, 14, 24, 0.65)',      textStyle: {        color: '#FFFFFF',        lineHeigt: 16,        fontSize: 16,        fontFamily: 'AlibabaPuHuiTi-2-65-Medium',        align: 'left',      },      axisPointer: {// 坐标轴指示器        show: true,        lineStyle: {          type: 'solid',          width: 2,          color: {            type: 'linear',            x: 0,            y: 0,            x2: 0,            y2: 1,            colorStops: [              {                offset: 0,                color: '#FFFFFF00', // 0% 处的颜色              },              {                offset: 1,                color: '#FFFFFF', // 100% 处的颜色              },            ],            global: false, // 缺省为 false          },        },      },      padding: [8, 8],      formatter: (params: any) => {        console.log('测试轮播',params[0].dataIndex)        setisBoolsyboolSize(20)        // optionData.series[0].symbolSize=20        let name = params[0].name;        let value = params?.[0]?.data;        value = !isNaN(value) ? Number(value) : 0;        if (value > 1000) {          value = value.toLocaleString();        }        // return `        //   <div style="font-size: 16px; font-weight: 600;">${name}：<span style="color: #EFFFAD">${value}</span>${unit}</div>        // `;        return `        <div style="display: flex;align-items: center;color: #FFFFFF;font-size: 16px; font-weight:normal;font-family: 'AlibabaPuHuiTi-2-65-Medium';">${name}：<span style="color: #FFF0AD;font-size: 18px; font-style: normal;  font-family: 'AlibabaPuHuiTi-2-85-Bold';">${value}</span>${unit}</div>      `;      },      // textStyle: {      //   color: '#FFFFFF',      //   fontSize: 12,      //   align: 'left',      // },    },    xAxis: {      axisLabel: {        color: 'rgba(255, 255, 255, 1)',        fontSize: 18,        lineHeight: 19,        fontFamily: 'AlibabaPuHuiTi-2-75-SemiBold',        interval: 0,      },      axisLine: {        lineStyle: {          color: 'rgba(205, 205, 205)',          width: 1.7,        }      },      axisTick: {        show: false,      },      data: data.map((item: any) => item.name),    },    yAxis: {      type: 'value',      name: unit,      axisLabel: {        color: 'rgba(255, 255, 255, 1)',        fontSize: 18,        lineHeight: 19,        fontFamily: 'AlibabaPuHuiTi-2-65-Medium',        opacity: 0.8,      },      // smooth: false,            // showSymbol: false,      // // symbolSize: 2,      // symbol: 'circle',      // emphasis: {      //   itemStyle: {      //     color: {      //       type: 'radial',      //       x: 0.5,      //       y: 0.5,      //       r: 0.5,      //       colorStops: [      //         {      //           offset: 0,      //           color: '#fff', // 中心颜色      //         },      //         {      //           offset: 0.4,      //           color: '#fff',      //         },      //         {      //           offset: 0.5,      //           color: '#ffffff00',      //         },      //         {      //           offset: 1,      //           color: '#ffffff00',      //         },      //       ],      //     },      //     borderColor: '#FFFFFF',      //     borderWidth: 1,      //   },      // },      nameGap: 10,//nameGap 属性来设置与 y 轴的距离      nameTextStyle: {        color: 'rgba(255, 255, 255,1)',        fontSize: 18,        fontFamily: 'AlibabaPuHuiTi-2-75-SemiBold',        lineHeight: 21,        align: 'right',        padding: [0, 5, 0, 0],      },      axisLine: {        show: false,      },      axisTick: {        show: false,      },      splitLine: {        lineStyle: {          color: 'rgba(205, 205, 205, 0.2)',          type: 'dashed',          width: 1.7,        }      }    },    series: [      {        name: '重点项目',        type: 'line',        smooth: false,        lineStyle: {          color: {            type: 'linear',            x: 0,            y: 0,            x2: 1,            y2: 1,            colorStops: [{              offset: 0, color: colors // 0% 处的颜色            }, {              offset: 0.5, color: color // 0% 处的颜色            }, {              offset: 1, color: colors // 0% 处的颜色            }],            global: false // 缺省为 false          }        },        symbol: 'circle',        // symbolSize: [2, 2],        itemStyle: {          color: 'rgba(91, 167, 255, 1)',          borderColor: 'rgba(150, 180, 214, 0.57)',          borderWidth: 1,        },        symbolSize:18,        showSymbol: true,        emphasis: {          symbolSize: 36,          itemStyle: {            color: {              type: 'radial',              x: 0.5,              y: 0.5,              r: 0.5,              colorStops: [                {                  offset: 0,                  color: '#fff', // 中心颜色                },                {                  offset: 0.4,                  color: '#fff',                },                {                  offset: 0.5,                  color: '#ffffff00',                },                {                  offset: 1,                  color: '#ffffff00',                },              ],            },            borderColor: '#FFFFFF',            borderWidth:1,          },        },        data: data.map((item: any) => item.value),      },    ],  };  useEffect(() => {    const { current } = chartRef;    if (current) {          const LineChartIns = echarts.getInstanceByDom(current);      if (LineChartIns) {              data.map((item: any, index: number) => {          LineChartIns.dispatchAction({            type: 'hideTip',            seriesIndex: 0,            dataIndex: index          });        })        LineChartIns.dispatchAction({          type: 'showTip',          seriesIndex: 0,          dataIndex: currentIndex,        });      }    }  }, [currentIndex]);  const renderChart = (option: any) => {    if (chartRef && chartRef.current) {      chartInstance.current = echarts.init(chartRef.current);      chartInstance.current.setOption(option);      // var options =chartInstance.current.getOption().series[0].symbolSize      ; // 获取echarts的配置项      // // var symbolSize = options.series[0].data[0].symbolSize; // 获取第一个数据点的symbolSize      // console.log(options); // 输出：10      setCurrentIndex(0);    }  };  useEffect(() => {    renderChart(optionData);    return () => {      chartInstance && chartInstance.current!.dispose();    };    }, [data]);  useInterval(    () => {      setCurrentIndex(currentIndex + 1 === data.length ? 0 : currentIndex + 1);    },    3000,    isBool,  );  return (    <div      style={{ width: width || '110px', height: height || '110px' }}      className={styles.chart}      ref={chartRef}      onMouseEnter={() => {        setIsBool(false);      }}      onMouseLeave={() => {        setIsBool(true);      }}    />  );};export default memo(BzLine);

Answer 1

不是修改 emphasis.symbolSize 而是修改 emphasis.scale：

emphasis: {-  symbolSize: 36,+  scale: 2, // 缩放倍数自己调整  itemStyle: {    color: {      type: 'radial',      x: 0.5,      y: 0.5,      r: 0.5,      colorStops: [        {          offset: 0,          color: '#fff', // 中心颜色        },        {          offset: 0.4,          color: '#fff',        },        {          offset: 0.5,          color: '#ffffff00',        },        {          offset: 1,          color: '#ffffff00',        },      ],    },    borderColor: '#FFFFFF',    borderWidth:1,  },}

#series-line.emphasis.scale - Documentation - Apache ECharts

Answer 2

在 ECharts 中，如果你想更改数据点（即图中的绿色圆点）的大小而不影响指示线（tooltip 触发的圆圈），你需要分别设置这两个属性的大小。在你的代码中，数据点的大小是通过 series 下的 symbolSize 属性来设置的，而 tooltip 触发的圆圈大小通常不由 ECharts 的配置直接控制，因为它是一个动态生成的元素。

不过，你可以通过以下步骤来调整数据点的大小而不影响 tooltip 的样式：

1. 调整数据点大小：在 series 配置中，你已经有了 symbolSize 属性。你可以直接在这里设置数据点的大小。如果你想让所有的数据点大小一致，可以直接设置一个数字（如 symbolSize: 6），或者如果你想为每个数据点设置不同的大小，可以传递一个数组（如 symbolSize: function (val) { return val[2] / 10; }，这里假设你的数据项是一个包含三个元素的数组，并且第三个元素用于确定大小）。
2. 保持 tooltip 样式不变：tooltip 的样式和大小是由 ECharts 自动控制的，并且通常不由用户配置直接影响。不过，你可以通过 CSS 来覆盖 tooltip 的样式（如果可能的话），但这通常不推荐，因为 tooltip 的内容和结构可能会随着 ECharts 的版本更新而变化。

在你的代码中，如果你想减小绿色圆点的大小，只需要调整 series 下的 symbolSize 属性即可。例如，将 symbolSize: 18 更改为 symbolSize: 6 或其他你想要的数值。

series: [  {    // ... 其他配置 ...    symbolSize: 6, // 将这里改为你想要的数值    // ... 其他配置 ...  },],

这样，数据点（绿色圆点）的大小就会变小，而 tooltip 的样式和大小则保持不变。