实现拆线图效果:标记最大值最小值,平均值,标注区间,

实现拆线图效果:标记最大值最小值,平均值,标注区间,线条控制:平滑风格,填充风格,x轴起始位置紧挨边缘,缩放:scale脱离0值比例 stack 堆叠图

 

<template>
  <div>
    <div>
      <h4>
        实现拆线图效果:标记最大值最小值,平均值,标注区间,线条控制:平滑风格,填充风格,x轴起始位置紧挨边缘,缩放:scale脱离0值比例
        stack 堆叠图
      </h4>
    </div>
    <div id="myChart" :style="{ width: '600px', height: '500px' }"></div>
  </div>
</template>

<script>
export default {
  name: 'Lines',
  data() {
    return {}
  },
  mounted() {
    this.getLine()
  },
  methods: {
    getLine() {
      let myChart = this.$echarts.init(document.getElementById('myChart'))

      let xData = [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月',
      ]
      let yData = [700, 920, 650, 651, 450, 405, 504, 523, 423, 504, 542, 521]
      let yData2 = [710, 320, 450, 351, 550, 425, 204, 423, 523, 564, 542, 521]
      let option = {
        xAxis: {
          type: 'category',
          data: xData,
          boundaryGap: false, //让一月这个起始月份紧挨着Y轴边缘
        },
        yAxis: {
          type: 'value',
          scale: true, //脱离0值比例,防止数据太贴近造成平线的效果
        },
        series: [
          {
            name: '康师傅业绩',
            stack: 'all', //禁止堆叠效果
            label: {
              show: true, //显示拆线具体的值
            },
            data: yData,
            type: 'line',
            // 最大,最小值
            markPoint: {
              data: [{ type: 'max' }, { type: 'min' }],
            },
            //平均值
            markLine: {
              data: [{ type: 'average' }],
            },
            // 标注区间
            markArea: {
              data: [
                [
                  {
                    xAxis: '一月',
                  },
                  {
                    xAxis: '二月',
                  },
                ],
                [
                  {
                    xAxis: '八月',
                  },
                  {
                    xAxis: '九月',
                  },
                ],
              ],
            },
            // 让拆线图实现平滑风格
            smooth: true,
            //设置拆线样式
            lineStyle: {
              color: 'green',
              type: 'dashed', //可选dotted solid
            },
            // 拆线图内的数据显示阴影
            areaStyle: {
              color: 'pink',
            },
          },
          {
            name: '统一业绩',
            data: yData2,
            type: 'line',
            stack: 'all', //禁止堆叠效果
            label: {
              show: true, //显示拆线具体的值
            },
          },
        ],
      }

      myChart.setOption(option)
    },
  },
}
</script>

<style>
</style>