小袁的ECharts学习笔记

chartOption: EChartOption = {

    xAxis: {
      type: 'category', // 坐标轴类型，默认为'category'
      boundaryGap: false, // 两边不留白
      splitLine: {  // 坐标网格线
        show: true,
        lineStyle: {
          color: 'rgb(51,71,74)',
        }
      },
      // axisLabel: {
      //   textStyle: {
      //     color: 'rgb(144,158,166)',
      //   },
      // },
      // axisLine: {   // 坐标轴线
      //   lineStyle: {
      //     color: 'rgb(144,158,166)' // x轴及x坐标颜色
      //   }
      // },
      data: [
        '5/18', '5/19', '5/20', '5/21', '5/22', '5/23', '5/24'
      ],
    },

    yAxis: {
      type: 'value',
      max: 200, // 纵坐标最大为200
      interval: 40,  // 每格相差40
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgb(51,71,74)',
        },
      },
      // axisLabel: {
      //   textStyle: {
      //     color: 'rgb(144,158,168)',
      //   },
      // },
      // axisLine: {
      //   lineStyle: {
      //     color: 'rgb(144,158,166)',
      //   }
      // },
      name: '(次/天)',
      nameTextStyle: {
        align: 'right',
        color: 'rgb(144,158,166)',
      },
    },

    series: [{
      type: 'line',
      itemStyle: {  // 折线样式
        normal: {
          label: {  // 折点样式
            show: true,
            color: '#fff',
          }
        }
      },
      data: [16, 57, 31, 72, 87, 57, 24],
      symbol: 'circle',  // 设置为实心点
      symbolSize: 8,
    }],

    grid: {  // 折线图相对位置
      left: '13%',
      right: '5%',
      bottom: '15%',
      top: '25%',
    },

    tooltip: { // 标点上的提示框
      show: true,
      trigger: 'axis',
    }

  };

袁同学——2020年10月21日