1. 首页
  2. 文章中心
  3. echarts

vue使用datav+echarts

93 阅读 0 评论
我是靠谱客的博主 贪玩小蚂蚁，这篇文章主要介绍vue使用datav+echarts，现在分享给大家，希望可以做个参考。

一.分别使用下面两句下载datav和echarts

npm install echarts --save
npm install @jiaminghi/data-view

二.在main.js文件中全局注册组件

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import dataV from '@jiaminghi/data-view'
// 引入 echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

Vue.use(dataV)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

三.准备工作，因为没有对接后端所以只能使用静态文件

1.使用datav中的一些组件需要准备的文件，我们创建一个config.js,里面的config1~8都是为各datav各组件准备的不同的数据格式，每个组件需要的数据格式和写法不太一样，具体可以参考官方文档里的示例datav官网地址

复制代码
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
const config1={} 
const config2={
    header: ['列1', '列2', '列3'],
    data: [
      ['行1列1', '行1列2', '行1列3'],
      ['行2列1', '行2列2', '行2列3'],
      ['行3列1', '行3列2', '行3列3'],
      ['行4列1', '行4列2', '行4列3'],
      ['行5列1', '行5列2', '行5列3'],
      ['行6列1', '行6列2', '行6列3'],
      ['行7列1', '行7列2', '行7列3'],
      ['行8列1', '行8列2', '行8列3'],
      ['行9列1', '行9列2', '行9列3'],
      ['行10列1', '行10列2', '行10列3']
    ],
    index: true,
    columnWidth: [50],
    align: ['center'],
    carousel: 'page'
}
const config3={
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 45
    },
    {
      name: '漯河',
      value: 29
    }
  ]
}
const config4={}
const config5={
  points: [
    {
      name: '郑州',
      coordinate: [0.48, 0.36],
      icon: {
        src: require('@/assets/mapCenterPoint.png'),
        width: 30,
        height: 30
      },
      text: {
        color: '#fb7293'
      }
    },
    {
      name: '新乡',
      coordinate: [0.52, 0.23]
    },
    {
      name: '焦作',
      coordinate: [0.43, 0.29]
    },
    {
      name: '开封',
      coordinate: [0.59, 0.35]
    },
    {
      name: '许昌',
      coordinate: [0.53, 0.47]
    },
    {
      name: '平顶山',
      coordinate: [0.45, 0.54]
    },
    {
      name: '洛阳',
      coordinate: [0.36, 0.38]
    },
    {
      name: '周口',
      coordinate: [0.62, 0.55]
    },
    {
      name: '漯河',
      coordinate: [0.56, 0.56]
    },
    {
      name: '南阳',
      coordinate: [0.37, 0.66]
    },
    {
      name: '信阳',
      coordinate: [0.55, 0.81]
    },
    {
      name: '驻马店',
      coordinate: [0.55, 0.67]
    },
    {
      name: '济源',
      coordinate: [0.37, 0.29]
    },
    {
      name: '三门峡',
      coordinate: [0.20, 0.36]
    },
    {
      name: '商丘',
      coordinate: [0.76, 0.41]
    },
    {
      name: '鹤壁',
      coordinate: [0.59, 0.18]
    },
    {
      name: '濮阳',
      coordinate: [0.68, 0.17]
    },
    {
      name: '安阳',
      coordinate: [0.59, 0.10]
    }
  ],
  lines: [
    {
      source: '新乡',
      target: '郑州'
    },
    {
      source: '焦作',
      target: '郑州'
    },
    {
      source: '开封',
      target: '郑州'
    },
    {
      source: '许昌',
      target: '郑州'
    },
    {
      source: '平顶山',
      target: '郑州'
    },
    {
      source: '洛阳',
      target: '郑州'
    },
    {
      source: '周口',
      target: '郑州'
    },
    {
      source: '漯河',
      target: '郑州'
    },
    {
      source: '南阳',
      target: '郑州'
    },
    {
      source: '信阳',
      target: '郑州'
    },
    {
      source: '驻马店',
      target: '郑州'
    },
    {
      source: '济源',
      target: '郑州'
    },
    {
      source: '三门峡',
      target: '郑州'
    },
    {
      source: '商丘',
      target: '郑州'
    },
    {
      source: '鹤壁',
      target: '郑州'
    },
    {
      source: '濮阳',
      target: '郑州'
    },
    {
      source: '安阳',
      target: '郑州'
    }
  ],
  icon: {
    show: true,
    src: require('@/assets/mapPoint.png')
  },
  text: {
    show: true,
  },
  bgImgSrc: require('@/assets/map.jpg')
}

const config6={
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 71
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 35
    },
    {
      name: '漯河',
      value: 15
    }
  ],
  img: [
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png')
  ],
  showValue: true
}

const config7={
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 67
    },
    {
      name: '漯河',
      value: 123
    },
    {
      name: '郑州',
      value: 55
    },
    {
      name: '西峡',
      value: 98
    },
  ],
  unit: 'ml'
}
const config8={
    data: [66]
}

export { config1,config2,config3,config4,config5,config6,config7,config8}

2.datav内置的图表很多，但有的时候我们还是需要使用echarts来丰富图表，在使用datav的同时，我们想要使用echarts里的图表时需要将其写成组件，在components文件夹下创建echarts文件夹在里面创建line.vue文件，文件内容如下

复制代码
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
<template>
        <div id="echartsID">

        </div>
</template>

<script>
export default {
    mounted() {
        this.echarts()
    },
    methods: {
        echarts() {
            let myChart = this.$echarts.init(document.getElementById('echartsID'))
            myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['预测', '实际',],
                    bottom: 'auto',
                    textStyle: { //图例文字的样式
                        color: 'white',
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2022-1', '2022-2', '2022-3', '2022-4', '2022-5', '2022-6', '2022-7'],
                    axisLabel: {
                        rotate: 12,
                        textStyle: { //图例文字的样式
                            color: 'white',
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: { //图例文字的样式
                            color: 'white',
                        },
                    },
                },
                series: [
                    {
                        name: '预测',
                        type: 'line',

                        smooth: true,
                        data: [120, 132, 200, 810, 390, 230, 210]
                    },
                    {
                        name: '实际',
                        type: 'line',

                        smooth: true,
                        data: [220, 182, 220, 930, 290, 330, 310]
                    }
                ]
            });
        }
    },
}
</script>

<style scoped>
#echartsID {
    width: 90%;
    height: 80%;
}
</style>

3.还有一些静态图片，在assets文件夹下放入图片文件“map.jpg”、“mapCenterPoint.png”、“mapPoint.png”,图片自取静态图片地址

四.准备工作做好了就可以开始写测试文件了，我是直接在HomeView.vue里写的

复制代码
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
<template>
  <dv-full-screen-container class="container">
    <div class="content">
      <dv-border-box-11 title="中国河南省">
        <div class="container laoda">
          <div class="box left">
            <dv-border-box-1 class="border-box">
              <dv-water-level-pond :config="config8" class="charts" style="height:280px" />
            </dv-border-box-1>
            <dv-border-box-8 class="border-box">
              <dv-scroll-board :config="config2" class="charts" style="height:280px" />
            </dv-border-box-8>
            <dv-border-box-1 class="border-box">
              <!-- <dv-scroll-ranking-board :config="config3" class="charts" style="height:280px" /> -->
              <eline class="charts"></eline>
            </dv-border-box-1>
          </div>
          <div class="box center">
            <dv-border-box-1 class="border-box">
                <dv-flyline-chart-enhanced :config="config5" :dev="true" class="charts" style="height:800px"/>
            </dv-border-box-1>
        </div>
        <div class="box right">
            <dv-border-box-1 class="border-box">
                <dv-scroll-ranking-board :config="config3" class="charts" style="height:280px" />
            </dv-border-box-1>
             <dv-border-box-8 :reverse="true" class="border-box">
                <dv-conical-column-chart :config="config6" class="charts" style="height:280px;" />
            </dv-border-box-8>
            <dv-border-box-1 class="border-box">
                <dv-capsule-chart :config="config7" class="charts" style="height:280px" />
            </dv-border-box-1>
        </div>
        </div>
      </dv-border-box-11>
    </div>
  </dv-full-screen-container>
</template>
<script>
import eline from '../../src/components/echarts/line.vue'
import { config1, config2, config3, config4, config5, config6, config7, config8 } from "./config.js"
export default {
  components:{
      eline
		},
  name: "test1",
  data: function () {
    return {
      config1,
      config2,
      config3,
      config4,
      config5,
      config6,
      config7,
      config8
    }
  },
}
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: row;
  background-color: #01132C;
}

.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.left,
.right {
  width: 25%;
}
.center{
    width: 50%;
}
.charts {
  width: 90%;
  margin: 5%;
}

.laoda {
  margin: 5vh 2.5vw;
  width: 95vw;
  height: 92vh;
  display: flex;
  flex-direction: row;
  /* background-color: antiquewhite; */
}

.box {
  display: flex;
  flex-direction: column;
}
</style>

完成后的样子
在这里插入图片描述

这样差不多就完成了，可以在这个基础上去测试别的组件，准备好组件所需数据就行了。

最后

以上就是贪玩小蚂蚁最近收集整理的关于vue使用datav+echarts的全部内容，更多相关vue使用datav+echarts内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(62)

相关文章

md5的常用收集常见的MD5绕过漏洞
md5的常用收集常见的MD5绕过漏洞
vue 大屏数据展示组件
vue 大屏数据展示组件
基于Vue的动态通用table表格及dialog对话框处理技巧总结
基于Vue的动态通用table表格及dialog对话框处理技巧总结
vue大屏可视化开源组件
vue大屏可视化开源组件
vue使用datav+echarts
vue使用datav+echarts
在Chrome 浏览器上滚动截屏
在Chrome 浏览器上滚动截屏
JQuery的整屏滚动滚轮事件和函数节流
JQuery的整屏滚动滚轮事件和函数节流
制作滚动表格，循环列表表格内容
制作滚动表格，循环列表表格内容

评论列表共有 0 条评论

立即
投稿
返回
顶部