Shulou(Shulou.com)05/31 Report--

This article mainly introduces the "dataV screen in vue how to use" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope this "dataV screen in vue how to use" article can help you solve the problem.

First, what effect can dataV achieve?

Answer: the big screen effect of all kinds of charts. (the following figure is taken from the official website of dataV Visualization. This article does not talk about dataV Visualization-drag and drop + layer is similar to PS. The official website has tutorials that do not require coding basis and cost money.)

Second, use step 1. Installation depends on npm install @ jiaminghi/data-view2. Introduce

(1) Global introduction

In main.js:

/ / all components will be automatically registered as global components import dataV from'@ jiaminghi/data-view'Vue.use (dataV)

You can change it to vue2:

(2) introduction on demand

Import {borderBox1} from'@ jiaminghi/data-view'Vue.use (borderBox1) 3. Use

Test1.vue file: (in the following demo, I used the frame, enhanced flight chart, tapered bar chart, capsule histogram, rotation table, ranking rotation table, etc., which are used according to the actual development situation, and the layout needs to be adjusted according to the actual development situation)

Import {config1,config2,config3,config4,config5,config6,config7} from ". / config.js" export default {name: "test1", data: function () {return {config1,config2,config3,config4,config5,config6,config7}},} .container {display: flex; flex-direction: row; background-color: # 01132C } .left, .right {width: 25%;} .center {width: 50%;} .box {display: flex; flex-direction: column;} .width {width: 90%; margin: 5%;}

Config.js file: (static data file, which can be converted into data obtained from the background in actual development; pay attention to the reference of the picture)

Const config1= {} const config2= {header: ['column 1', 'column 2', 'column 3'], data: [['row 1 column 1', 'row 1 column 2', 'row 1 column 3'], ['row 2 column 1', 'row 2 column 2', 'row 2 column 3'], ['row 3 column 1', 'row 3 column 2', 'row 3 column 3'], ['row 4 column 1'] 'row 4 column 2', 'row 4 column 3'], ['row 5 column 1', 'row 5 column 2', 'row 5 column 3'], ['row 6 column 1', 'row 6 column 2', 'row 6 column 3'], ['row 7 column 1', 'row 7 column 2', 'row 7 column 3'], ['row 8 column 1', 'row 8 column 2', 'row 8 column 3'] ['row 9 column 1', 'row 9 column 2', 'row 9 column 3'], ['row 10 column 1', 'row 10 column 2', 'row 10 column 3']], index: true, columnWidth: [50], align: ['center'], carousel:' page'} const config3= {data: [{name: 'Zhoukou', value: 55} {name: 'Nanyang', value: 120}, {name: 'Xixia', value: 78}, {name: 'Zhumadian', value: 66}, {name: 'Xinxiang', value: 80}, {name: 'Xinyang', value: 45} {name: 'Luohe', value: 29}]} const config4= {} const config5= {points: [{name: 'Zhengzhou', coordinate: [0.48,0.35], icon: {src: require ('@ / assets/mapCenterPoint.png'), width: 30, height: 30} Text: {color:'# fb7293'}}, {name: 'Xinxiang', coordinate: [0.52,0.23]}, {name: 'Jiaozuo', coordinate: [0.43,0.29]}, {name: 'Kaifeng', coordinate: [0.59,0.35]} {name: 'Xuchang', coordinate: [0.53,0.47]}, {name: 'Pingdingshan', coordinate: [0.45,0.54]}, {name: 'Luoyang', coordinate: [0.36,0.38]}, {name: 'Zhoukou', coordinate: 0.55]}, {name: 'Luohe', coordinate: [0.56,0.56]}, {name: 'Nanyang', coordinate: [0.37,0.66]}, {name: 'Xinyang', coordinate: [0.55,0.81]}, {name: 'Zhumadian' Coordinate: [0.55,0.67]}, {name: 'Jiyuan', coordinate: [0.37,0.29]}, {name: 'Sanmenxia', coordinate: [0.20,0.36]}, {name: 'Shangqiu', coordinate: [0.76,0.41]} {name: 'Hebi', coordinate: [0.59,0.18]}, {name: 'Puyang', coordinate: [0.68,0.17]}, {name: 'Anyang', coordinate: [0.59,0.10]}], lines: [{source: 'Xinxiang' Target: 'Zhengzhou'}, {source: 'Jiaozuo', target: 'Zhengzhou'}, {source: 'Kaifeng', target: 'Zhengzhou'}, {source: 'Xuchang', target: 'Zhengzhou'}, {source: 'Pingdingshan', target: 'Zhengzhou'} {source: 'Luoyang', target: 'Zhengzhou'}, {source: 'Zhoukou', target: 'Zhengzhou'}, {source: 'Luohe', target: 'Zhengzhou'}, {source: 'Nanyang', target: 'Zhengzhou'}, {source: 'Xinyang' Target: 'Zhengzhou'}, {source: 'Zhumadian', target: 'Zhengzhou'}, {source: 'Jiyuan', target: 'Zhengzhou'}, {source: 'Sanmenxia', target: 'Zhengzhou'}, {source: Shangqiu, target: 'Zhengzhou'} {source: 'Hebi', target: 'Zhengzhou'}, {source: 'Puyang', target: 'Zhengzhou'}, {source: 'Anyang', target: 'Zhengzhou'], icon: {show: true, src: require ('@ / assets/mapPoint.png')}, text: {show: true,} BgImgSrc: require ('@ / assets/map.jpg')} const config6= {data: [{name: 'Zhoukou', value: 55}, {name: 'Nanyang', value: 120}, {name: 'Xixia', value: 71}, {name: 'Zhumadian', value: 66} {name: Xinxiang, value: 80}, {name: 'Xinyang', value: 35}, {name: 'Luohe', value: 15}], img: [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: 'Nanyang', value: 167}, {name: 'Zhoukou', value: 67} {name: 'Luohe', value: 123}, {name: 'Zhengzhou', value: 55}, {name: 'Xixia', value: 98},], unit: 'ml'} export {config1,config2,config3,config4,config5,config6,config7} III.

This is the end of the introduction on "how to use the dataV screen in vue". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.