<div id="echarts" style="width: 600px;height: 400px;margin-top: 100px;margin-left: 100px"></div>

　　js函数中：

this.EchartsData = this.$echarts.init(document.getElementById('echarts'));
let option1 = {
title: {
    text: '我是折线图', //标题
    subtext: '我来自福建',//副标题
    x:'left', //可设置标题的位置，有left,center,right三个
    textStyle: {
    color: 'red', //设置标题的颜色 
    fontSize:'18' //设置标题的字体大小
   }
},
tooltip : {
    trigger: 'axis', //默认是item,是当鼠标移动到图表上时显示当前节点的信息，如果为            
axis是显示已这个横坐标范围内的所有节点的信息

　　formatter: "{a} <br/>{b}: {c} ({d}%)"

　　axisPointer: { 
　　　　type: 'cross',// 设置鼠标移动到当前节点的会有虚线标识这个节点的横坐标和纵坐 标，
还有一个是shadow，显示的当前横坐标范围内的所有节点信息 
　　label: {
 　　　　backgroundColor: 'red'//设置当前节点的横坐标与纵坐标的背景颜色，突出当前节 点的坐标

　　　 }
 　　}
 }, 
grid: { //设置图标距离四周的距离 
　　x:50,
 　 y:80,
 　 x2:60,
 　 y2: 70,
 　 containLabel: true
 }, 
legend: { 
　　data:['折线一','折线二','折线三','折线四','折线五'],
 //这个里面的每一个都自懂绑定series中对应的name的信息，这个是可以用来进行切换是否显示这个信息
 　 x: 'center', //用来设定这些图例的位置，有left,center,right 
　　textStyle: { //
　　　　color: 'red', //设置legend的颜色 
　　　　fontSize:'18' //设置legend的字体大小
 　 } 
}, 
dataZoom: [ //可实现底下多个滚动条，然后可左右滑动 
{ 
　　show: true, //是否显示滚动条 
　　realtime: true, 
　　start:0, //滚动条的起点位置 
　　end: 80, //滚动条的终止位置 
　　handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,
　　0.3-8.8,4.4- 8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,
　　8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,
　　24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', // 修改默认的滑块样式 
　　handleSize: '50%', //修改挂快的半径 
　　handleStyle: { 
　　　　color: '#fff', //修改滑块的颜色 
　　　　shadowBlur: 3, 
　　　　shadowColor: 'rgba(0, 0, 0, 0.6)', 
　　　　shadowOffsetX: 2, // x轴向右偏移的阴影 
　　　　shadowOffsetY: 2 // y轴向下偏移的阴影 
　　}, 
　　bottom:'0%', 
　　height: '40' 
　　} 
], 
toolbox: { 
　　left:'right', //设置先出图标操作的图标位置 
　　feature: { 
　　　　dataZoom: { 
　　　　　　yAxisIndex: 'none' 
　　}, 
　　restore: {}, 
　　saveAsImage: {} 
　　} 
}, 
xAxis : [ 
{ 
　　type : 'category',
 　 boundaryGap : false,//图标的左边是否留白，false不留白，true留白 
　　data : ['周一','周二','周三','周四','周五','周六','周日'], 
　　axisLine: { 　　
　　　　symbol: ['none', 'arrow'], //设置x轴或y轴箭头 　
　　　　lineStyle: { 
　　　　　　color: '#B5B5B5', 
　　　　　　width: 2, //这里是为了突出显示加上的 } 
　　　　}, //刻度是向内还是向外 
　　axisTick:{ inside:true, length:1, },
 　 splitLine: { 
　　show: true, 
　　lineStyle: { 
　　type: 'solid', 
　　color:'#FCFCFC',//网格颜色 
　　} 
},
 axisLabel:{ //调整x轴的lable //
　　interval:0, //按x轴的长度显示的刻度的个数 例如：本来显示20个刻度，因为x轴端只显示了10个， 
　　rotate:0, //实现x轴的刻度的标识实现旋转， 
　　textStyle:{ 
　　fontSize:10,// 让字体变大 
　　color:"#B5B5B5"
 　 }
 }, 
nameTextStyle: {
 　　color: "#B5B5B5", 
　　 verticalAlign: "bottom", 
　　 fontSize:'10', 
　　 padding:[35,50,10,-2] //设置x轴的标题的位置 
　　 },
 　　boundaryGap : false,
　　　　}
    }
],
yAxis : [
{
    type : 'value',
    name : '高度(ml)',//设置左上角的单位指标
    axisLabel: {
        formatter: '{value}ml' //设置y轴坐标的单位
        }, 
   },

axisLine: {
    　　symbol: ['none', 'arrow'], //设置x轴或y轴箭头
    　　lineStyle: {
           color: '#B5B5B5',
           width: 2, //这里是为了突出显示加上的
            }
     　　},
      //刻度是向内还是向外
      axisTick:{
            inside:true,
            length:1,
            },
      splitLine: {
            show: true,
            lineStyle: {
            type: 'solid',
            color:'#FCFCFC',//网格颜色
             }
      },
      axisLabel:{ //调整x轴的lable
      //interval:0,  //按x轴的长度显示的刻度的个数    例如：本来显示20个刻度，因为x轴端只显示了10个，
       rotate:0,  //实现x轴的刻度的标识实现旋转，
       textStyle:{
       fontSize:10,// 让字体变大
       color:"#B5B5B5"
        }
    },
    nameTextStyle: {
               color: "#B5B5B5",
               verticalAlign: "bottom",
               fontSize:'10',
               padding:[35,50,10,-2] //设置x轴的标题的位置
               },
               boundaryGap : false,
　　　　}

], //label的属性可2放在外面也可以放在里面的series对应的内一个选项里面进行设置 
label:{ //修改每个柱子所对应的数据 
　　normal:{ 
　　show: true, //设置数据是否显示
　　position:'inside',//设置显示在位置，有inside,outside,top,bottom, 
　　textStyle: { 
　　　　fontSize: 15//设置字体大小 // 
　　　　color:'red'//设置柱子上面数据的颜色 
　　　　} 
　　} 
}, 
series : [
 { 
　　name:'折线一', 
　　type:'line', 
　　stack: '总量',
 　　areaStyle: {
 　　　　normal: {
 　　　　　　color:'red'//设置填充颜色 
　　　　} 
　　}, 
　　label: { 
　　　　normal: {
 　　　　show: true, 
　　　　position:'top',//设置显示在内还是在外 
　　　　textStyle: { 
　　　　fontSize: 15,//设置字体大小 
　　　　color:'red'//设置柱子上面数据的颜色 
　　　　} 
　　} 
}, 
itemStyle : { //设置折线的颜色
 　　normal : { 
　　　　lineStyle:{ 
　　　　color:'red' 
　　　　} 
　　} 
}, 
data:[120, 132, 101, 134, 90, 230, 210] },