|
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>
|