Echart 的常用配置

hongten_chen

已于 2023-01-19 15:32:00 修改

阅读量1.6k

点赞数

分类专栏： Echarts 文章标签： javascript

于 2022-10-12 18:46:34 首次发布

本文链接：https://blog.csdn.net/zjq_1234/article/details/127288414

版权

Echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 常用的配置字段

 1、折线图
chartOption = {
   color: this.yearColor,  // 图表的默认颜色列表，多条线时依次循环
    tooltip: {
      trigger: 'axis',
    },
    grid: { left: 0, right: 0, bottom: 0, top: 30, containLabel: true },
    xAxis: {
      nameTextStyle: { color: '#000000A3' }, // 配置x轴的字体颜色
      type: 'category',         // 设置为分类轴
      axisLabel: { lineHeight: 28 }, // 设置
      boundaryGap: true,
      axisLine: { onZero: false }, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
    },
    yAxis: {
      nameTextStyle: { fontSize: 12, padding: [10, 20, 0, 0], color: 'rgba(0,0,0,0.56)' },
      type: 'value',
      axisLine: { show: false }, // 是否显示
      splitNumber: 1,  // 坐标轴显示的分割段数
    },
    series: [
    {
        type: 'line',  // 图的类型，饼图，折线图，柱状图等
        symbol: 'none',
        markLine: {   // 设置图表标线，比如图的平均线，最大值等
          symbol: 'none',  // 标记的图形，例如'circle', 'rect', 'roundRect'
          precision: 2,  // 标线数值的精度，在显示平均值线的时候有用
          label: {
            show: true,
            align: 'left', // 平均线文字的左对齐
            position: 'start', // 平均线文字显示在x轴的开始位置，middle,end等
            verticalAlign: 'bottom', //文字显示在平均线的上方或下方
            color: 'rgba(0,0,0,0.56)', // 设置标线的颜色
            lineHeight: 24,
            fontSize: 14,
            padding: [0, 10, 0, 0], //  文字块的内边距
          },
          data: [{ name: '平均值', type: 'average' ,yAxis: 100}], // yAxis: Y 值为给定值的标记线，仅对数据值是一项的设置有效
        },
        endLabel: { show: false }, // 折线端点的标签
      },
      
    ],
  };

2、柱状图常用配置


prototypeOption: EChartsOption = {
    // 设置图表自带的图例的属性，形状，宽高，颜色
    legend: { icon: 'rect', itemWidth: 8, itemHeight: 8, textStyle: { color: ' rgba(0, 0, 0, 0.56)' } },
    // 设置图表组件离容器四周的距离，containLabel:grid 区域是否包含坐标轴的刻度标签
    grid: { left: 20, right: 16, bottom: 0, top: 30, containLabel: true },
    tooltip: {
      show: true,
      trigger: 'axis', // 触发类型，'item'，'axis'，'none'
      formatter: params => {
        if (!(params instanceof Array)) {
          params = [params];
        }
        return params
          .map((param, index) => {
            if (!param.value) {
              param.value = 0;
            }
            if (index < 2) {
              return `${index === 0 ? `${param.name}<br />` : ''}<div class="flex-box"><div class="mr-md">${param.marker}${
                param.seriesName
              }</div><div class="text-right">${this.metricsService.ReportMoneyText(Number(value))}</div></div>
                ${index === 1 ? `<div class="pt-xs text-disable">点击图表查看流水明细</div>` : ''}`;
            }
          })
          .join('');
      }
    },
    color: [ChartParameters.INCOME_COLOR, ChartParameters.EXPENSES_COLOR],
    xAxis: [{ type: 'category', axisLabel: { color: 'rgba(0,0,0,0.56)' }, axisLine: { show: false }, axisTick: { show: false } }],
    yAxis: [
       {
          type: 'value',
          name: '万元',
          nameTextStyle: { padding: [0, 40, 0, 0], color: 'rgba(0,0,0,0.56)' },
          axisLabel: { formatter: (v: any) => parseInt((v / 10000).toString()).toString(), color: 'rgba(0,0,0,0.56)' },
          axisLine: { show: false },
          axisTick: { show: false },
          splitNumber: 2， // 坐标轴分割段数
        }
      ],
    series: [ barMaxWidth:柱条最大宽度度，barMinHeight：最低高度，barGap:不同系列的柱间距离的百分比，stack:数据堆叠
      { name: '贷款、借款流入', type: 'bar', data: [], barMaxWidth: 12, barMinHeight: 1, barGap: '10%', stack: 'cr' },
      { name: '偿还贷款、借款', type: 'bar', data: [], barMaxWidth: 12, barMinHeight: 1, barGap: '10%', stack: 'dr' },
      { name: '贷款、借款流入', type: 'bar', data: [], barMaxWidth: 12, barMinHeight: 1, barGap: '10%', stack: 'cr' },
      { name: '偿还贷款、借款', type: 'bar', data: [], barMaxWidth: 12, barMinHeight: 1, barGap: '10%', stack: 'dr' },
      {
        name: '流入'，
        data: this.getOptionList(list, maxValue, isAmount ? 'amount' : 'transactionNumber'),
        color: this.paymentFlag === 'R' ? ChartParameters.INCOME_COLOR : ChartParameters.EXPENSES_COLOR,
        borderRadius: [2, 2, 0, 0], // 柱状图显示圆角
        label: {
           formatter: params => {
             return [
                `{a|${isAmount ? this.metricsService.ReportMoneyText(Number(params.value)) : `${params.value}笔`}}`,
                `{b|${this.standardPercentPipe.transform(percents[params.dataIndex] || 0)}}`
              ].join('\n');
            },
         show: true,
         position: 'top',
         rich: {  // 通过富文本来显示丰富的标签样式
            a: {
                fontSize: '12px',
                color: 'rgba(0, 0, 0, 0.88)',
                padding: [0, 0, 0, isAmount ? 0 : 4]
              },
              b: {
                fontSize: '12px',
                padding: [4, 0, 0, isAmount ? 10 : 0],
                color: 'rgba(0, 0, 0, 0.56)'
              }
            }
          }
      }
    ]
  };

3、柱状图图例与图例旁边的文字垂直居中

 legend: {
      icon: 'roundRect',
      itemWidth: 8,
      itemHeight: 8,
      textStyle: { color: 'rgba(0, 0, 0, 0.56)', padding: [0, 5, -4, 0], rich: { a: { verticalAlign: 'middle' } } }
    },

4、点击柱状图上任意位置，获取x轴值

 html
         <div
            echarts
            [options]="prototypeOption"
            [merge]="stackMergeOption"
            [theme]="'customed'"
            style="height: 240px"
            (chartInit)="onChartInit($event, 'chartInstance')"
          ></div>

js
常用配置
  prototypeOption: EChartsOption = {
    legend: {
      icon: 'roundRect',
      itemWidth: 8,
      itemHeight: 8,
      textStyle: { color: 'rgba(0, 0, 0, 0.56)', padding: [0, 5, -4, 0], rich: { a: { verticalAlign: 'middle' } } }
    },

    grid: { left: 15, right: 16, bottom: 0, top: 50, containLabel: true },
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter: params => {
        if (!(params instanceof Array)) {
          params = [params];
        }
        return params
          .map((param, index) => {
            if (!param.value) {
              param.value = 0;
            }

            const value = param.data < 0 ? -1 * Number(param.value) : Number(param.value);
            return `${index === 0 ? `${param.name}<br />` : ''}<div class="flex-box"><div class="mr-md">${param.marker}${
              param.seriesName
            }</div><div class="text-right">${this.metricsService.ReportMoneyText(value)}</div></div>
              ${index === params.length - 1 ? `<div class="pt-xs text-disable">点击图表查看流水明细</div>` : ''}`;
          })
          .join('');
      }
    },
    xAxis: [{ type: 'category', data: [], axisLabel: { color: 'rgba(0,0,0,0.56)' } }],
    yAxis: [
      {
        type: 'value',
        name: '万元',
        nameTextStyle: { padding: [0, 40, 0, 0], color: 'rgba(0,0,0,0.56)' },
        axisLabel: { formatter: (v: any) => parseInt((v / 10000).toString()).toString(), color: 'rgba(0,0,0,0.56)' },
        axisLine: { show: false },
        splitNumber: 3
      }
    ]
  };

处理点击事件:
import {  ChangeDetectorRef } from '@angular/core';
import { EChartsOption } from 'echarts';

 constructor(  private cdr: ChangeDetectorRef) {}

  onChartInit(e, instance: string) {
    this[instance] = e;
    this[instance].getZr().on('click', params => {
      const pointInPixel = [params.offsetX, params.offsetY];
      if (this[instance].containPixel('grid', pointInPixel)) {
        const pointInGrid = this[instance].convertFromPixel({ seriesIndex: 0 }, pointInPixel);
        const xIndex = pointInGrid[0];
        const op = this[instance].getOption();
        const month = op.xAxis[0].data[xIndex]; // x轴对应的坐标
        this.onChartBarClick({ name: month });
        this.cdr.detectChanges();
      }
    });
  }

参考文章：

echarts折线图设置渐变半透明面积颜色_suoh's Blog的博客-CSDN博客_echarts折线图面积图渐变色 echarts的X轴显示特定个数label并修改样式_echarts x轴显示个数_keloneko的博客-CSDN博客

Echarts点击多组数据多个柱子中的一个柱子，获取当前点击的是第几组数据，并获取点击的是当前组别第几根柱子，以及对应横坐标,_tangdou369098655的博客-CSDN博客_echarts柱状图每列两条数据怎么知道点的是哪一条


echarts--点击图表任意位置，获取到该点的XY坐标值 - 简书

echarts的legend的小图标与文本垂直对齐_echarts legend垂直居中_斯图尔te的博客-CSDN博客