自定义echarts 选中数据展示样式

小离a_a

于 2024-09-04 18:32:44 发布

阅读量519

点赞数 5

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44601930/article/details/141901011

版权

option = {
  title: {
    text: '生长路线'
  },
  tooltip: {
  //自定义选中数据样式
    trigger: 'axis', // 触发类型：坐标轴触发
    formatter: function (params) {
      // params 是一个数组，数组中包含每个系列的数据信息
      let result = '';
      let htmlContent = '';
      params.forEach(function (item) {
        result += `<div style="height: 25px; line-height: 25px;">
          <!-- 圆点样式 -->
          <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${
            item.color
          };"></span>
          <span style="color: #424864;">${item.seriesName}:</span>
          <span style="color: #172045;">${item.value || '-'}</span>
        </div>`;

        // 提示框外框样式及内容数据
        htmlContent = `<div style="width: 236px;">
        <div style="color: #000000D9; border-bottom: 1px solid #F0F0F0; padding: 5px 16px;">
           ${params[0].value}岁        
        </div>
        <div style="padding: 12px 16px; position: relative;">
          ${result}
          <!-- 倒三角形样式 -->
          <div style="position: absolute; bottom: -14px; left: 12px; width: 0; height: 0; overflow: hidden; border-width: 8px; border-color: #ffffff transparent transparent transparent; border-style: dashed dashed solid dashed;}"></div>
        </div>
      </div>`;
      });

      return htmlContent;
    }
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    name: '年龄(岁)', //坐标轴名称
    data: [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
      '12',
      '13',
      '14',
      '15',
      '16',
      '17',
      '18'
    ]
  },
  yAxis: {
    type: 'value' //坐标轴类型 (value/category/time/log)
  },
  dataZoom: {
    type: 'inside'
  },
  series: [
    {
      name: '身高p3rd',
      type: 'line',
      smooth: true, //是否平滑
      data: [
        5, 6, 10, 20, 23, 34, 50, 60, 61, 72, 73, 74, 75, 76, 77, 78, 79, 90
      ],
      tooltip: {
        valueFormatter: function (value) {
          return value + ' %';
        }
      }
    },
    {
      name: '体重p3rd',
      type: 'line',
      smooth: true, //是否平滑
      data: [
        15, 16, 110, 120, 123, 134, 150, 160, 161, 172, 173, 174, 175, 176, 177,
        178, 179, 190
      ],
      formatter: function (params) {
        // params 是一个数组，数组中包含每个系列的数据信息
        let result = '';
        params.forEach(function (item) {
          // item 是每一个系列的数据
          const seriesName = item.seriesName; // 系列名称
          const value = item.value; // 数据值
          const marker = item.marker; // 标志图形
          result += `${marker}${seriesName}: ${value || '-'}<br/>`;
        });
        return result;
      }
    },
    {
      name: '年龄身高',
      type: 'line',
      smooth: true, //是否平滑
      data: [, , , , , , , , , 155, , , , , , , ,],
      symbol: 'roundRect',
      symbolSize: 15,
      lineStyle: {
        color: '#5470C6',
        width: 4,
        type: 'dashed'
      },
      itemStyle: {
        borderWidth: 3,
        borderColor: '#EE6666',
        color: '#d44654'
      }
    },
    {
      name: '骨龄身高',
      type: 'line',
      smooth: true, //是否平滑
      data: [, , , , , , , , , , , , , , 10, , ,],
      symbol: 'triangle',
      symbolSize: 15,
      lineStyle: {
        color: '#5470C6',
        width: 4,
        type: 'dashed'
      },
      itemStyle: {
        borderWidth: 3,
        borderColor: '#EE6666',
        color: '#faa363'
      }
    },
    {
      name: '年龄体重',
      type: 'line',
      smooth: true, //是否平滑
      data: [, , , , , , , , , , , , 50, , , , ,],
      symbol: 'diamond',
      symbolSize: 15,
      lineStyle: {
        color: '#5470C6',
        width: 4,
        type: 'dashed'
      },
      itemStyle: {
        borderWidth: 3,
        borderColor: '#EE6666',
        color: '#1fa0a6'
      }
    }
  ]
}```