gphm/PHM-web/src/components/ECharts/index.vue

<template>
  <div>
    <div id='main'></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  DatasetComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  TransformComponent,
} from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  DatasetComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  TransformComponent,
  LineChart,
  CanvasRenderer,
  LabelLayout,
  UniversalTransition,
])
export default {
  name: 'dataPlayBack',
  data() {
    return {
      //eCharts
      myChart: '',
      //开始和结束时间
      // 查询参数
      startTime: '2023-01-02 00:00:00',
      endTime: '2023-01-02 06:00:00',
    }
  },
  mounted() {
    this.creatECharts()
  },
  methods: {
    creatECharts() {
      if (this.myChart) {
        this.myChart.dispose()
      }
      var dom = document.getElementById('main')
      this.myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false,
      })
      let option
      const a = [
        ['Income', 'Life Expectancy', 'Population', 'Country', 'Year'],
        [615, 34.05, 251014, 'Finland', '2023-01-02 00:00:00'],
        [315, 34.05, 251014, 'Finland', '2023-01-02 01:00:00'],
        [725, 34.05, 251014, 'Finland', '2023-01-02 02:00:00'],
        [315, 34.05, 251014, 'Finland', '2023-01-02 03:00:00'],
        [515, 34.05, 251014, 'Finland', '2023-01-02 04:00:00'],
        [815, 34.05, 351014, 'Finland', '2023-01-02 05:00:00'],
        [1815, 34.05, 351014, 'Finland', '2023-01-02 06:00:00'],
        [814, 39, 645526, 'France', '2023-01-02 00:00:00'],
        [144, 39, 645526, 'France', '2023-01-02 01:00:00'],
        [454, 39, 645526, 'France', '2023-01-02 02:00:00'],
        [734, 39, 645526, 'France', '2023-01-02 03:00:00'],
        [144, 39, 645526, 'France', '2023-01-02 04:00:00'],
        [999, 39, 645526, 'France', '2023-01-02 05:00:00'],
        [814, 39, 645526, 'France', '2023-01-02 06:00:00'],
      ]
      let that = this
      run(a)

      function run(_rawData) {
        const countries = ['Finland', 'France']
        const datasetWithFilters = []
        const seriesList = []
        echarts.util.each(countries, function (country) {
          var datasetId = 'dataset_' + country
          datasetWithFilters.push({
            id: datasetId,
            fromDatasetId: 'dataset_raw',
            transform: {
              type: 'filter',
              config: {
                and: [
                  {
                    dimension: 'Year',
                    gte: that.startTime,
                    parser: 'time',
                  },
                  {
                    dimension: 'Year',
                    lt: that.endTime,
                    parser: 'time',
                  },
                  { dimension: 'Country', '=': country },
                ],
              },
            },
          })
          seriesList.push({
            type: 'line',
            datasetId: datasetId,
            showSymbol: false,
            name: country,
            endLabel: {
              show: true,
              formatter: function (params) {
                return params.value[3] + ': ' + params.value[0]
              },
            },
            labelLayout: {
              moveOverlap: 'shiftY',
            },
            emphasis: {
              focus: 'series',
            },
            encode: {
              x: 'Year',
              y: 'Income',
              label: ['Country', 'Income'],
              itemName: 'Year',
              tooltip: ['Income'],
            },
          })
        })
        option = {
          animationDuration: that.speed,
          dataset: [
            {
              id: 'dataset_raw',
              source: _rawData,
            },
            ...datasetWithFilters,
          ],
          title: {
            text: '',
          },
          tooltip: {
            order: 'valueDesc',
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            nameLocation: 'middle',
          },
          yAxis: {
            name: 'Income',
          },
          grid: {
            right: 140,
          },
          series: seriesList,
        }
        that.myChart.setOption(option)
      }
    },
  }
}
</script>

<style scoped>
#main {
  width: 1200px;
  height: 500px;
}
</style>