ECharts用法总结

1. 显示隐藏X、Y轴线及刻度线刻度值：xAxis/yAxis.show = false(true);
2. 显示隐藏X、Y轴线：xAxis/yAxis.axisLine.show = false(true);
3. 显示隐藏X、Y刻度值：xAxis/yAxis.axisLabel.show = false(true);
4. 显示隐藏X、Y刻度线：xAxis/yAxis.axisTick.show = false(true);
5. 设置X轴刻度间距：xAxis.axisLabel.interval 隔几个标签显示一个标签

var option = {
  backgroundColor: "#FFF0F5",

  title: {
    text: "折线图",
    subtext: "模拟数据",
    x: "center",
  },

  legend: {
    // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
    orient: "horizontal",
    // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
    x: "left",
    // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
    y: "top",
    data: ["预期", "实际", "假设"],
  },

  //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
  grid: {
    top: "16%", // 等价于 y: '16%'
    left: "3%",
    right: "8%",
    bottom: "3%",
    containLabel: true,
  },

  // 提示框
  tooltip: {
    trigger: "axis",
    trigger: "item",
    hideDelay: 0,
    confine: true,
    // backgroundColor: "rgba(0,0,0,0.7)", //背景颜色（此时为默认色）
    borderRadius: 8, //边框圆角
    triggerOn: "click",
    formatter: (params) => {
        let descList = [];
        let index = params.dataIndex;
        this.tableData.forEach((item) => {
        if (item.xname == "day") {
            item.data.forEach((data, i) => {
              if (params.seriesName == data.lineName && i == index) {
                descList = data.descList;
              }
            });
        }
        });
        return descList && descList.length
        ? `<div class="tip"><h3>${params.seriesName}</h3> ${descList.join(
          "<br>"
        )} </div>`
        : "无";
    },
  },

  //工具框，可以选择
  toolbox: {
    feature: {
      saveAsImage: {}, //下载工具
    },
  },

  xAxis: {
    name: "周几",
    type: "category",
    axisLine: {
      lineStyle: {
        // 设置x轴颜色
        color: "#912CEE",
      },
    },
    // 设置X轴数据旋转倾斜
    axisLabel: {
      rotate: 30, // 旋转角度
      interval: 0, //设置X轴数据间隔几个显示一个，为0表示都显示
    },
    // boundaryGap值为false的时候，折线第一个点在y轴上
    boundaryGap: false,
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },

  yAxis: {
    name: "数值",
    type: "value",
    min: 0, // 设置y轴刻度的最小值
    max: 1800, // 设置y轴刻度的最大值
    splitNumber: 9, // 设置y轴刻度间隔个数
    axisLine: {
      lineStyle: {
        // 设置y轴颜色
        color: "#87CEFA",
      },
    },
  },

  series: [
    {
      name: "预期",
      data: [820, 932, 301, 1434, 1290, 1330, 1320],
      type: "line",
      // 设置小圆点消失
      // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
      symbol: "none",
      // 设置折线弧度，取值：0-1之间
      smooth: 0.5,
    },

    {
      name: "实际",
      data: [620, 732, 941, 834, 1690, 1030, 920],
      type: "line",
      // 设置折线上圆点大小
      symbolSize: 8,
      itemStyle: {
        normal: {
          // 拐点上显示数值
          label: {
            show: true,
          },
          borderColor: "red", // 拐点边框颜色
          lineStyle: {
            width: 5, // 设置线宽
            type: "dotted", //'dotted'虚线 'solid'实线
          },
        },
      },
    },

    {
      name: "假设",
      data: [120, 232, 541, 134, 290, 130, 120],
      type: "line",
      // 设置折线上圆点大小
      symbolSize: 10,
      // 设置拐点为实心圆
      symbol: "circle",
      itemStyle: {
        normal: {
          // 拐点上显示数值
          label: {
            show: true,
          },
          lineStyle: {
            // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
            color: "rgba(0,0,0,0)",
          },
        },
      },
    },
  ],

  color: ["#00EE00", "#FF9F7F", "#FFD700"],
};