Echarts 折线图

1:  Echarts 折线图的实现
  1.1: 引入echarts 模块: 
 import * as echarts from 'echarts';
  1.2:  var chartDOM = document.getElementById('main');  //  湖区哦
  1.3:  var myCharts = echarts.init(chartDOM);

  var option;

  option = {
    title: {
      text: "未来一周的气温变化"    // 主标题
      subtext: '纯属虚构'
    }
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['最高气温'， '最低气温']
    },
   toolbox: {
     show: true,   //  工具箱的显示与隐藏
     feature: {
       dataZoom: {
         yAxisIndex: "none";
       }
       dataZoom: {readOnly: false},
       magicType: {type: ['bar', 'line']}, 
       restore: {},   //  重置区域
       saveAsImage: {}     //  下载图片
     }
   },
   xAxis: {       // x轴数据源
     type: "category",
     boundaryGap: false,
     data: ['周一'， '周二', '周三',  '周四', '周五', '周六', '周日']
   },
   yAxis: {
      type: 'value',
      axisLable: {
        format: {
           formatter: '{value} °C'
        }
      }
   },
   series: [
        {
            name: '最高气温',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: '最低气温',
            type: 'line',
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            position: 'start',
                            formatter: '最大值'
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
  }