install @jiaminghi/charts
install @jiaminghi/data-view
里添加
import dataV from '@jiaminghi/data-view'
(dataV)
4.在vue页面中引入
import Charts from '@jiaminghi/charts'
5.实例化
const container = ('container')
const myChart = new Charts(container)
6.添加配置 (配置项文档)
(option)//option配置项
7.官方小案例
效果图
<template>
<div class="box">
<div ></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'
}
}
},
{
data: [
0.2, 1.2, 4.2, 4.2, 5.2, 4.2, 0.2
],
type: 'line',
name: '供配电系统',
lineArea: {
show: true,
gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
},
lineStyle: {
stroke: '#f5d94e'
},
linePoint: {
radius: 4,
style: {
fill: '#f5d94e',
stroke: 'transparent'
}
}
}
]
}
}
},
mounted() {
();
},
methods: {
charet() {
const container = ('container')
const myChart = new Charts(container)
()
}
},
}
</script>
<style>
#container {
width: 500px;
height: 500px;
background:#f1f1f1;
}
</style>