Apache ECharts 折れ線グラフ

by zu_min

HTML

<div id="main" style="height:320px;"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

JavaScript

const el = document.getElementById("main");
const chart = echarts.init(el);

const x = Array.from({length: 120}, (_, i) => i);
const y = x.map(i => Math.sin(i / 10) * 20 + 100);

chart.setOption({
  title: { text: "ECharts" },
  tooltip: {
    trigger: "axis",
    axisPointer: { type: "cross" }
  },
  legend: {
    top: 12,
    left: 0,
    data: ["metric"]
  },
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: "category",
    data: x,
    name: 'index',
  },
  yAxis: {
    type: "value",
    min: 80, // "dataMin" でデータの最小値にもできる
    name: 'value',
  },
  dataZoom: [
    { type: "inside", xAxisIndex: 0 },          // ホイール/ピンチでズーム
    { type: "slider", xAxisIndex: 0, height: 24 } // 下部スライダー
  ],
  series: [{
    type: "line",
    name: "metric",
    data: y,
    showSymbol: false,
    smooth: true
  }]
});

window.addEventListener("resize", () => chart.resize());