|
@@ -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>
|