line: simple line

简单折线图

HTML

<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>
<div id="main" style="width: 800px;height:600px;"></div>

JavaScript

var myChart = echarts.init(document.getElementById('main'));
   function renderItem(params, api) {
    const value = api.value(3);
    const categoryIndex = api.value(0);
    const start = api.coord([api.value(1), categoryIndex]);
    const end = api.coord([api.value(2), categoryIndex]);
    const apiSize = api.size([0, 1])[1];
    let height = apiSize * 0.6;
    if (value === 0) {
      height = height * 0.1;
    }
    let rectShape = echarts.graphic.clipRectByRect(
      {
        x: start[0],
        y: start[1] - height - apiSize * -0.3,
        width: end[0] - start[0],
        height: height
      },
      {
        x: params.coordSys.x, // as any since typing is not correct yet in echarts lib
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
      }
    );
    return (
      rectShape && {
        type: 'rect',
        transition: ['shape'],
        shape: rectShape,
        style: { stroke: api.visual('color'), strokeOpacity: 1, fill: api.visual('color'), opacity: 0.8 }
      }
    );
  }
  myChart.setOption(
    (option = {
    "tooltip": {
        "trigger": "axis",
        "confine": true
    },
    "useUTC": true,
    "legend": {},
    "axisPointer": {
        "link": [
            {
                "xAxisIndex": [
                    0,
                    1
                ]
            }
        ]
    },
    "grid": [
        {
            "left": 60,
            "right": 50,
            "height": "35%"
        },
        {
            "id": "grid-item-BOOLEAN",
            "left": 60,
            "right": 50,
            "top": "55%",
            "height": "35%"
        }
    ],
    "xAxis": [
        {
            "type": "time",
            "boundaryGap": false,
            "min": 1636329600000,
            "max": 1636415999000
        },
        {
            "type": "time",
            "boundaryGap": false,
            "gridIndex": 1,
            "min": 1636329600000,
            "max":...