<template>
  <view class="charts-box">
    <qiun-data-charts
        type="line"
        :opts="opts"
        :chartData="chartData"
        :ontouch="true"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      //这里的 opts 是图表类型 type="line" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['line'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        timing: "easeOut",
        duration: 2000,
        rotate: false,
        rotateLock: false,
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        fontSize: 13,
        fontColor: "#666666",
        dataLabel: false,
        dataPointShape: false,
        dataPointShapeType: "solid",
        touchMoveLimit: 60,
        enableScroll: true,
        enableMarkLine: false,
        legend: {
          show: true,
          position: "top",
          float: "center",
          padding: 5,
          margin: 5,
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 0,
          fontSize: 13,
          fontColor: "#666666",
          lineHeight: 11,
          hiddenColor: "#CECECE",
          itemGap: 10
        },
        xAxis: {
          disableGrid: true,
          disabled: false,
          axisLine: true,
          axisLineColor: "#CCCCCC",
          calibration: true,
          fontColor: "#666666",
          fontSize: 13,
          lineHeight: 20,
          marginTop: 5,
          rotateLabel: true,
          rotateAngle: 45,
          labelCount: 20,
          itemCount: 300,
          boundaryGap: "center",
          splitNumber: 5,
          gridColor: "#CCCCCC",
          gridType: "solid",
          dashLength: 4,
          gridEval: 1,
          scrollShow: true,
          scrollAlign: "left",
          scrollColor: "#A6A6A6",
          scrollBackgroundColor: "#EFEBEF",
          title: "时间",
          titleFontSize: 13,
          titleOffsetY: 0,
          titleOffsetX: 10,
          titleFontColor: "#666666",
          format: ""
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: true,
          data: [
            {
              type: "value",
              position: "left",
              disabled: false,
              axisLine: true,
              axisLineColor: "#CCCCCC",
              calibration: true,
              fontColor: "#666666",
              fontSize: 13,
              textAlign: "left",
              title: "温度（℃）",
              titleFontSize: 14,
              titleOffsetY: -10,
              titleOffsetX: 5,
              titleFontColor: "#333333",
              min: 0,
              max: 50,
              tofix: 1,
              unit: "",
              format: ""
            },
            {
              type: "value",
              position: "right",
              disabled: false,
              axisLine: true,
              axisLineColor: "#CCCCCC",
              calibration: true,
              fontColor: "#666666",
              fontSize: 13,
              textAlign: "right",
              title: "湿度（%RH）",
              titleFontSize: 14,
              titleOffsetY: -10,
              titleOffsetX: 0,
              titleFontColor: "#333333",
              min: 0,
              max: 100,
              tofix: 1,
              unit: "",
              format: ""
            }
          ]
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow",
            linearType: "none",
            onShadow: false,
            animation: "vertical"
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: false,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: "#000000",
            borderOpacity: 0.7,
            bgColor: "#000000",
            bgOpacity: 0.7,
            gridType: "solid",
            dashLength: 4,
            gridColor: "#CCCCCC",
            boxPadding: 3,
            fontSize: 13,
            lineHeight: 20,
            fontColor: "#FFFFFF",
            legendShow: true,
            legendShape: "auto",
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: "#FFFFFF",
            labelBgOpacity: 0.7,
            labelFontColor: "#666666"
          },
          markLine: {
            type: "solid",
            dashLength: 4,
            data: [
              {
                value: 0,
                lineColor: "#DE4A42",
                showLabel: false,
                labelAlign: "left",
                labelOffsetX: 0,
                labelOffsetY: 0,
                labelPadding: 6,
                labelText: "",
                labelFontSize: 13,
                labelFontColor: "#666666",
                labelBgColor: "#DFE8FF",
                labelBgOpacity: 0.8
              }
            ]
          }
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: ["00:00","00:05","00:10","00:15","00:20","00:25","00:30","00:35","00:40","00:45","00:50","00:55","01:00","01:05","01:10","01:15","01:20","01:25","01:30","01:35","01:40","01:45","01:50","01:55","02:00","02:05","02:10","02:15","02:20","02:25","02:30","02:35","02:40","02:45","02:50","02:55","03:00","03:05","03:10","03:15","03:20","03:25","03:30","03:35","03:40","03:45","03:50","03:55","04:00","04:05","04:10","04:15","04:20","04:25","04:30","04:35","04:40","04:45","04:50","04:55","05:00","05:05","05:10","05:15","05:20","05:25","05:30","05:35","05:40","05:45","05:50","05:55","06:00","06:05","06:10","06:15","06:20","06:25","06:30","06:35","06:40","06:45","06:50","06:55","07:00","07:05","07:10","07:15","07:20","07:25","07:30","07:35","07:40","07:45","07:50","07:55","08:00","08:05","08:10","08:15","08:20","08:25","08:30","08:35","08:40","08:45","08:50","08:55","09:00","09:05","09:10","09:15","09:20","09:25","09:30","09:35","09:40","09:45","09:50","09:55","10:00","10:05","10:10","10:15","10:20","10:25","10:30","10:35","10:40","10:45","10:50","10:55","11:00","11:05","11:10","11:15","11:20","11:25","11:30","11:35","11:40","11:45","11:50","11:55","12:00","12:05","12:10","12:15","12:20","12:25","12:30","12:35","12:40","12:45","12:50","12:55","13:00","13:05","13:10","13:15","13:20","13:25","13:30","13:35","13:40","13:45","13:50","13:55","14:00","14:05","14:10","14:15","14:20","14:25","14:30","14:35","14:40","14:45","14:50","14:55","15:00","15:05","15:10","15:15","15:20","15:25","15:30","15:35","15:40","15:45","15:50","15:55","16:00","16:05","16:10","16:15","16:20","16:25","16:30","16:35","16:40","16:45","16:50","16:55","17:00","17:05","17:10","17:15","17:20","17:25","17:30","17:35","17:40","17:45","17:50","17:55","18:00","18:05","18:10","18:15","18:20","18:25","18:30","18:35","18:40","18:45","18:50","18:55","19:00","19:05","19:10","19:15","19:20","19:25","19:30","19:35","19:40","19:45","19:50","19:55","20:00","20:05","20:10","20:15","20:20","20:25","20:30","20:35","20:40","20:45","20:50","20:55","21:00","21:05","21:10","21:15","21:20","21:25","21:30","21:35","21:40","21:45","21:50","21:55","22:00","22:05","22:10","22:15","22:20","22:25","22:30","22:35","22:40","22:45","22:50","22:55","23:00","23:05","23:10","23:15","23:20","23:25","23:30","23:35","23:40","23:45","23:50","23:55"],
          series: [
            {
              name: "温度(℃)",
              index: 0,
              data: [18.2,17.9,17.5,17.1,16.8,16.5,16.3,16.1,15.9,15.8,15.7,15.6,15.5,15.4,15.3,15.2,15.1,15,14.9,14.8,14.7,14.6,14.5,14.4,14.3,14.2,14.1,14,13.9,13.8,13.7,13.6,13.5,13.4,13.3,13.2,13.1,13,12.9,12.8,12.7,12.6,12.5,12.4,12.3,12.2,12.1,12,12.1,12.2,12.3,12.4,12.5,12.6,12.7,12.8,12.9,13,13.2,13.4,13.6,13.8,14,14.3,14.6,14.9,15.2,15.5,15.8,16.1,16.4,16.7,17,17.3,17.6,17.9,18.2,18.5,18.8,19.1,19.4,19.7,20,20.3,20.6,20.9,21.2,21.5,21.8,22.1,22.4,22.7,23,23.2,23.4,23.6,23.8,24,24.2,24.4,24.6,24.8,25,25.1,25.2,25.3,25.4,25.5,25.6,25.7,25.8,25.9,26,26.1,26.2,26.3,26.4,26.5,26.6,26.7,26.8,26.9,27,27.1,27.2,27.3,27.4,27.5,27.6,27.7,27.8,27.9,28,28.1,28.2,28.3,28.4,28.5,28.6,28.7,28.8,28.9,29,29.1,29.2,29.3,29.4,29.5,29.6,29.7,29.8,29.9,30,29.8,29.6,29.4,29.2,29,28.8,28.6,28.4,28.2,28,27.8,27.6,27.4,27.2,27,26.8,26.6,26.4,26.2,26,25.8,25.6,25.4,25.2,25,24.8,24.6,24.4,24.2,24,23.8,23.6,23.4,23.2,23,22.8,22.6,22.4,22.2,22,21.8,21.6,21.4,21.2,21,20.8,20.6,20.4,20.2,20,19.8,19.6,19.4,19.2,19,18.8,18.6,18.4,18.2,18,17.8,17.6,17.4,17.2,17,16.8,16.6,16.4,16.2,16,15.8,15.6,15.4,15.2,15,14.8,14.6,14.4,14.2,14,13.8,13.6,13.4,13.2,13,12.8,12.6,12.4,12.2,12,11.8,11.6,11.4,11.2,11,10.8,10.6,10.4,10.2,10,10.2,10.4,10.6,10.8,11,11.2,11.4,11.6,11.8,12,12.2,12.4,12.6,12.8,13,13.2,13.4,13.6,13.8,14,14.2,14.4,14.6,14.8,15,15.2,15.4,15.6,15.8,16,16.2,16.4,16.6,16.8,17]
            },
            {
              name: "湿度(%)",
              index: 1,
              data: [78.5,79.1,79.8,80.3,80.9,81.4,81.9,82.3,82.7,83,83.3,83.5,83.7,83.9,84,84.1,84.2,84.2,84.2,84.1,84,83.9,83.7,83.5,83.2,82.9,82.6,82.2,81.8,81.3,80.8,80.2,79.6,78.9,78.2,77.4,76.5,75.6,74.6,73.5,72.4,71.2,69.9,68.6,67.2,65.7,64.2,62.6,61,59.3,57.6,55.8,54,52.1,50.2,48.3,46.3,44.3,42.3,40.3,38.3,36.3,34.3,32.3,30.4,28.5,26.6,24.8,23,21.3,19.6,18,16.4,15,13.6,12.3,11.1,10,9,8.1,7.3,6.6,6,5.5,5.1,4.8,4.6,4.5,4.5,4.6,4.8,5.1,5.5,6,6.6,7.3,8.1,9,10,11.1,12.3,13.6,15,16.4,18,19.6,21.3,23,24.8,26.6,28.5,30.4,32.3,34.3,36.3,38.3,40.3,42.3,44.3,46.3,48.3,50.2,52.1,54,55.8,57.6,59.3,61,62.6,64.2,65.7,67.2,68.6,69.9,71.2,72.4,73.5,74.6,75.6,76.5,77.4,78.2,78.9,79.6,80.2,80.8,81.3,81.8,82.2,82.6,82.9,83.2,83.5,83.8,84,84.2,84.3,84.4,84.4,84.4,84.3,84.2,84,83.8,83.5,83.2,82.8,82.4,81.9,81.4,80.8,80.2,79.5,78.8,78,77.2,76.3,75.4,74.4,73.3,72.2,71,69.8,68.5,67.2,65.8,64.3,62.8,61.3,59.7,58,56.3,54.6,52.8,51,49.2,47.3,45.4,43.5,41.5,39.5,37.5,35.5,33.5,31.5,29.5,27.5,25.6,23.7,21.9,20.1,18.4,16.8,15.2,13.7,12.3,11,9.8,8.7,7.7,6.8,6,5.3,4.7,4.2,3.8,3.5,3.3,3.2,3.2,3.3,3.5,3.8,4.2,4.7,5.3,6,6.8,7.7,8.7,9.8,11,12.3,13.7,15.2,16.8,18.4,20.1,21.9,23.7,25.6,27.5,29.5,31.5,33.5,35.5,37.5,39.5,41.5,43.5,45.4,47.3,49.2,51,52.8,54.6,56.3,58,59.7,61.3,62.8,64.3,65.8,67.2,68.5,69.8,71,72.2,73.3,74.4,75.4,76.3,77.2,78,78.8,79.5,80.2,80.8]
            }
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  }
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
}
</style>