ibms/src/components/point/report/curve.vue

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="曲线"
    class="curve"
  >
    <!-- 图表 -->
    <div class="chart-area" ref="chart"></div>
  </el-dialog>
</template>

<script>
import echarts from 'echarts'

export default {
  name: "curve",
  data() {
    return {
      lineChart: null,//折线表
      chartData: ['2020-01-01', '2020-01-02', '2020-01-03', '2020-01-04', '2020-01-05'],//数据表
      dialogVisible: false
    }
  },
  methods: {
    open() {
      this.timeoutSetVal()
      this.dialogVisible = true
    },
    timeoutSetVal() {
      setTimeout(() => {
        if (this.$refs.chart) {
          //折线图参数
          // let lineChartOption = {
          //   tooltip: {
          //     trigger: 'axis',
          //     position: function (pt) {
          //       return [pt[0], '10%'];
          //     }
          //   },
          //   xAxis: {
          //     type: 'category',
          //     boundaryGap: false,
          //     data: this.chartData.map(item => item)
          //   },
          //   yAxis: {
          //     type: 'value',
          //     boundaryGap: [0, '100%']
          //   },
          //   dataZoom: [{
          //     type: 'inside',
          //     start: 80,
          //     end: 100
          //   }, {
          //     start: 0,
          //     end: 10,
          //     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: '80%',
          //     handleStyle: {
          //       color: '#fff',
          //       shadowBlur: 3,
          //       shadowColor: 'rgb(144, 147, 153)',
          //       shadowOffsetX: 2,
          //       shadowOffsetY: 2
          //     }
          //   }],
          //   series: [
          //     {
          //       name: '数值',
          //       type: 'line',
          //       smooth: true,
          //       symbol: 'none',
          //       sampling: 'average',
          //       itemStyle: {
          //         color: 'rgb(103, 194, 58)'
          //       },
          //       areaStyle: {
          //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //           offset: 0,
          //           color: 'rgb(225, 243, 216)'
          //         }, {
          //           offset: 1,
          //           color: 'rgb(225, 243, 216)'
          //         }])
          //       },
          //       data: this.chartData.map(item => item)
          //     }
          //   ]
          // };
          this.lineChart = echarts.init(this.$refs.chart);
          var data = [
            ["2000-06-05", 116],
            ["2000-06-05", 73],
            ["2000-06-10", 85],
            ["2000-06-11", 73],
            ["2000-06-12", 68],
            ["2000-06-13", 92],
            ["2000-06-14", 130],
            ["2000-06-15", 245],
            ["2000-06-16", 139],
            ["2000-06-17", 115],
            ["2000-06-18", 111],

          ]
          var dateList = data.map(function (item) {
            return item[0];
          });
          var valueList = data.map(function (item) {
            return item[1];
          });
          let lineChartOption = {
            visualMap: [{
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 400
            }, {
              show: false,
              type: 'continuous',
              seriesIndex: 1,
              dimension: 0,
              min: 0,
              max: dateList.length - 1
            }],
            tooltip: {
              trigger: 'axis'
            },
            xAxis: [{
              // data: dateList
              data: ['2000-07-17', '2000-07-18', '2000-07-19', '2000-07-20']
            }, {
              data: dateList,
              gridIndex: 1
            }],
            yAxis: [{
              splitLine: {show: false}
            }, {
              splitLine: {show: false},
              gridIndex: 1
            }],
            grid: [{
              bottom: '60%'
            }, {
              top: '60%'
            }],
            series: [{
              type: 'line',
              showSymbol: false,
              data: valueList
            }, {
              type: 'line',
              showSymbol: false,
              data: valueList,
              xAxisIndex: 1,
              yAxisIndex: 1
            }]
          }
          this.lineChart.setOption(lineChartOption);
        } else {
          this.timeoutSetVal()
        }
      }, 500)
    },
  },
  mounted() {
    let _this = this
    window.onresize = () => {
      _this.lineChart.resize()
    }
  },
}
</script>

<style scoped lang="less">
.curve {
  .chart-area {
    height: 450px;
  }
}
</style>