echarts 配置

HTML:

<template>
  <div class="tendencyChart">
    <HeaderNav :navList="navList" :parentPath="parentPath"></HeaderNav>

      <div class="nav">
        <Row>
          <Col span="6" class="">
          <p :class="{'active':isActive=='0'}" @click="selFun('0')">
            <span>1个月</span>
          </p>
          </Col>
          <Col span="6" class="">
          <p :class="{'active':isActive=='1'}" @click="selFun('1')">
            <span>3个月</span>
          </p>
          </Col>
          <Col span="6" class="">
          <p :class="{'active':isActive=='2'}" @click="selFun('2')">
            <span>6个月</span>
          </p>
          </Col>
          <Col span="6" class="">
          <p :class="{'active':isActive=='3'}" @click="selFun('3')">
            <span>1年</span>
          </p>
          </Col>
        </Row>
      </div>
      <div id="chartsMain" ref="main" style=""></div>
  </div>
</template>

JS:

<script>
  import HeaderNav from '../../../components/header.vue'
  import echarts from 'echarts';
  import {HOMEPAGE_A} from '../../../store/action-types'
  import {mapMutations, mapActions, mapGetters, mapState} from 'vuex'

  export default{
    data(){
      return {
        //头部参数
        navList: '定投价格趋势图',
        parentPath: 'home',
        isActive: '0',
        params: {
          timeRange: ''
        },
        myChart: '',
        yData: '',
        xData: '',
        bar: {
          //提示框组件，包括提示框浮层和 axisPointer。
          tooltip: {
            trigger: 'axis',
            borderColor: '#000',
            padding: [5, 10],
            confine:true,
            position: function (pt) {
              return [pt[0], '10%'];
            },
            axisPointer: {
              lineStyle:{
                  color:'#FF7600'
              }
            }
          },
          title: {
            text: '单位： /元',
            textStyle: {
              color: '#FF7600',
              fontSize: '12',
              fontWeight: 'normal'
            },
            padding: [25, 35]
          },
         //设置图表位置
          grid: {
            top: 60,
            bottom: 80,
            left: 20,
            right: 30,
            //grid 区域是否包含坐标轴的刻度标签。[ default: false ]
            containLabel: true
          },
          xAxis: {
            data: [],
            //轴线单位坐标线对应的方向
            axisTick: {
              show: false
            },
            //从零刻度开始
            boundaryGap: false,
            //设置轴线的属性
            axisLine: {
              lineStyle: {
                color: '#F6A623',
                width: 1,
              }
            },
            axisLabel: {
              show: true,
//              interval:0,//显示全部数据
              textStyle: {
                fontSize: ".2rem",
                color: "#FF7600",
                align: "center"
              }
            },
            //网格线
            splitLine: {
              show: false
            },
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: ".2rem",
                color: "#FF7600",
                align: "right"
              },
              formatter: function (e) {
                return e;
              }
            },
            //设置轴线的属性
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff',
                width: 1,
              }
            },
            //网格线
            splitLine: {
              show: true,
              lineStyle: {
                color: "#F6A623",
                type: "solid"
              }
            },
          },
          //滑块
          dataZoom: [
            {
              type: 'slider',
              xAxisIndex: [0],
              //组件高度
              height: 20,
              //下边的距离
              bottom: 15,
              //字体颜色
              textStyle: {
                color: '#fff',
              },
              //边框颜色
              borderColor: 'transparent',
              //选中范围的填充颜色
              fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                //给第一个设置0，第四个设置1，就是垂直渐变
                offset: 0,
                color: '#F88B30'
              }, {
                offset: 1,
                color: '#F9B84C'
              }]),
              //控制手柄的尺寸
              handleSize: 15,
              //手柄的样式配置
              handleStyle: {
                color: '#fff',
                shadowBlur: 10,
                shadowColor: 'rgba(255, 255, 255, 1)',
              },
              //背景块样式
              dataBackground: {
                lineStyle: {
                  width: 0
                },
                areaStyle: {
                  color: 'rgba(0,0,0,0.2)',
                }
              },
              //手柄的 icon 形状
              handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
              filterMode: 'filter',
            },

            {
              type: 'inside',
              xAxisIndex: 0,
              filterMode: 'empty'
            },

          ],
          series: [
            {
              name: '定投价格',
              type: 'line',
              data: [],
              animationDuration: 1500,
              //平滑曲线
//              smooth: true,
              //每个折点显示数值
              label: {
                normal: {
                  show: false
                }
              },
              symbol: 'none',
              symbolSize:6,
              //拐点颜色设置
              itemStyle: {
                normal: {
                  color: "#FF7600"
                },
              },
              //折线样式
              lineStyle: {
                normal: {
                  color: '#fff',
                  width: 1
                }
              },
              //面积样式
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: 'rgba(255,188,0,0.5)'},
                      {offset: 0.5, color: 'rgba(248,180,10,0.5)'},
                      {offset: 1, color: 'rgba(240,198,23,0.5)'}
                    ]
                  )
                }
              },
            }
          ]

        }
      }
    },
    created(){
      this.setListFun();
    },
    methods: {
      ...mapActions({
        getSysPriceGraph: HOMEPAGE_A.getSysPriceGraph
      }),

      setListFun(){
        var _this = this;
        this.getSysPriceGraph(this.params).then(function (res) {
          if (res.code === '1') {
            for (var i = 0; i < res.data.xList.length; i++) {
              res.data.xList[i] = _this.format(res.data.xList[i]);
            }
            _this.xData = res.data.xList;
            _this.yData = res.data.yList;

            _this.myChart.setOption({
              xAxis: {
                data: _this.xData
              },
              series: {
                data: _this.yData
              }
            })
          }
        });
      },

      selFun: function (type) {
        this.isActive = type;
        this.params.timeRange = type;
        this.setListFun();
      },

      drawLineChart(){
        //初始化charts
        var a = document.getElementById('chartsMain');
        this.myChart = echarts.init(a);

        this.myChart.setOption(this.bar);
        
        //图形自适应窗口大小
        window.onresize = this.myChart.resize;

      },

      format(val){
        var date = new Date(val);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
//        return y + '-' + m + '-' + d;
        return m + '-' + d;
      }
    },

    mounted(){
      //设置容器高
      var height = document.body.offsetHeight;
      this.$refs.main.style.height = (height / 50 - 2.16) + 'rem';

      this.drawLineChart();

    },
    components: {
      HeaderNav,
      echarts
    }
  }
</script>

CSS:

<style lang="scss">
  .tendencyChart {

    .nav {
      height: .79rem;
      line-height: .79rem;
      border-bottom:.01rem solid #e8e8e8;
      background: #fff;

      div{

      }
      p {
        text-align: center;
        font-size: .30rem;
        color: #999999;
      }

      p.active > span{
        color: #FF7600;
        border-bottom:.01rem solid #FF7600;
        line-height: .79rem;
        display: inline-block;
        font-family: 'PingFangSC-Medium';
      }

    }

    #chartsMain {
      width: 100%;
      /*background: linear-gradient(to bottom, #F88B30 0%, #F9D24C 100%) !important;*/
      background: #fff !important;
    }

    .chart {
      height: 100%;
    }
  }

</style>