echarts 线形图

在这里插入图片描述

const backgroundColor = '#101736';
const color = ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组
const title = {
  text: '销售来源',
  textStyle: {
    color: '#fff',
    fontSize: 16,
  },
  padding: 0,
  top: 35,
  left: 25,
};
const legend = {
  //data,就是取得每个series里面的name属性。
  orient: 'horizontal',
  icon: 'circle', //图例形状
  padding: 0,
  top: 35,
  right: 40,
  itemWidth: 14, //小圆点宽度
  itemHeight: 14, // 小圆点高度
  itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔,纵向布局时为纵向间隔。
  textStyle: {
    fontSize: 14,
    color: '#ffffff',
  },
};
const tooltip = {
  show: true,
  trigger: 'axis',
  axisPointer: {
    type: 'shadow',
  },
};
let seriesData = [
  { name: '电子邮箱', data: [120, 132, 101, 134, 90, 230, 210] },
  { name: '联盟广告', data: [220, 182, 191, 234, 290, 330, 310] },
  { name: '视频广告', data: [150, 232, 201, 154, 190, 330, 410] },
  { name: '直播', data: [320, 332, 301, 334, 390, 330, 320] },
];
const commonConfigFn = (index) => {
  return {
    type: 'line',
    smooth: true,
    symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
    symbolSize: 6, //小圆点大小
    itemStyle: {
      //还是小圆点设置
    },

    label: {
      show: false, //不显示小圆点上的label文字
    },
    lineStyle: {
      width: 1, //线条设置
     
    },

    areaStyle: {
      //填充线条下面的面积区域颜色。(areaStyle只是锦上添花)
      opacity: 0.2,
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: color[index], // 上处的颜色
          },
          {
            offset: 1,
            color: 'transparent', // 下处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    },
  };
};

seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
option = {
  backgroundColor,
  color,
  title,
  tooltip,
  legend,
  grid: {
    top: '20%',
    left: '3%',
    right: '4%',
    bottom: '5%',
    containLabel: true,
  },

  xAxis: {
    show: true, //显示x轴+x轴label文字
    type: 'category',
    boundaryGap: false, //从Y轴出发,这个false很好的
    axisLine: {
      show: true, //显示x坐标轴轴线
      lineStyle: {
        color: 'rgba(255,255,255,.4)',
      },
    },
    axisTick: {
      show: false, //不显示x坐标1cm刻度
    },
    axisLabel: {
      color: '#ffffff', //x轴label文字颜色
    },
    splitLine: {
      show: false, //不显示grid竖向分割线
    },

    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#ffffff',
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255,255,255,.4)',
      },
    },
    splitLine: {
      show: false, //不显示grid水平分割线
    },
  },

  series: seriesData,
};

### ECharts 折线 Y 轴配置方法 在 ECharts 中,折线的 Y 轴可以通过 `yAxis` 属性进行详细的配置。以下是关于如何设置 Y 轴的一些重要参数及其作用: #### 基本属性 - **min 和 max**: 可以通过这两个属性来定义 Y 轴的最大值和最小值。如果希望手动指定范围,则可以将其设为具体的数值;也可以使用 `'dataMin'` 或 `'dataMax'` 来自动调整到数据中的最大或最小值[^1]。 ```javascript yAxis: { min: 0, // 手动设定最小值 max: 100 // 手动设定最大值 } ``` - **interval**: 定义刻度间隔大小。当需要固定刻度间距时非常有用[^4]。 ```javascript yAxis: { interval: 10 // 刻度间隔为10 } ``` #### 自适应功能 为了使表能够更好地适配不同的屏幕尺寸或者动态变化的数据量,在某些情况下可能需要让 Y 轴具备一定的灵活性。这通常涉及以下几个方面: - 使用函数形式定义 `min` 和 `max` 的计算逻辑; - 结合窗口事件监听器实现响应式的重新渲染[^2]。 示例代码如下所示: ```javascript window.addEventListener('resize', function () { myChart.resize(); }); ``` 此外,还可以利用工具类库辅助完成复杂的布局管理任务。 #### 不均匀刻度处理 对于一些特殊需求场景下的非线性分布数据点绘情况(比如指数增长趋势),则需采用自定义方式创建不均等分隔标签列表并赋给 axisLabel 对象内的 formatter 字段来进行显示优化。 ```javascript yAxis: [{ type: 'value', scale: true, boundaryGap: [0.2, 0.8], splitLine: { show: false }, axisTick: { inside: true }, axisLabel: { formatter: function (value) { return Math.pow(value / 1e7 + 1 , 3 ) * 1e7 ; } } }] ``` 以上即是对 echarts 折线中 y 轴主要配置项的一个概括介绍以及实际应用案例分享。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值