echarts legend文字样式

您可以通过配置项中的textStyle属性来设置Echarts图表中legend文字的样式，例如：

legend: {
    textStyle: {
        color: '#333',
        fontSize: 14,
        fontWeight: 'bold'
    }
}

以上代码设置了legend文字的颜色为#333，字体大小为14，字体加粗。您可以根据需要进行自定义配置。

相关问题

echarts legend文字鼠标悬浮变色

感谢您的提问。关于echarts legend文字鼠标悬浮变色的问题，请参考以下代码：

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    data:['数据一','数据二','数据三'],
    textStyle: {
      color: '#333'
    }
  },
  color: ['#337ab7','#5cb85c','#f0ad4e'],
  xAxis: [
    {
      type: 'category',
      data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        textStyle: {
          color: '#333'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '销量',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        textStyle: {
          color: '#333'
        }
      }
    },
    {
      type: 'value',
      name: '利润',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        textStyle: {
          color: '#333'
        }
      }
    }
  ],
  series: [
    {
      name:'数据一',
      type:'bar',
      data:[50, 80, 100, 120, 150, 180, 200, 220, 200, 180, 150, 100],
      itemStyle: {
        normal: {
          barBorderRadius: [5, 5, 0, 0],
          color: '#337ab7',
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#333',
              fontSize: 14
            }
          }
        }
      }
    },
    {
      name:'数据二',
      type:'bar',
      data:[10, 30, 50, 80, 100, 120, 150, 180, 150, 120, 80, 50],
      itemStyle: {
        normal: {
          barBorderRadius: [5, 5, 0, 0],
          color: '#5cb85c',
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#333',
              fontSize: 14
            }
          }
        }
      }
    },
    {
      name:'数据三',
      type:'line',
      yAxisIndex: 1,
      data:[2, 4, 5, 6, 7, 8, 10, 12, 10, 8, 7, 6],
      itemStyle: {
        normal: {
          color: '#f0ad4e',
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#333',
              fontSize: 14
            }
          }
        }
      },
      lineStyle: {
        normal: {
          width: 3,
          type: 'solid',
          opacity: 0.7
        }
      },
      markLine: {
        silent: true,
        data: [
          {type: 'average', name: '平均值'}
        ],
        lineStyle: {
          normal: {
            color: '#999',
            type: 'dashed'
          }
        }
      }
    }
  ]
};

// 设置图例文字鼠标悬浮变色
var legendHoverColor = '#666';

var legendOpts = myChart.getModel().option.legend[0];
legendOpts.selectedMode = false;

myChart.on('mouseover', function(params) {
  if (params.componentType === 'legend') {
    var legendName = params.name;
    var option = myChart.getOption();  
    var seriesIndex = getSeriesIndexByName(legendName); // 通过名称获取series索引
    var color = option.color[seriesIndex];
    
    // 更新后的legend样式
    var updatedLegend = {};
    updatedLegend[legendName] = {textStyle: {color: color}};
    myChart.setOption({legend: updatedLegend});
  }
});

myChart.on('mouseout', function(params) {
  if (params.componentType === 'legend') {
    var legendName = params.name;
    var option = myChart.getOption();  
    var seriesIndex = getSeriesIndexByName(legendName); // 通过名称获取series索引
    
    // 还原为原来的legend样式
    var updatedLegend = {};
    updatedLegend[legendName] = {textStyle: {color: option.legend[0].textStyle.color}};
    myChart.setOption({legend: updatedLegend});
  }
});

// 获取series索引
function getSeriesIndexByName(name) {
  var option = myChart.getOption();
  var series = option.series;
  
  for (var i = 0; i < series.length; i++) {
    if (series[i].name === name) {
      return i;
    }
  }
}

希望能对您有所帮助！

echarts legend自定义样式

要自定义echarts的legend样式，可以在legend属性中添加一些属性来实现。

例如，可以通过设置textStyle属性来自定义图例文字的样式，包括颜色、字体大小、粗细等。可以设置backgroundColor属性来定义图例的背景颜色。

另外，可以通过设置itemWidth和itemHeight属性来定义图例项的宽度和高度，从而调整图例项的大小。可以通过设置padding属性来调整图例项之间的间距。

以下是一个示例代码，展示如何自定义echarts的legend样式：

legend: {
    orient: 'vertical',
    right: 10,
    y: 'center',
    textStyle: {
        color: 'red',
        fontSize: 14,
        fontWeight: 'bold'
    },
    backgroundColor: 'lightgray',
    itemWidth: 20,
    itemHeight: 10,
    padding: [10, 10, 10, 10]
}