视觉映射组件（visualMap）的区间设置与实际数据的表现不一致

Question

问题：折线图自定义映射组件区间后，画出的表不是我设置的区间。
折线图代码：

 timeList.value = Array.isArray(data.interaction_times) ? data.interaction_times : [];
    scoreList.value = Array.isArray(data.mood_scores) ? data.mood_scores : [];

    initChart()


const initChart = () => {
  const chartDom = document.getElementById('emotion-chart');
  if (!chartDom) return;

  if (!myChart) {
    myChart = echarts.init(chartDom);
  }

  // 确保数据有效
  if (!timeList.value.length || !scoreList.value.length) {
    myChart.clear();
    return;
  }


  // 数据转换
  const formattedData = timeList.value.map((time, index) => {
    return [new Date(time).getTime(), scoreList.value[index]];
  });

  // 图表配置
  let option = {
    tooltip: {
      trigger: 'axis',
      position: (pt) => [pt[0], '10%'],
      formatter: (params) => {
        const date = new Date(params[0].value[0]);
        let score = params[0].value[1];
        // 检查并转换为数字类型
        if (typeof score ==='string') {
          score = parseFloat(score);
        }
        let level;

        // 根据分数确定情绪等级
        if (score <= -0.6) level = '负面';
        else if (score <= -0.2) level = '较负面';
        else if (score <= 0.3) level = '中性';
        else if (score <= 0.8) level = '积极';
        else level = '非常积极';

        return `日期: ${date.toLocaleDateString()}<br/>情绪得分: ${score.toFixed(2)}<br/>等级: ${level}`;
      }
    },
    title: {
      left: 'center',
      text: '情绪得分趋势'
    },
    grid: {
      left: '5%',
      right: '15%',  // 为 visualMap 腾出空间
      bottom: '10%'
    },
    toolbox: {
      right: 10,
      feature: {
        dataZoom: { yAxisIndex: 'none' },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'time',
      boundaryGap: false,
      axisLabel: {
        formatter: (value) => new Date(value).toLocaleDateString()
      }
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      min: -2,
      max: 2,
      interval:0.4
    },
    dataZoom: [
      {
        type: 'inside',
        start: Math.max(0, 100 - (100 / timeList.value.length) * 20),
        end: 100
      },
      {
        type: 'slider',
        start: Math.max(0, 100 - (100 / timeList.value.length) * 20),
        end: 100
      }
    ],
    // 添加视觉映射组件
    visualMap: {
      show: true,
      type: 'piecewise',  // 分段型
      orient: 'vertical', // 垂直方向
      right: 10,          // 右侧位置
      top: 'center',      // 垂直居中
      pieces: [
        { gt:-2.00,lte: -0.60, color: '#FF4D4F'},    // 负面
        { gt: -0.60, lte: -0.20, color: '#FFA940' },  // 较负面
        { gt: -0.20, lte: 0.30, color: '#FFEC3D'},  // 中性
        { gt: 0.30, lte: 0.80, color: '#87D068' },  // 积极
        { gt: 0.80, lte: 2.00,color: '#00B42A' }     // 非常积极
      ],
      outOfRange: { color: '#CCCCCC' }    // 超出范围的颜色
    },
    series: [
      {
        name: '情绪得分',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        areaStyle: { opacity: 0},      // 增加区域透明度
        data: formattedData,
        // 使用 visualMap 控制颜色
        itemStyle: {
          color: (params) => {
            const score = params.value[1];
            if (score <= -0.6) return '#FF4D4F';
            else if (score <= -0.2) return '#FFA940';
            else if (score <= 0.3) return '#FFEC3D';
            else if (score <= 0.8) return '#87D068';
            else return '#00B42A';
          }
        },
        lineStyle: { width: 2 }
      }
    ]
  };

  myChart.setOption(option);
};

运行截图：
我的分数为：

 "mood_scores": [
            0.0,
            0.8,
            1.8,
            -1.0,
            -1.8,
            0.8,
            1.9
        ]

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

echarts的视觉组件不能自定义

你遇到的问题是echarts的视觉组件不能自定义，导致折线图的区间不符合你的设置。

解决方案：

1. 请检查你的echarts配置文件，确保你已经正确地设置了xAxis和yAxis的scale和axisLine等属性。
2. 如果你使用的是echarts的defaultTheme，可能需要手动设置theme的样式。
3. 如果你使用的是echarts的自定义theme，可能需要在theme中手动设置axis的样式。

以下是一个简单的示例代码，演示如何自定义echarts的xAxis和yAxis：

const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 0, 0, 0.5)'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: 'rgba(0, 255, 0, 0.5)'
      }
    }
  }
});

在上面的代码中，我们使用了axisLine属性来设置xAxis和yAxis的样式。