Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式,数据可视化,Vue,JavaScript,echarts,前端,javascript

原设置参数

const getXAxis = (dataList) => {
  return dataList.map((item) =>
    window.echarts.format.formatTime('MM-dd hh:mm', item, false)
  );
};

const dealTooltip = (params, name) => {
  let price = null;
  let BinanceRate = null;
  let OKXRate = null;
  let BitgetRate = null;
  params.forEach((item) => {
    if (item.seriesType === 'line') {
      price = item.data[1];
    } else if (item.seriesName === 'Binance') {
      BinanceRate = item.data[1];
    } else if (item.seriesName === 'OKX') {
      OKXRate = item.data[1];
    } else if (item.seriesName === 'Bitget') {
      BitgetRate = item.data[1];
    }
  });
  let tip = `<div class="line-bar-tooltip">
      <div class="time">${params[0].axisValueLabel}</div>
      <div class="flex ${price ? 'show' : 'hide'}">
        <b class="logo"></b>
        <div class="text-content">${name}价格</div>
        <div class="value">$${price}</div>
      </div>
      <div class="flex ${BinanceRate ? 'show' : 'hide'}"">
        <b class="logo bin"></b>
        <div class="text-content">Binance</div>
        <div class="value">${toPrecision(BinanceRate * 100, 4)}%</div>
      </div>
      <div class="flex ${OKXRate ? 'show' : 'hide'}"">
        <b class="logo okx"></b>
        <div class="text-content">OKX</div>
        <div class="value">${toPrecision(OKXRate * 100, 4)}%</div>
      </div>
      <div class="flex ${BitgetRate ? 'show' : 'hide'}"">
        <b class="logo bit"></b>
        <div class="text-content">Bitget</div>
        <div class="value">${toPrecision(BitgetRate * 100, 4)}%</div>
      </div>
    </div>`;
  return tip;
};

export function getOption(diskData, name, period) {
  if (!diskData) {
    diskData = mockData;
  }
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      },
      formatter: (params) => dealTooltip(params, name), // 处理弹框内容样式
      backgroundColor: 'rgba(24,25,30,1)',
      padding: 0,
      borderWidth: 0,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    // dataZoom: [
    //   {
    //     type: 'inside',
    //     start: 50, // 数据窗口范围的起始百分比，表示50%
    //     end: 100
    //   },
    //   {
    //     type: 'slider',
    //     borderColor: 'rgba(0,0,0,0)'
    //   }
    // ],
    legend: {
      data: [`价格`, '空单', '多单'],
      inactiveColor: '#ccc',
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: [
      {
        type: 'time',
        axisPointer: {
          snap: true,
          label: {
            show: true,
            formatter: function (params) {
              return echarts.format.formatTime(
                'yyyy-MM-dd hh:mm',
                params.value
              );
            }
          },
          handle: {
            show: false
          }
        },
        axisLabel: {
          show: true,
          // formatter: '{yyyy}-{MM}-{dd} {hh}:{mm}' // 设置x轴标签
          formatter: () => {
            // 设置x轴标签
            if (period === '1m') {
              return '{hh}:{mm}';
            } else if (period === '5m') {
              return '{MM}-{dd} {hh}:{mm}';
            } else {
              return '{MM}-{dd}';
            }
          }
        },
        axisLine: {
          show: false
        }
      }
      // {
      //   type: 'category',
      //   data: getXAxis(diskData.categoryData), // 处理时间戳
      //   axisPointer: {
      //     type: 'line'
      //   }
      // }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          show: true,
          fontSize: 12,
          color: '#868E9B',
          formatter(value, index) {
            // y轴坐标百分比表示，最多保留4位小数
            return toPrecision(value * 100, 4) + '%';
          }
        },
        // 背景横向样式修改
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(109, 180, 202, 0.3)',
            type: 'dashed'
          }
        }
      },
      {
        type: 'value',
        axisLabel: {
          formatter: '${value}'
        },
        // 去掉背景横线
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: `价格`,
        type: 'line',
        smooth: true,
        showSymbol: false, // 只有在 tooltip hover 的时候显示圆点
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return `$${value}`;
          }
        },
        data: diskData.valueDataPrice,
        itemStyle: {
          color: '#FFC107'
        }
      },
      {
        name: '空单',
        type: 'bar',
        barGap: '-100%', // 使柱体重叠
        tooltip: {
          valueFormatter: function (value) {
            return toPrecision(value * 100, 4) + '%';
          }
        },
        data: diskData.valueDataBN,
        itemStyle: {
          // 通过值的正负给颜色
          color: (params) => {
            return params.value[1] > 0 ? '#11C384' : '#D93D57';
          }
        }
      },
      {
        name: '多单',
        type: 'bar',
        barGap: '-100%', // 使柱体重叠
        tooltip: {
          valueFormatter: function (value) {
            return toPrecision(value * 100, 4) + '%';
          }
        },
        data: diskData.valueDataOK,
        itemStyle: {
          // 通过值的正负给颜色
          color: (params) => {
            return params.value[1] > 0 ? '#11C384' : '#D93D57';
          }
        }
      }
    ]
  };
}

参数

Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式,数据可视化,Vue,JavaScript,echarts,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-833663.html

    legend: {
// 统一设置
      // data: [`价格`, '空单', '多单'],
      // inactiveColor: '#ccc',
      // textStyle: {
      //   color: '#fff'
      // }

// 单独设置
      data: [
        {
          name: '价格',
//小方块
          icon: 'circle', // 设置小方块的图标为圆形
//设置图例的小方块样式
          itemStyle: {
            color: '#FF0000'

      //color: '#FF0000', // 设置小方块的颜色为红色
      //borderColor: '#000000', // 设置小方块的边框颜色为黑色
      //borderWidth: 2, // 设置小方块的边框宽度为2像素
      //borderType: 'solid', // 设置小方块的边框类型为实线
      //borderRadius: 2, // 设置小方块的边框圆角半径为2像素
      //width: 20, // 设置小方块的宽度为20像素
      //height: 10 // 设置小方块的高度为10像素
          }
        },
        {
          name: '空单',
          icon: 'rect', // 设置小方块的图标为矩形 square
          itemStyle: {
            color: '#00FF00'
          }
        },
        {
          name: '多单',
          icon: 'triangle', // 设置小方块的图标为三角形
          itemStyle: {
            color: '#0000FF'
          }
        }
      ],
      inactiveColor: '#ccc',
      textStyle: {
        color: '#fff'
      }
    },

到了这里，关于Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！