|  | @@ -0,0 +1,304 @@
 | 
	
		
			
				|  |  | +<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>
 |