|
|
@@ -1,4 +1,4 @@
|
|
|
-<template>
|
|
|
+<!-- <template>
|
|
|
<jt-echarts style="width: 330rem;height: 220rem;margin:20rem 0 10rem 10rem;" :chartData="option"></jt-echarts>
|
|
|
</template>
|
|
|
|
|
|
@@ -14,8 +14,35 @@
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
-
|
|
|
+
|
|
|
this.option = {
|
|
|
+ // tooltip: {
|
|
|
+ // trigger: 'axis',
|
|
|
+ // triggerOn: "click",
|
|
|
+ // showContent: true,
|
|
|
+ // axisPointer: {
|
|
|
+ // type: 'cross', //shadow line cross
|
|
|
+ // crossStyle: {
|
|
|
+ // // color: '#999'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // formatter: function(params) {
|
|
|
+ // console.log('打印', params);
|
|
|
+ // let data1 = params[0];
|
|
|
+ // let data2 = params[1];
|
|
|
+ // // return data1.name + ' ' + data2.name + '<br>' + '装机：' + data1.data +
|
|
|
+ // // ' 亿千瓦<br>增长率：' + data2.data + ' %';
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
grid: {
|
|
|
left: 23,
|
|
|
top: 30,
|
|
|
@@ -93,7 +120,7 @@
|
|
|
name: "指标",
|
|
|
min: 0,
|
|
|
minInterval: 1,
|
|
|
- nameGap:0,
|
|
|
+ nameGap: 0,
|
|
|
nameLocation: "end",
|
|
|
axisTick: {
|
|
|
show: true
|
|
|
@@ -114,7 +141,7 @@
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
- show:true,
|
|
|
+ show: true,
|
|
|
lineStyle: {
|
|
|
color: "lightgray",
|
|
|
width: 1
|
|
|
@@ -251,14 +278,309 @@
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- setTimeout(res=>{
|
|
|
- this.option.grid.left = 22
|
|
|
- },100)
|
|
|
+
|
|
|
+
|
|
|
+ setTimeout(res => {
|
|
|
+ // this.option.grid.left = 22
|
|
|
+ }, 100)
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
+</style> -->
|
|
|
+
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div id="main"></div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ var chartDom = document.getElementById('main');
|
|
|
+ var myChart = this.$echarts.init(chartDom);
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ // tooltip: {
|
|
|
+ // trigger: 'axis',
|
|
|
+ // triggerOn: "click",
|
|
|
+ // showContent: true,
|
|
|
+ // axisPointer: {
|
|
|
+ // type: 'cross', //shadow line cross
|
|
|
+ // crossStyle: {
|
|
|
+ // // color: '#999'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // formatter: function(params) {
|
|
|
+ // console.log('打印', params);
|
|
|
+ // let data1 = params[0];
|
|
|
+ // let data2 = params[1];
|
|
|
+ // // return data1.name + ' ' + data2.name + '<br>' + '装机：' + data1.data +
|
|
|
+ // // ' 亿千瓦<br>增长率：' + data2.data + ' %';
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: "rgba(255,255,255,0.6)",
|
|
|
+ borderColor: "rgba(255,255,255,0.6)", //设置边框颜色
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(0,0,0,0.8)" //设置文字颜色
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 23,
|
|
|
+ top: 30,
|
|
|
+ right: 22,
|
|
|
+ bottom: 10,
|
|
|
+ containLabel: true //false是依据坐标轴来对齐的,true是依据坐标轴上面的文字边界来对齐
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: -3,
|
|
|
+ right: 20,
|
|
|
+ itemGap: 5, //图例每项之间的间隔
|
|
|
+ height: 10,
|
|
|
+ itemWidth: 25, //图例标记的图形宽度
|
|
|
+ itemHeight: 10,
|
|
|
+ padding: [5, 0, 0, 0],
|
|
|
+ textStyle: {
|
|
|
+ padding: [1, 0, 0, -5]
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ name: "温度℃",
|
|
|
+ textStyle: {
|
|
|
+ color: "#18c196"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "气压Kpa",
|
|
|
+ textStyle: {
|
|
|
+ color: "#ff976a"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "辐射W/㎡",
|
|
|
+ textStyle: {
|
|
|
+ color: "#f15441"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "湿度%RH",
|
|
|
+ textStyle: {
|
|
|
+ color: "#0089ff"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false, //防止统计图左侧和纵轴有间隙
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }, //隐藏纵坐标刻度小线条
|
|
|
+ nameTextStyle: {
|
|
|
+ //y轴上方单位的颜色
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ //x轴文字的配置
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255,225,255,1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "lightgray",
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: ["5/1", "5/2", "5/3", "5/4", "5/5"] //横坐标的标签文字
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ name: "指标",
|
|
|
+ min: 0,
|
|
|
+ minInterval: 1,
|
|
|
+ nameGap: 0,
|
|
|
+ nameLocation: "end",
|
|
|
+ axisTick: {
|
|
|
+ show: true
|
|
|
+ }, //隐藏纵坐标刻度小线条
|
|
|
+ nameTextStyle: {
|
|
|
+ //y轴上方单位的颜色
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+
|
|
|
+ axisLabel: {
|
|
|
+ //x轴文字的配置
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255,225,255,1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "lightgray",
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: "温度℃",
|
|
|
+ smooth: false, //平滑
|
|
|
+ type: "line",
|
|
|
+ symbolSize: 5, //折线拐点大小
|
|
|
+ data: [22, 23, 25, 28, 25], //纵坐标值
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#18c196", //图例颜色
|
|
|
+ borderWidth: 4,
|
|
|
+ borderColor: "#18c196",
|
|
|
+ lineStyle: {
|
|
|
+ color: "#18c196",
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ // 渐变填充色（线条下半部分）
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "#18c196"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#18c19600"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "气压Kpa",
|
|
|
+ smooth: false, //平滑
|
|
|
+ type: "line",
|
|
|
+ symbolSize: 5, //折线拐点大小
|
|
|
+ data: [13, 16, 13, 21, 11], //纵坐标值
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#ff976a", //图例颜色
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: "#ff976a",
|
|
|
+ lineStyle: {
|
|
|
+ color: "#ff976a",
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ // 渐变填充色（线条下半部分）
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "#ff976a"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#ff976a00"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "辐射W/㎡",
|
|
|
+ smooth: false, //平滑
|
|
|
+ type: "line",
|
|
|
+ symbolSize: 5, //折线拐点大小
|
|
|
+ data: [15, 13, 21, 20, 14], //纵坐标值
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#f15441", //图例颜色
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: "#f15441",
|
|
|
+ lineStyle: {
|
|
|
+ color: "#f15441",
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ // 渐变填充色（线条下半部分）
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "#f15441"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#f1544100"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "湿度%RH",
|
|
|
+ smooth: false, //平滑
|
|
|
+ type: "line",
|
|
|
+ symbolSize: 5, //折线拐点大小
|
|
|
+ data: [9, 10, 11, 5, 8], //纵坐标值
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#0089ff", //图例颜色
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: "#0089ff",
|
|
|
+ lineStyle: {
|
|
|
+ color: "#0089ff",
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ // 渐变填充色（线条下半部分）
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "#0089ff"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#0089ff00"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+ #main {
|
|
|
+ width: 100%;
|
|
|
+ height: 220rem;
|
|
|
+ margin-top: 15rem;
|
|
|
+ }
|
|
|
</style>
|
DESKTOP-GBVU60Q\dell