几个echarts使用小案例

1 y轴名称放左边、辅助线、时间轴标签、数值轴间隔

<div id="main" style="height: 400px"></div>
<script>
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: "time",
      minInterval: 5,
      axisLabel: { hideOverlap: true, formatter: "{MM}-{dd} {HH}:{mm}:{ss}" },
    },
    yAxis: {
      type: "value",
      name: "AZZSSDDD DDDDDDDDD\n DDDDDDDDD DDDDDz",
      nameRotate: 90,
      nameLocation: "middle",
      nameTextStyle: {
        fontSize: 9,
        //下面3个属性设置不生效
        // width: 100,
        // height: 10,
        // overflow: "break",
      },
      //名称和坐标轴的距离
      nameGap: 40,
      //不显示图上横线
      splitLine: { show: false },
      //显示轴线
      axisLine: { show: true },
      max: 200,
      min: 0,
      //间隔
      interval: 200,
      axisLabel: {
        formatter: function (value, index) {
          if (value == 0 || value == 150 || value == 200 || value == 100) {
            return value + "";
          }
          return "";
        },
      },
    },
    series: [
      {
        data: [
          [1663726202281, 120],
          [1663726202282, 200],
          [1663726202283, 150],
          [1663726202284, 180],
          [1663726202285, 170],
          [1663726202286, 110],
          [1663726202287, 130],
        ],
        type: "scatter",
        markLine: {
          // symbol: ["none", "none"],
          data: [
            {
              name: "11",
              yAxis: 150,
              symbol: "none",
            },
            {
              name: "22",
              yAxis: 70,
              symbol: "none",
            },
            [
              {
                symbol: "none",
                x: "10%",
                yAxis: 90,
              },
              {
                symbol: "none",
                x: "90%",
                label: {
                  position: "end",
                  formatter: "line",
                },
                lineStyle: { color: "lightgrey" },
                yAxis: 90,
              },
            ],
          ],
        },
      },
    ],
  };

  option && myChart.setOption(option);
</script>

 2 多个图画一张图上、类目轴标签

<div id="main1" style="height: 400px"></div>
<script>
  var chartDom = document.getElementById("main1");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    grid: [
      {
        bottom: 0,
        height: 120,
        top: 30,
      },
      {
        bottom: 0,
        height: 120,
        top: 180,
      },
    ],
    xAxis: [
      {
        type: "category",
        show: false,
      },
      {
        type: "category",
        gridIndex: 1,
        axisLabel: {
          fontSize: 10,
          rotate: 30,
          //定义标签显示内容
          formatter: function (value) {
            if (value.endsWith("6") || value.endsWith("5")) {
              return value;
            }
            return "";
          },
          //定义某些标签是否显示
          interval: function (index, value) {
            if (value.endsWith("5")) {
              return true;
            }
            return false;
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
      {
        type: "value",
        gridIndex: 1,
      },
    ],
    series: [
      {
        data: [
          ["aa1", 120],
          ["aa2", 200],
          ["aa3", 150],
          ["aa4", 180],
          ["aa5", 170],
          ["aa6", 110],
          ["aa7", 130],
        ],
        type: "scatter",
      },
      {
        data: [
          ["aa1", 120],
          ["aa2", 200],
          ["aa3", 150],
          ["aa4", 180],
          ["aa5", 170],
          ["aa6", 110],
          ["aa7", 130],
        ],
        type: "line",
        xAxisIndex: 1,
        yAxisIndex: 1,
      },
    ],
  };

  option && myChart.setOption(option);
</script>

 

 3 箱型图叠加散点图

<div id="main2" style="height: 400px"></div>
<script>
  var chartDom = document.getElementById("main2");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    grid: [
      {
        bottom: 0,
        height: 120,
        top: 150,
      },
      {
        bottom: 0,
        height: 120,
        top: 150,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: ["aa", "bb"],
      },
      {
        type: "category",
        gridIndex: 1,
        show: false,
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        max: 0.05,
      },
      {
        type: "value",
        gridIndex: 1,
        position: "right",
        show: false,
        min: 0,
        max: 0.05,
      },
    ],
    series: [
      {
        data: [
          [0, 0.0155, 0.0213, 0.0271, 0.0445],
          [0, 0.0152, 0.021, 0.027, 0.0447],
        ],
        type: "boxplot",
        boxWidth: ["90%", "98%"],
        itemStyle: {
          borderWidth: 2,
        },
      },
      {
        data: [
          ["aa1", 0.0158],
          ["aa2", 0.0142],
          ["aa3", 0.024],
          ["bb1", 0.022],
          ["bb2", 0.018],
          ["bb3", 0.035],
        ],
        type: "scatter",
        xAxisIndex: 1,
        yAxisIndex: 1,
      },
    ],
  };

  option && myChart.setOption(option);
</script>