美文网首页
echarts修改上下左右的边距

echarts修改上下左右的边距

作者: 魔仙堡杠把子灬 | 来源:发表于2020-12-22 11:37 被阅读0次

    对你何止一句中意

    我的github: 李大玄
    我的私人博客: 李大玄
    我的npm开源库: 李大玄
    我的简书: 李大玄
    我的CSDN: 李大玄
    我的掘金: 李大玄
    哔哩哔哩: 李大玄

    import _ from 'lodash';
    import { EChartOption } from 'echarts';
    // 这里修改=============================================
    const grid = {
      left: 10,
      right: 10,
      bottom: 40,
      top: 10,
      containLabel: true
    };
    // 这里修改=============================================
    const xAxis: any = [
      {
        type: 'category',
        boundaryGap: false,
        data: [],
        axisLine: {
          show: true,
          lineStyle: {
            color: '#28428D',
          }
        },
        axisTick: {
          show: false
        },
      }
    ];
    
    const yAxis: any = [
      {
        type: 'value',
        name: '',
        nameLocation: 'start',
        axisLabel: {
          fontSize: 12,
          color: '#5C7AD1'
        },
        nameTextStyle: {
          fontSize: 12,
          color: '#5C7AD1'
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#28428D'
          }
        },
      },
    ];
    
    const textStyle = {
      color: '#fff'
    };
    
    let views: number[] = [];
    let reportDates: string[] = [];
    // let clicks: number[] = [];
    
    function getOption (view: number, reportDate: string): EChartOption {
      const xAxisClone = _.cloneDeep(xAxis);
    
      views.push(view);
      reportDates.push(reportDate);
    
      xAxisClone[0].data = reportDates;
      
      if (views.length >= 5) {
        views = views.slice(-5);
      }
      if (reportDates.length >= 5) {
        reportDates = reportDates.slice(-5);
      }
    
      return {
        color: ['#4EE5F8', '#5C7AD1'],
        grid,
        xAxis: xAxisClone,
        yAxis,
        textStyle,
        series: [
          {
            name: '曝光',
            type: 'line',
            stack: 'data-view',
            areaStyle: {},
            yAxisIndex: 0,
            symbol:'none',
            smooth: true,
            data: views
          }
        ],
      };
    }
    
    export default getOption;
    

    相关文章

      网友评论

          本文标题:echarts修改上下左右的边距

          本文链接:https://www.haomeiwen.com/subject/nonngktx.html