Blame view

antis-ncc-admin/src/views/extend/graphDemo/highchartsArea/index.vue 1.28 KB
03207d5d   wwk   1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
  <template>
    <div class="chart-container app-container nohead">
      <el-alert title="免责声明:Highcharts组件不属于NCC产品,只用于介绍第三方组件如何在《NCC快速开发平台》中使用。如果对这些组件感兴趣,请使用正版。"
        type="warning" :closable="false" class="mb-10" />
      <highcharts :options="chartOptions" :callback="myCallback"
        style="height:530px;margin-top:30px;"></highcharts>
    </div>
  </template>
  
  <script>
  
  import { Chart } from "highcharts-vue";
  export default {
    name: 'extend-graphDemo-highchartsArea',
    components: {
      highcharts: Chart
    },
    data() {
      return {
        chartOptions: {
          chart: {
            type: 'area'
          },
          title: {
            text: '包含负值的面积图'
          },
          xAxis: {
            categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']
          },
          credits: {
            enabled: false
          },
          series: [{
            name: '小张',
            data: [5, 3, 4, 7, 2]
          }, {
            name: '小彭',
            data: [2, -2, -3, 2, 1]
          }, {
            name: '小潘',
            data: [3, 4, 4, -2, 5]
          }]
        }
  
      }
    },
    mounted() { },
  
    methods: {
      myCallback() {
        console.log("this is callback function");
      }
    }
  }
  </script>