Project_yhfu/src/views/bigdata/chart-weatherTrends.vue

<!-- **************************************NO.9 散养户、养殖场养殖种类*************************************** -->
<template>
	<div class="chart-container">
		<div id="farmtype" style="width: 100%; height:24vh;">
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name: 'farmtype',
		data() {
			return {
				count: 0
			}
		},
		mounted() {
			this.myEcharts()

		},

		methods: {
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=smh2KYnoCMWnT1IN

			myEcharts() {


				var chartDom = document.getElementById('farmtype');
				var myChart = echarts.init(chartDom);
        var xData = ['2022年1月','2022年2月','2022年3月','2022年4月','2022年5月','2022年6月','2022年7月','2022年8月','2022年9月','2022年10月','2022年11月','2022年12月'];
        var option;
        option = {
          backgroundColor:'#232d36',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }],
                  global: false
                }
              },
            },
          },
          grid: {
            top: '15%',
            left: '10%',
            right: '5%',
            bottom: '15%',
          },
          legend:{
            data:['最高气温','最低气温'],
            textStyle:{
              color:'#fff',
              align: 'center',
              fontSize: 16
            },
            x:'center'
          },
          xAxis: [{
            type: 'category',
            // 轴线
            axisLine: {
              show: true,
              lineStyle:{
                color: '#85B1B4',
              }
            },
            // 轴刻度线
            axisTick:{
              show:false,
            },
            // 坐标轴名称
            axisLabel: {
              color: '#fff',
              margin:6,
            },
            // 轴分隔线
            splitLine: {
              show: false
            },
            // 轴两侧留白
            boundaryGap: ['5%','5%'],
            data: xData

          }],

          yAxis: [{
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle:{
                color: '#85B1B4'
              }
            },
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                color: '#fff',

              },
            },
            axisTick: {
              show: false,
            },
          }],
          series: [
            {
              name:'最高气温',
              type: 'line',
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 4,
              lineStyle: {
                normal: {
                  color: "#FF8736",
                },
              },
              label: {
                show: false,
              },
              itemStyle: {
                color: "#FF8736",
                borderColor: "#FF8736",
                borderWidth: 2,
              },
              // areaStyle: {
              //     normal: {
              //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //             {
              //                 offset: 0,
              //                 color: 'rgba(43,193,145,0.3)'
              //             },
              //             {
              //                 offset: 1,
              //                 color: 'rgba(43,193,145,0)'
              //             }
              //         ], false),
              //     }
              // },
              data: [4,7,8,12,15,23,24,24,25,28,27,24,21,23]//data.values
            },
            {
              name:'最低气温',
              type: 'line',
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize:4,
              lineStyle: {
                normal: {
                  color: "#13EFB7",
                },
              },
              label: {
                show: false,
              },
              itemStyle: {
                color: "#13EFB7",
                borderColor: "#13EFB7",
                borderWidth: 2,
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(81,150,164,0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(81,150,164,0)'
                    }
                  ], false),
                }
              },
              data: [3,5,4,2,1,7,6,3,4,5,6,7,1,2]//data.values
            },
          ]
        };
				option && myChart.setOption(option);
			},

		},


	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.chart-container {
		width: 100%;
		height: auto;
		position: relative;
		padding-bottom: 10px;
		display: flex;
	}
</style>