|
@@ -0,0 +1,222 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class='demo'>
|
|
|
|
+ <div class='box'></div>
|
|
|
|
+ <div id='testEcharts' style='width;400px;height:400px'></div>
|
|
|
|
+ <div id='pieEcharts' style='width:400px;height:400px;'></div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+import echarts from 'echarts'
|
|
|
|
+ export default{
|
|
|
|
+ data(){
|
|
|
|
+ return{
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods:{
|
|
|
|
+ draw(){
|
|
|
|
+ var pieEcharts = echarts.init(document.getElementById('pieEcharts'))
|
|
|
|
+ pieEcharts.setOption({
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ axisPointer: {
|
|
|
|
+ type: 'cross',
|
|
|
|
+ animation: false,
|
|
|
|
+ label: {
|
|
|
|
+ backgroundColor: '#ccc',
|
|
|
|
+ borderColor: '#aaa',
|
|
|
|
+ borderWidth: 1,
|
|
|
|
+ shadowBlur: 0,
|
|
|
|
+ shadowOffsetX: 0,
|
|
|
|
+ shadowOffsetY: 0,
|
|
|
|
+ color: '#222'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ formatter: function (params) {
|
|
|
|
+ return params[2].name + '<br />' + params[2].value;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: '3%',
|
|
|
|
+ right: '4%',
|
|
|
|
+ bottom: '3%',
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: 'category',
|
|
|
|
+ data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ splitNumber: 3,
|
|
|
|
+ splitLine: {
|
|
|
|
+ show: false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ series: [{
|
|
|
|
+ name: 'L',
|
|
|
|
+ type: 'line',
|
|
|
|
+ data: [20,30,40,50,60,50,40,30,20],
|
|
|
|
+ lineStyle: {
|
|
|
|
+ opacity: 0
|
|
|
|
+ },
|
|
|
|
+ stack: 'confidence-band',
|
|
|
|
+ symbol: 'none'
|
|
|
|
+ }, {
|
|
|
|
+ name: 'U',
|
|
|
|
+ type: 'line',
|
|
|
|
+ data: [20,30,50,60,50,40,30,20,40],
|
|
|
|
+ lineStyle: {
|
|
|
|
+ opacity: 0
|
|
|
|
+ },
|
|
|
|
+ areaStyle: {
|
|
|
|
+ color: '#ccc'
|
|
|
|
+ },
|
|
|
|
+ stack: 'confidence-band',
|
|
|
|
+ symbol: 'none'
|
|
|
|
+ }, {
|
|
|
|
+ type: 'line',
|
|
|
|
+ data: [20,30,40,50,60,40,30,20,50],
|
|
|
|
+ hoverAnimation: false,
|
|
|
|
+ symbolSize: 6,
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: '#c23531'
|
|
|
|
+ },
|
|
|
|
+ showSymbol: false
|
|
|
|
+ }]
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ drawIt(){
|
|
|
|
+ var testEcharts = echarts.init(document.getElementById('testEcharts'))
|
|
|
|
+ var colors = ['#5793f3', '#d14a61', '#675bba'];
|
|
|
|
+ let option = {
|
|
|
|
+ color: colors,
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ axisPointer: {
|
|
|
|
+ type: 'cross'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ right: '20%'
|
|
|
|
+ },
|
|
|
|
+ toolbox: {
|
|
|
|
+ feature: {
|
|
|
|
+ dataView: {show: true, readOnly: false},
|
|
|
|
+ restore: {show: true},
|
|
|
|
+ saveAsImage: {show: true}
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ xAxis: [
|
|
|
|
+ {
|
|
|
|
+ type: 'category',
|
|
|
|
+ axisTick: {
|
|
|
|
+ alignWithLabel: true
|
|
|
|
+ },
|
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ yAxis: [
|
|
|
|
+ {
|
|
|
|
+ type: 'value',
|
|
|
|
+ name: '蒸发量',
|
|
|
|
+ min: 0,
|
|
|
|
+ max: 25,
|
|
|
|
+ position: 'right',
|
|
|
|
+ axisLabel: {
|
|
|
|
+ formatter: '{value} ml'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'value',
|
|
|
|
+ name: '',
|
|
|
|
+ min: 0,
|
|
|
|
+ max: 25,
|
|
|
|
+ position: 'right',
|
|
|
|
+ offset: 80,
|
|
|
|
+ axisLine:{
|
|
|
|
+ show:false,
|
|
|
|
+ },
|
|
|
|
+ axisTick:{
|
|
|
|
+ show:false,
|
|
|
|
+ },
|
|
|
|
+ axisLabel : {
|
|
|
|
+ formatter: function(){
|
|
|
|
+ return "";
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'value',
|
|
|
|
+ name: '温度',
|
|
|
|
+ min: 0,
|
|
|
|
+ max: 25,
|
|
|
|
+ position: 'left',
|
|
|
|
+ axisLine: {
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: colors[2]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ formatter: '{value} °C'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: '蒸发量',
|
|
|
|
+ type: 'bar',
|
|
|
|
+ data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '降水量',
|
|
|
|
+ type: 'bar',
|
|
|
|
+ data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '降雨量',
|
|
|
|
+ type: 'bar',
|
|
|
|
+ data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '平均温度',
|
|
|
|
+ type: 'line',
|
|
|
|
+ yAxisIndex: 2,
|
|
|
|
+ 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]
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '平均co2',
|
|
|
|
+ type: 'line',
|
|
|
|
+ yAxisIndex: 2,
|
|
|
|
+ data: [2.2, 3.0, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 14.0]
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ };
|
|
|
|
+ testEcharts.setOption(option)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted(){
|
|
|
|
+ this.drawIt();
|
|
|
|
+ this.draw();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.demo{
|
|
|
|
+ position:relative;
|
|
|
|
+ .box{
|
|
|
|
+ position:absolute;
|
|
|
|
+ left:20px;
|
|
|
|
+ width:700px;
|
|
|
|
+ height:400px;
|
|
|
|
+ background:#0091FF;
|
|
|
|
+ border-radius:6px 6px 0 0;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|