echarts趋势折线图

<template>
  <div ref="chart" class="trendChart"></div>
</template>

<script>
import { getTrend, getAllTrend } from '@/request/publicSentiment'

export default {
  name: 'trendChart',
  data () {
    return {
      trenddata: []
    }
  },
  props: {
	// 父传给子的值，作为入参  
    areaid: String,
    comunityid: String,
    dateid: Number,
    id: null
  },
  watch: {
  	// 监听入参，当入参改变时，重新调接口渲染图表
    areaid (newvalue) {
      this.initchart ()
    },
    dateid (value) {
      this.initchart ()
    }
  },
  mounted () {
    this.initchart()
  },
  methods: {
    async initchart () {
      const chart = this.$echarts.init(this.$refs.chart)
      chart.clear()
      // 获取数据
      let res
      if(this.areaid === '0') {
        res = await getAllTrend(this.dateid)
      }else {
        res = await getTrend(this.comunityid,this.areaid,this.dateid)
      }
      if (res.code === 200) {
        const data = res.data
        this.trenddata = data
      }
      // 折线趋势图的配置项
      const option = {
      	// 提示框组件
        tooltip: {
          trigger: 'axis', // 触发类型，axis是坐标轴触发，主要在折线图、柱状图等会使用类目轴的图表中使用
          position: function (pt) { // 提示框的位置设置
            return [pt[1], '10%']
          }
        },
        // 图表的位置
        grid: {
          left: '13%',
          right: '10%',
          top: '10%',
          bottom: '30%'
        },
        // x轴的相关配置
        xAxis: {
          type: 'category',
          boundaryGap: false, // 坐标轴两侧是否留白
          // x轴坐标刻度值
          axisLabel: {
            fontSize: 9,
            color: 'rgba(0, 0, 0, 0.45)'
          },
          // x轴坐标轴线
          axisLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          },
          // x轴坐标刻度线
          axisTick: {
            show: false
          },
          data: this.trenddata[0]
        },
        // y轴的相关配置
        yAxis: {
          type: 'value',  // 数值轴
          boundaryGap: [0, '100%'],  // 设置min max后无效
          axisLabel: {
            fontSize: 9,
            color: 'rgba(0, 0, 0, 0.45)'
          },
          splitNumber: 4, // 坐标轴的分割段数+min就可以设置间隔
          min: 0,
          // max: 80
        },
        // 缩放控件
        dataZoom: [
          {
            type: 'inside', // 内置控件，就是可以滑动的那部分
            start: 0, // 数据窗口的起始百分比，即开始显示位置
            end: 100 // 数据窗口的结束百分比，即结束显示位置
          },
          // 缩放控件的背景板那块
          {
            start: 0,
            end: 100,
            height: 14,
            borderRadius: 10,
            backgroundColor: '#F7F8FD', // 缩放控件的背景色
            // 数据阴影的样式
            dataBackground: {
              // 阴影线条的样式 
              lineStyle: {
                color: '#F7F8FD'
              },
              // 阴影的填充样式
              areaStyle: {
                color: 'transparent'
              }
            },            
            fillerColor: '#F7F8FD', // 选中范围的填充颜色
            handleIcon: 'circle', // 手柄的样式，也可以设置为自定义图片
            handleSize: 15 // 手柄的大小
          }
        ],
        series:
          [
            {
              name: '今日上报',
              type: 'line',
              symbol: 'none',
              sampling: 'lttb',
              smooth: true,
              itemStyle: {
                color: 'rgba(255, 71, 71, .5)'
              },
              areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(255, 71, 71, .5)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 221, 221, 1)'
                  }
                ])
              },
              label: {
                show:true,
              },
              data: this.trenddata[1]
            }
          ]
      }
      chart.setOption(option)
      setTimeout(function (){
        window.onresize = function () {
            chart.resize();
        }
      },200);
    }
  }
}
</script>

<style scoped>
.trendChart {
  width: 100%;
  height: 100%;
}
</style>