# 折线图(line)示例1

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option = {
  // 更多的配置：https://echarts.apache.org/zh/option.html#title
  // 整个图表的总标题
  title: {
    text: '整个图表的标题',
    textStyle: { fontSize: 30 }
  },
  // 图表跟容器间的设置，可以调节图表距离容器的位置
  grid: { left: 30, right: 20 /*调节距离容器边距的位置*/ },
  // 每条数据的名字标题设置，不写则不显示
  legend: { bottom: '0%', left: 'center' },
  // 鼠标移到每个数据上出现悬浮窗口，显示数据信息   鼠标hover
  tooltip: {
    trigger: 'axis'
  },
  // X轴坐标信息设置
  xAxis: {
    type: 'category',
    // X轴显示的坐标信息，可以使用'\n'符号进行换行
    data: [
      '09:00\n07-06', '10:00\n07-06', '11:00\n07-06',
      '12:00\n07-06', '12:00\n07-06', '12:00\n07-06',
      '12:00\n07-06'
    ]
  },
  // Y轴坐标信息设置
  yAxis: {
    type: 'value'
  },
  // 显示的数据系列，每种数据都要标记是那种类型，每条数据的显示设置在这里添加
  series: [
    {
      name: '数据1', // 这条数据的名字
      data: [820, 632, 501, 434, 500, 700, 1320],
      type: 'line',
      smooth: true
    },
    {
      name: '数据2', // 这条数据的名字
      data: [300, 350, 500, 900, 1000, 1024, 1160],
      type: 'line',
      smooth: true
    }
  ]
};
option && myChart.setOption(option);