vue 配置双轴图图例文字样式

在 Vue 中配置双轴图表（如 ECharts 或者 Highcharts）的图例文字样式，你可以通过设置 `legend` 的选项来定制。这里假设我们以 ECharts 为例：

<template>
  <div id="chart-container"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      const option = {
        legend: {
          // 图例的基本配置
          data: ['轴A', '轴B'], // 图例标题
          // 文字样式配置
          textStyle: {
            color: '#000', // 文字颜色
            fontSize: '14px', // 字体大小
            fontFamily: 'Arial', // 字体家族
            fontWeight: 'bold', // 字体粗细
            align: 'center', // 文本对齐方式
            padding: [5, 10], // 内边距
          },
          // 如果需要自定义图例框，可以添加更多属性如: itemWidth, itemHeight, etc.
        },
        xAxis: { ... }, // 轴A配置
        yAxis: { ... }, // 轴B配置
        series: [ ... ], // 数据系列
      };

      this.chart = echarts.init(document.getElementById('chart-container'));
      this.chart.setOption(option);
    },
  },
};
</script>

在这个例子中，`textStyle` 对象设置了图例文字的颜色、大小、字体、粗细以及文本对齐方式。如果你想要动态调整这些样式，可以在组件内部的数据对象里直接修改对应的值。