UA 整理提交

he wei

5 天以前 3c3576d5792bfabcef84979757ee344712e71cd3

 src/components/echarts/line1.vue

@@ -5,10 +5,10 @@

  const chart = ref(null);
  const props = defineProps({
    type: {
      type: String,
      default: '电流'
    },
    // type: {
    //   type: String,
    //   default: '电流'
    // },
    title: {
      type: String,
      default: ''
@@ -19,10 +19,45 @@
    }
  });

  function getSeries(_props, datas) {
      let series = [];
    let xlabels = [];
    let _datas = {};
    _props.forEach((item, idx) => {
      _datas[item[1]] = [];
    });

 function getOptions(xLabels, datas) {
    xLabels = xLabels || [];
    datas.forEach(v => {
      xlabels.push(v.recordDatetime);
      _props.forEach((item, idx) => {
        _datas[item[1]].push(v[item[1]]);
      });
    });
    
      _props.forEach((item, idx) => {
         series.push({
            type: 'line',
        name: item[0],
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
               width: 1
            },
            data: _datas[item[1]],
         });
      });
      return [series, xlabels];
   }

 function getOptions(labels, datas) {
    labels = labels || [];
    datas = datas || [];

    let [series, xLabels] = getSeries(labels, datas);
    console.log('labels', labels, 'datas', series, '=============');
    
      const option = {
         // title: {
         //    text: props.title,
@@ -41,11 +76,16 @@
               }
            }
         },
      legend: {
        textStyle: {
          color: '#fff'
        }
      },
         grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
        top: 30,
        top: 60,
            containLabel: true
         },
         xAxis: [{
@@ -81,34 +121,35 @@
               }
            }
         }],
         series: [{
            name: props.type,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
          width: 1
            },
            areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(0, 136, 212, 0.3)'
          }, {
            offset: 0.8,
            color: 'rgba(0, 136, 212, 0)'
          }], false),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
            },
            itemStyle: {
          color: 'rgb(0,136,212)',
          borderColor: 'rgba(0,136,212,0.2)',
          borderWidth: 12
            },
            data: datas
         }]
      series,
         // series: [{
         //    name: props.type,
         //    type: 'line',
         //    smooth: true,
         //    symbol: 'circle',
         //    symbolSize: 5,
         //    showSymbol: false,
         //    lineStyle: {
      //     width: 1
         //    },
         //    areaStyle: {
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //       offset: 0,
      //       color: 'rgba(0, 136, 212, 0.3)'
      //     }, {
      //       offset: 0.8,
      //       color: 'rgba(0, 136, 212, 0)'
      //     }], false),
      //     shadowColor: 'rgba(0, 0, 0, 0.1)',
      //     shadowBlur: 10
         //    },
         //    itemStyle: {
      //     color: 'rgb(0,136,212)',
      //     borderColor: 'rgba(0,136,212,0.2)',
      //     borderWidth: 12
         //    },
         //    data: datas
         // }]
      };

      return option;