Echart折线图多参数修改：自适应窗口大小+修改toolbox颜色+修改x，y轴颜色，坐标大小和颜色等等

前言

最近在准备一个比赛，需要使用的数据图像化处理，所以采用了ECharts的折线图，其中的参数太多了，为了找到适合自己的效果图，不断调试修改参数，最终得到一个还算可以的折线图，就在此贴出来吧。

最终效果图

*注：背景是整个页面的背景，我的代码只是修改了折线图的一些配置。

pc：

mobile：(忽略右上那个黑色方块，我是用来打开另一个组件的)

---

代码：

<template>
  <div class="myLine">
    <div :id="myLineId" class="line">

    </div>
  </div>
</template>

<script>
  let echarts = require('echarts/lib/echarts')
  require('echarts/lib/chart/line')
  require('echarts/lib/chart/bar')
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/legend')
  require('echarts/lib/component/title')
  require('echarts/lib/component/toolbox')
  export default {
    data () {
      return {
        Line:'',                   //折线图图对象
      }
    },
    mounted () {
      setTimeout(()=>{
        this.drawLine()
      },200)
    },
    props:{
      myLineId:{                   //因为组件复用，所以id都是外面传进来的
        type:String,
        required:true
      }
    },
    methods: {
      //绘制图表
      drawLine(){
        console.log(this.myLineId)
        this.Line = echarts.init(document.getElementById(this.myLineId))
        var _this = this
        window.addEventListener("resize",function () {
          _this.Line.resize();
        })
        this.Line.setOption({
          title: {
            text: ''
          },
          color:['#2db7f5','#ff6600','#808bc6'],
          tooltip: {
            trigger: 'item'   // axis   item   none三个值
          },
          legend: {
            data: $('.myLine').width()>=400?['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']:[]
          },
          grid: {
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
          },
          toolbox: {
            show: true,
            feature: {
              magicType: {//动态类型切换,包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）。
                type: ['bar', 'line','stack','tiled'],
              },
              saveAsImage: {//保存图片
                show: true,
              },
            },
            iconStyle:{
              normal:{
                color:'#FFF',//设置颜色
              }
            }
          },
          xAxis: {
            type: 'category',
            name:'横轴名字',
            nameTextStyle:{                   //横轴名字/大小/宽度
              fontWeight:600,
              fontSize:$(window).width>768?16:14,
            },
            axisLabel: {
              show: true,
              textStyle: {                   //坐标颜色/大小
                fontSize:$(window).width>768?14:10,
                color:'#FFF'
              }
            },                 //X轴坐标样式
            axisLine: {                       //X轴颜色
              lineStyle: {
                color: '#FFF',
              }
            },
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {                           //Y轴坐标样式
            type: 'value',
            name:'纵轴名字',
            nameTextStyle:{                   //纵轴名字/大小/宽度
              fontWeight:500,
              fontSize:$(window).width>768?16:14
            },
            axisLabel: {
              show: true,
              textStyle: {                   //坐标颜色/大小
                fontSize:$(window).width>768?14:10,
                color:'#FFF'
              }
            },
            axisLine: {                       //Y轴颜色
              lineStyle: {
                color: '#FFF',
              }
            },
          },
          series: [
            {
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              smooth:true,            //线条平滑
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'line',
              stack: '总量',
              smooth:true,            //线条平滑
              data: [220, 482, 191, 234, 1090, 330, 310]
            },
            {
              name: '视频广告',
              type: 'line',
              stack: '总量',
              smooth:true,           //线条平滑
              data: [150, 732, 201, 154, 1090, 330, 410]
            },
            {
              name: '直接访问',
              type: 'line',
              stack: '总量',
              smooth:true,           //线条平滑
              data: [320, 332, 901, 334, 390, 1330, 320]
            },
            {
              name: '搜索引擎',
              type: 'line',
              stack: '总量',
              smooth:true,           //线条平滑
              data: [120, 532, 701, 934, 1290, 1330, 1320]
            }
          ]
        })
      }
    },
    watch:{
    }
  }
</script>

<style lang="less">
  .myLine{
    height: 100%;
    width: 100%;
    .line{
      height: 340px;
      overflow: hidden;
    }
  }
  @media screen and(max-width: 767px){      //为了适应小屏幕的效果
    .myLine{
      .line{
        height: 320px;
        overflow: hidden;
      }
    }
  }
</style>