|
|
@@ -193,22 +193,14 @@
|
|
|
<el-form label-position="top" size="mini">
|
|
|
<el-form-item label="图表类型">
|
|
|
<div class="chart-type-list">
|
|
|
- <!-- <span v-for="item in chartTypeList" :key="item.type" :class="{activedIcon :item.type===chartType, disabledIcon: !isUsable(item)}" @click="switchChartType(item)">
|
|
|
- <el-tooltip :content="item.name +': '+item.matchRule.desc" placement="top">
|
|
|
- <svg-icon class="icon" :icon-class="isUsable(item)? item.icon : (item.icon + '_disabled')" />
|
|
|
- </el-tooltip>
|
|
|
- </span> -->
|
|
|
+
|
|
|
|
|
|
<span @click="switch_chart_type(item)" v-for="item in chartTypeList" style = "display:inline-block;height:30px;width:30px;margin-right:10px;margin-bottom:10px">
|
|
|
<el-tooltip :content="item.desc" placement="top">
|
|
|
<svg-icon class="icon" style="height:20px;width:20px" :icon-class="item.isUse? item.icon : (item.icon + '_disabled')" />
|
|
|
</el-tooltip>
|
|
|
</span>
|
|
|
-
|
|
|
- <!-- <el-tooltip content="1" placement="top">
|
|
|
- <svg-icon class="icon" style="height:100px;width:100px" icon-class="chart_line_disabled" />
|
|
|
- </el-tooltip> -->
|
|
|
-
|
|
|
+
|
|
|
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
@@ -624,6 +616,24 @@ export default {
|
|
|
|
|
|
},
|
|
|
|
|
|
+
|
|
|
+ chartLine_data3:{
|
|
|
+ chartType:'line_bar',
|
|
|
+ xAxisArr: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
|
|
|
+ legendArr1: ['数据1', '数据2', '数据3', '数据4' ],
|
|
|
+ dataArr1:[
|
|
|
+ [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
|
|
|
+ [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
|
|
|
+ [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
|
|
|
+ [2, 10, 3, 2, 10, 4, 4, 9, 3, 9, 3, 8],
|
|
|
+ ],
|
|
|
+ legendArr2: ['数据5', '线条1'],
|
|
|
+ dataArr2:[
|
|
|
+ [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
|
|
|
+ [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
requestParam: {},
|
|
|
isokDisable: false,
|
|
|
selectList: [],
|
|
|
@@ -1037,8 +1047,134 @@ export default {
|
|
|
}()
|
|
|
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+ // var option_line_bar = {
|
|
|
+
|
|
|
+
|
|
|
+ // title: { text: 'Stacked Line' },
|
|
|
+ // tooltip: { trigger: 'axis' },
|
|
|
+ // legend: { data: chartLine_data.legendArr1.concat( chartLine_data.legendArr2) , right: 10, show: true, type: 'scroll' },
|
|
|
+ // grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
|
|
|
+ // xAxis: [{ type: 'category',data:chartLine_data.xAxisArr }],
|
|
|
+ // yAxis: [
|
|
|
+ // {type: 'value', name: 'kg'},
|
|
|
+
|
|
|
+ // ],
|
|
|
+ // series: function (e) {
|
|
|
+ // var serie = [];
|
|
|
+ // for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
|
|
|
+
|
|
|
+ // var item = {
|
|
|
+ // name: chartLine_data.legendArr1[i],
|
|
|
+ // data: chartLine_data.dataArr1[i],
|
|
|
+ // type: 'line',
|
|
|
+ // emphasis: { label: { show: true, position: 'inside' } },
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // serie.push(item);
|
|
|
+ // }
|
|
|
|
|
|
|
|
|
+ // for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
|
|
|
+
|
|
|
+ // var item = {
|
|
|
+ // name: chartLine_data.legendArr2[i],
|
|
|
+ // data: chartLine_data.dataArr2[i],
|
|
|
+ // type: 'bar',
|
|
|
+ // emphasis: { label: { show: true, position: 'inside' } },
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // serie.push(item);
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // console.log(serie)
|
|
|
+
|
|
|
+ // return serie;
|
|
|
+ // }()
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+ var option_line_bar = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ crossStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ dataView: { show: true, readOnly: false },
|
|
|
+ magicType: { show: true, type: ['line', 'bar'] },
|
|
|
+ restore: { show: true },
|
|
|
+ saveAsImage: { show: true }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['Evaporation', 'Precipitation', 'Temperature']
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: 'Precipitation',
|
|
|
+ min: 0,
|
|
|
+ max: 250,
|
|
|
+ interval: 50,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} ml'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: 'Temperature',
|
|
|
+ min: 0,
|
|
|
+ max: 25,
|
|
|
+ interval: 5,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} °C'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Evaporation',
|
|
|
+ type: 'bar',
|
|
|
+ data: [
|
|
|
+ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Precipitation',
|
|
|
+ type: 'bar',
|
|
|
+ data: [
|
|
|
+ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Temperature',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
|
|
|
|
|
|
|
|
|
@@ -1050,6 +1186,8 @@ export default {
|
|
|
this.chartLine.setOption(option_horizontal_bar)
|
|
|
} else if(chartLine_data.chartType == 'pie'){
|
|
|
this.chartLine.setOption(option_pie)
|
|
|
+ } else if(chartLine_data.chartType == 'line_bar'){
|
|
|
+ this.chartLine.setOption(option_line_bar)
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -1085,6 +1223,12 @@ export default {
|
|
|
} else if(item.type == 'pie'){
|
|
|
this.chartLine_data2.chartType = 'pie'
|
|
|
this.roadChartLine(this.chartLine_data2)
|
|
|
+ } else if(item.type == 'line_bar'){
|
|
|
+ console.log(1111)
|
|
|
+ this.chartLine_data3.chartType = 'line_bar'
|
|
|
+ console.log(this.chartLine_data3)
|
|
|
+ this.roadChartLine(this.chartLine_data3)
|
|
|
+
|
|
|
}
|
|
|
|
|
|
}
|
