echart样式属性设置

// 预设柱状图颜色3种颜色
export const barColorList = [
  '#1875F0',
  '#68CFA0',
];

// 预设图表颜色3种颜色
export const colorList = [
  '#1875F0',  
  '#68CFA0',
  '#FDB336'
];

export const fontColor = '#6C7E8E';

// 条状图
let clickIndex = {};
export function echartOptionForShadow(nameList, valueList) {
  return {
    color: barColorList,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      position: function (point, params, dom, rect, size) {
        return [10, point[1] + 20];
      },
      // formatter: function (params) {
      //   clickIndex = params;
      //   return params[0].axisValueLabel + '：' + params[0].data.value + '%';
      // }
    },
    grid: {
      left: '3%',
      right: '8%',
      bottom: '20px',
      top: '20px',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      scale: true,
      // max: 120,
      min: 0,
      minInterval: 1, // 设置分割线最小间隔为1
      boundaryGap: [0, 0.01],
      show: true,
      axisLine: { // 设置主轴线的样式
        show: true,
        lineStyle: {
          color: fontColor
        }
      },
      axisLabel: { // 设置主轴的文字样式
        fontSize: 14,
        color: fontColor
      },
      splitLine: { // 设置分割线样式
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      },
      axisTick: { // 设置主轴小标记的样式
        show: false,
        lineStyle: {
          color: fontColor
        }
      }
    },
    yAxis: {
      axisLine: { // 设置主轴线的样式
        show: true,
        lineStyle: {
          color: fontColor
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: (params) => {
          if (params.length > 6) {
            return `{a|${params.substring(0, 6)}...}`;
          } else {
            return `{a|${params}}`;
          }
        },
        rich: {
          a: {
            fontSize: 14,
            color: fontColor
          }
        },
        fontSize: 14,
        interval: 0
      },
      type: 'category',
      data: ['ddfd', 'sddd', 'ffff', 'sfdsfdsf', 'dfdsfsdfdsfds']
    },
    series: [
      {
        // showBackground: true,
        barWidth: 10,
        label: {
          show: true,
          position: 'right',
          fontSize: 14,
          color: 'black'
        },
        type: 'bar',
        data: [10, 20, 30, 10, 50]
      }
    ]
  };
}
export function getBarParm() {
  return clickIndex;
}

// 环形图
export function echartOptionForPie(data) {
  return {
    color: colorList,
    tooltip: {
      trigger: 'item',
      // formatter: function(a) {
      //   return a.name + '：' + formatMoney(a.data.percent.toFixed(2)) + '（' + a.value.toFixed(0) + '%）';
      // }
    },
    legend: {
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'loanPie',
        type: 'pie',
        radius: ['30%', '50%'],
        center: ['50%', '50%'], // 距离左边的位置 距离上面的位置 写50 50 就是中间
        // center:[]这个数组指的是饼图的圆心坐标，数组第一项是横坐标，第二项是纵坐标。
        // 支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
        // itemStyle: {
        //   normal: {
        //     label: {
        //       fontSize: 14,
        //       color: 'black',
        //       formatter: function(a) {
        //         return a.name + '\n' + a.data.percent.toFixed(0) + '%' + '\n' + formatMoney(a.value.toFixed(2));
        //       }
        //     }
        //   }
        // },
        label: {
          position: 'outside',
          formatter: function(params) { // 自己定义显示的文字（可以使用自定义的文字样式）
            return `\n{b|${params.name}}\n{b|(${params.value.toFixed(0)}个)}\n{b|${params.percent.toFixed(0)}%}`;
          },
          rich: { // 自定义文字的样式
            b: {
              fontSize: 12,
              lineHeight: 16,
              color: fontColor
            },
            a: {
              fontSize: 14,
              lineHeight: 18,
              fontWeight: 'bold',
              color: 'black'
            }
          },
        },
        labelLine: {
          normal: {
            length: 10,
            length2: 10
          }
        },
        data: [
          { value: 10, name: 'Search Engine' },
          { value: 20, name: 'Direct' },
          { value: 30, name: 'Email' },
          { value: 40, name: 'Union Ads' },
          { value: 40, name: 'Video Ads' }
        ],
      },
    ],
  }
};

// 柱状图
export function echartOptionForBar(nameList, valueList) {
  return {
    color: barColorList,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      // position: function (point, params, dom, rect, size) { // 设定提示块的位置
      //   return [10, point[1] + 20];
      // },
      // formatter: function (params) { // 设定提示块的显示文字
      //   clickIndex = params;
      //   return params[0].axisValueLabel + '：' + params[0].data.value + '%';
      // }
    },
    grid: {
      left: '3%',
      right: '8%',
      bottom: '20px',
      top: '20px',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      scale: true,
      // max: 120,
      min: 0,
      minInterval: 1, // 设置分割线最小间隔为1
      boundaryGap: [0, 0.01],
      show: true,
      axisLine: { // 设置主轴线的样式
        show: true,
        lineStyle: {
          color: fontColor
        }
      },
      axisLabel: { // 设置主轴的文字样式
        fontSize: 14,
        color: fontColor
      },
      splitLine: { // 设置分割线样式
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      },
      axisTick: { // 设置主轴小标记的样式
        show: false,
        lineStyle: {
          color: fontColor
        }
      }
    },
    xAxis: {
      axisLine: { // 设置主轴线的样式
        show: true,
        lineStyle: {
          color: fontColor
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: (params) => {
          if (params.length > 6) {
            return `{a|${params.substring(0, 6)}...}`;
          } else {
            return `{a|${params}}`;
          }
        },
        rich: {
          a: {
            fontSize: 14,
            color: fontColor
          }
        },
        fontSize: 14,
        interval: 0
      },
      type: 'category',
      data: ['ddfd', 'sddd', 'ffff', 'sfdsfdsf', 'dfdsfsdfdsfds']
    },
    series: [
      {
        // showBackground: true,
        barWidth: 10,
        label: {
          show: true,
          position: 'top',
          fontSize: 14,
          color: 'black'
        },
        type: 'bar',
        data: [10, 20, 30, 10, 50]
      }
    ]
  };
}