在vue-lic里面显示多个Echarts图表

110 阅读 0 评论 73 点赞

我是靠谱客的博主漂亮金毛，这篇文章主要介绍在vue-lic里面显示多个Echarts图表，现在分享给大家，希望可以做个参考。

直接看源码代码：

复制代码

</template>

})
      }
    }
  }

</script>

<style scoped>

</style>

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<template>
  <div>
    <div id="main" :style="{width: '600px',height:'400px'}"></div>
    <div id="dimensionality" :style="{width: '600px',height:'400px'}"></div>
  </div>

</template>

<script>
  let echarts = require("echarts/lib/echarts");
  // 引入柱状图
  require("echarts/lib/chart/bar");
  require("echarts/lib/component/tooltip");
  require("echarts/lib/component/title");
  export default {
    name: 'HelloWorld',
    data () {
      return {}
    },
    mounted(){
      this.initCharts();
    },
    methods: {
      initCharts(){
        this.chart = echarts.init(document.getElementById('main'));
        this.dimensionality = echarts.init(document.getElementById('dimensionality'));
        this.setOptions();
        this.setOptions_xyz();
      },
      setOptions(){
        this.chart.setOption({
          title: {
            text: '折线图堆叠'
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['4-5', '4-6', '4-7', '4-8', '4-9']
          },
          yAxis: {
            type: 'value',
            min:60,
            max:180
          },
          series: [
            {
              name: '学',
              type: 'line',
              data: [160, 132, 101, 120, 140]
            },
            {
              name: '习',
              type: 'line',
              data: [100, 102, 141, 154, 100]
            },
            {
              name: '能',
              type: 'line',
              data: [150, 122, 101, 134, 90]
            }
          ]
        })
      },
      setOptions_xyz(){
        this.dimensionality.setOption({
          title: {
            text: '基础雷达图'
          },
          tooltip: {},
          legend: {
            data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
          },
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            indicator: [
              { name: '销售（sales）', max: 6500},
              { name: '管理（Administration）', max: 16000},
              { name: '信息技术（Information Techology）', max: 30000},
              { name: '客服（Customer Support）', max: 38000},
              { name: '研发（Development）', max: 52000},
              { name: '市场（Marketing）', max: 25000}
            ]
          },
          series: [{
            name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : [
              {
                value : [4300, 10000, 28000, 35000, 50000, 19000],
                name : '预算分配（Allocated Budget）'
              },
              {
                value : [5000, 14000, 28000, 31000, 42000, 21000],
                name : '实际开销（Actual Spending）'
              }
            ]
          }]

        })
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>