adi_cae_web/src/views/index/HCFDLab/index11.vue

<template>
  <div>
    <div style="width:800px">
      <x-chart ref="child" id="highcharts" class="high" :option="option"></x-chart>
    </div>
    <div class="control">
      <div ref="box" style="width:50%;border:1px solid lightgrey;float:left">
        <div>
          <span class="text">Curve Display:</span>
          <el-select
            size="mini"
            multiple
            collapse-tags
            style="margin-top:10px"
            v-model="CurveValue"
            placeholder="请选择显示项"
            @change="showCurve"
          >
            <el-option :label="'All'" :value="'All'"></el-option>
            <el-option
              v-for="(item,index) in option.series "
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
        <br />
        <div>
          <span class="text">Line Width:</span>
          <el-select
            size="mini"
            style="margin-left:15px"
            v-model="linevalue"
            placeholder="请选择线宽"
            @change="changeLine"
          >
            <el-option
              v-for="item in lineWdith "
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div>
          <span class="text">BackGroundColor:</span>
          <el-color-picker
            size="mini"
            style="margin-top:10px"
            v-model="back_color"
            @change="changeBackColor"
          ></el-color-picker>
        </div>
      </div>
      <div style="width:50%;border:1px solid lightgrey;float:right">
        <div>
          <span class="text">Curve Display:</span>
          <el-select size="mini" v-model="displayLine" style="margin-top:10px" placeholder="请选择隐藏项">
            <el-option
              v-for="(item,index) in option.series "
              :key="index"
              :label="item.name"
              :value="item.name"
              :disabled="item.display"
            ></el-option>
          </el-select>
        </div>
        <br />
        <div>
          <span class="text">Line Type:</span>
          <el-select size="mini" v-model="lineType" style="margin-left:15px" placeholder="请选择线的类型">
            <el-option
              v-for="item in lineStyle "
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div>
          <span class="text">Line Color:</span>
          <el-color-picker
            size="mini"
            v-model="lineColor"
            style="margin-top:10px"
            @change="changeLineColor"
          ></el-color-picker>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 导入chart组件
import XChart from "@/components/chart";
import dataJson from "@/assets/data.json";
export default {
  data() {
    return {
      lineWdith: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
      ],
      lineStyle: [
        {
          value: "Line",
          label: "Line",
        },
        {
          value: "point",
          label: "point",
        },
        {
          value: "Square",
          label: "Square",
        },
        {
          value: "Triangle",
          label: "Triangle",
        },
      ],
      displayLine: "",
      back_color: "#778899",
      lineType: "",
      lineColor: "",
      linevalue: "1",
      CurveValue: ["All"],
      newOption: [],
      option: {
        title: {
          text: dataJson.title,
        },
        chart: {
          plotBackgroundColor: "#778899",
          borderWidth: 1,
        },
        subtitle: {
          text: "数据来源：converge",
        },
        yAxis: {
          title: {
            text: "值得大小",
          },
        },
        xAxis: {},
        plotOptions: {
          series: {
            lineWidth: 1,
            label: {
              connectorAllowed: false,
            },
            marker: {
              radius: 5,
            },
            pointStart: 1,
          },
        },
        series: [],
        credits: {
          enabled: false,
        },
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500,
              },
              chartOptions: {
                legend: {
                  layout: "horizontal",
                  align: "center",
                  verticalAlign: "bottom",
                },
              },
            },
          ],
        },
      },
    };
  },
  created() {
    var jsonStr = dataJson;
    for (var i in jsonStr.VARIABLES) {
      var obj = {
        name: "",
        data: [],
        color: "",
        display: true,
      };
      obj.name = jsonStr.VARIABLES[i];
      this.option.series.push(obj);
    }
    for (var i in jsonStr.VARIABLES) {
      for (var j in jsonStr.value) {
        this.option.series[i].data.push(
          Number(jsonStr.value[j][i].toFixed(10))
        );
      }
    }
    let oldoption = this.option;
    this.newOption = { ...oldoption };
  },
  watch: {
    "option.plotOptions.series.lineWidth": {
      handler(oleVal, newVal) {
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    showCurve() {
      console.log(this.option.series);
      var nameArr = [];
      let val = this.CurveValue;
      for (var i in val) {
        if (val[i] == "All") {
          this.CurveValue = ["All"];
          this.newOption.series = this.option.series;
          this.$refs.child.showChart("highcharts", this.newOption);
          return;
        } else {
          var arr = this.option.series.filter((ele) => {
            return ele.name == val[i];
          });
          nameArr.push(arr[0]);
        }
      }
      this.changeDisplay();
      this.newOption.series = nameArr;
      this.$refs.child.showChart("highcharts", this.newOption);
    },
    changeDisplay() {
      let val = this.CurveValue;
      for (var i in val) {
        for (var j in this.option.series)
          if (val[i] == this.option.series[j].name) {
            this.option.series[j].display = false;
          }
      }
    },
    changeBackColor() {
      let val = this.back_color;
      this.$set(this.newOption.chart, "plotBackgroundColor", val);
      this.$refs.child.showChart("highcharts", this.newOption);
    },
    changeLine() {
      let val = this.linevalue;
      this.$set(this.option.plotOptions.series, "lineWidth", Number(val));
      // console.log(this.option.plotOptions.series.lineWidth);
      this.$refs.child.showChart("highcharts", this.newOption);
    },
    changeLineColor() {
      let val = this.lineColor;
      let lineVal = this.displayLine;
      if (lineVal == "") {
        this.$message.error("请先选择线条");
        return;
      }
      for (var i in this.newOption.series) {
        if (this.newOption.series[i].name == lineVal) {
          this.newOption.series[i].color = val;
        }
      }
      this.$refs.child.showChart("highcharts", this.newOption);
    },
  },
  components: {
    XChart,
  },
};
</script>

<style>
.chart {
  width: 200px;
  height: 100px;
}
.control {
  position: relative;
  width: 800px;
  height: 200px;
  border: 1px solid burlywood;
}
.text {
  font-size: 12px;
  margin-left: 10px;
}
</style>