tongyu_visu/src/views/bigdata/chart-eventTrend.vue

<!-- **************************************NO.6 矿坑*************************************** -->
<template>
	<div class="chart-container">
		<div id="pit" style="width: 100%; height:24vh;">
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
  import {getSjqs} from '@/api/bigdata'
	export default {
		name: 'pit',
		data() {
			return {
				count: 0,
        data_sjqs_month:[],
        data_sjqs_num:[]
			}
		},
		mounted() {
			this.sjqs()
		},

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

      sjqs(){
        let that = this
        getSjqs().then(resp=>{
          that.data_sjqs_month = resp.data.month
          that.data_sjqs_num = resp.data.num
          console.log(that.data_sjqs_month)
          console.log(that.data_sjqs_num)
          that.myEcharts()
        })
      },

			myEcharts() {
        let that = this
				var chartDom = document.getElementById('pit');
				var myChart = echarts.init(chartDom);
				var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
				var option;
        option = {
          xAxis: {
            data:that.data_sjqs_month,
          },
          yAxis: {
            axisLabel: {
              fontSize: 10,
              color: '#999',
              verticalAlign: 'bottom',
              formatter: function (value, index) {
                return `${value.toFixed(2)}`;
              },
            },
          },
          series: [
            {
              type: 'line',
              lineStyle: {
                color: '#C22F43',
                width: 1,
                type: 'solid',
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(194, 47, 67, 1.0)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(194, 47, 67, 0.03)',
                    },
                  ],
                  global: false,
                },
                origin: 'start',
              },
              opacity: 0.2,
              shadowColor: 'rgba(194, 47, 67)',
              shadowBlur: 0,
              shadowOffsetX: 0,
              data: that.data_sjqs_num
            },
          ],
        };
				option && myChart.setOption(option);
			},

		},


	}
</script>

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