# 折线图(line)示例

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);

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

const option = {
  grid: {
    left: 10,
    right: 10,
    top: 30,
    bottom: 30,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['06-16', '06-17', '06-18', '06-19', '06-20', '06-21', '06-22'],
    axisLine: { lineStyle: { color: '#999' } },
    axisTick: { show: false }
  },
  yAxis: {
    type: 'value',
    axisLine: { show: false },
    axisTick: { show: false },
    splitLine: { lineStyle: { color: '#eee' } }
  },
  // 鼠标移到每个数据上出现悬浮窗口，显示数据信息   鼠标hover
  tooltip: {
    trigger: 'axis'
  },
  series: [{
    name: '数据',
    type: 'line',
    smooth: true, // 平滑曲线
    data: [40, 80, 60, 100, 90, 110, 125],
    // 设置数据点显示圆点
    symbol: 'circle',
    symbolSize: 8,
    // 每个数据点的样式，需要设置symbol: 'circle',才会生效
    itemStyle: {
      color: '#fff',          // 数据点颜色
      borderColor: '#1890ff', // 数据点边框颜色
      borderWidth: 2          // 数据点边框宽度
    },
    // 点和点之间的连线样式
    lineStyle: {
      color: '#1890ff',       // 连线颜色
      width: 2                // 连线宽度
    },
    areaStyle: {
      // 渐变填充
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(24,144,255,0.5)' },
        { offset: 1, color: 'rgba(24,144,255,0)' }
      ])
    }
  }]
};