安装dataV

1、安装

npm install @jiaminghi/charts

npm install @jiaminghi/data-view

2、在main.js 里添加

import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

3、在页面引入

import Charts from '@jiaminghi/charts'

4、简单使用

<template>
	<div class="box">
    <dv-loading>Loading...</dv-loading>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {

		},
	}
</script>
<style>

</style>

5、简单使用

<template>
	<div class="box">
    <dv-border-box-1>dv-border-box-1</dv-border-box-1>
	</div>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
		},
		methods: {
		},
	}
</script>
<style>
.box{
  width: 100%;
  height: 100%;
  background-color: #282c34;
}
</style>

6、简单使用

<template>
	<div class="box">
		<div id="container"></div>
	</div>
</template>

<script>
	import Charts from '@jiaminghi/charts'
	export default {
		data() {
			return {
				option: {
					legend: {
						data: [{
								name: '收费系统',
								color: '#00baff'
							},
							{
								name: '监控系统',
								color: '#ff5ca9'
							},
							{
								name: '通信系统',
								color: '#3de7c9'
							},
							{
								name: '供配电系统',
								color: '#f5d94e'
							}
						],
						textStyle: {
							fill: '#fff'
						}
					},
					xAxis: {
						data: [
							'10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07'
						],
						axisLine: {
							style: {
								stroke: '#999'
							}
						},
						axisLabel: {
							style: {
								fill: '#999'
							}
						},
						axisTick: {
							show: false
						}
					},
					yAxis: {
						data: 'value',
						splitLine: {
							show: false
						},
						axisLine: {
							style: {
								stroke: '#999'
							}
						},
						axisLabel: {
							style: {
								fill: '#999'
							}
						},
						axisTick: {
							show: false
						},
						min: 0,
						max: 8
					},
					series: [{
							name: '收费系统',
							data: [
								2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5
							],
							type: 'bar',
							barStyle: {
								fill: 'rgba(0, 186, 255, 0.4)'
							}
						},
						{
							name: '监控系统',
							data: [
								2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5
							],
							type: 'line',
							lineStyle: {
								stroke: '#ff5ca9'
							},
							linePoint: {
								radius: 4,
								style: {
									fill: '#ff5ca9',
									stroke: 'transparent'
								}
							}
						},
						{
							name: '通信系统',
							data: [
								1.3, 2.3, 5.3, 5.3, 6.3, 5.3, 1.3
							],
							type: 'line',
							smooth: true,
							lineArea: {
								show: true,
								gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
							},
							lineStyle: {
								lineDash: [5, 5]
							},
							linePoint: {
								radius: 4,
								style: {
									fill: '#00db95'
								}
							}
						}
					]
				}
			}
		},
		mounted() {
			this.charet();
		},
		methods: {
			charet() {
				const container = document.getElementById('container')
				const myChart = new Charts(container)
				myChart.setOption(this.option)
			}
		},
	}
</script>

<style>

	#container {
		width: 500px;
		height: 500px;
		background:#f1f1f1;
	}
</style>