ant design admin中使用echarts。
添加依赖
npm install echarts -S
main.js中import
import * as echarts from 'echarts'
// 集成echarts
Vue.prototype.$echarts = echarts
使用
封装成组件
以柱状图为例。
BarChart.vue
<template>
<div id="main" style="width: 90%; height: 400px"></div>
</template>
<script>
export default {
name: 'BarChart',
components: {},
props: {
title: {
type: String,
default: '菜单数量'
},
xAxisData: {
type: Array,
default: function () {
return []
}
},
seriesData: {
type: Array,
default: function () {
return []
}
},
legendData: {
type: Array,
default: function () {
return []
}
}
},
data () {
return {}
},
methods: {
drawChart () {
// 基于准备好的dom,初始化echarts实例
const myChart = this.$echarts.init(document.getElementById('main'))
// 指定图表的配置项和数据
const option = {
title: {
text: this.title || '菜单数量'
},
tooltip: {},
legend: {
data: this.legendData || [],
orient: 'horizontal',
align: 'auto',
type: 'scroll'
},
xAxis: {
data: this.xAxisData || []
},
yAxis: {},
series: this.seriesData || []
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
const that = this
// 绑定点击事件
myChart.on('click', function (params) {
// 显示model
that.$parent.showModal(params)
})
}
},
mounted () {
this.drawChart()
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
引入
Echart1.vue
<template>
<div>
<line-chart title='用户数据' :seriesData='seriesDataLine' :xAxisData='xAxisDataLine'/>
<bar-chart title='菜单数量' :seriesData='seriesData' :xAxisData='xAxisData' :legendData='legendData'/>
<bar-chart-2 title='按钮数量' :seriesData='mbSeriesData' :xAxisData='mbXAxisData' :legendData='mbLegendData'/>
<detail-modal ref="modal"/>
</div>
</template>
<script>
import DetailModal from './DetailModal'
import BarChart from './BarChart'
import BarChart2 from './BarChart2'
import LineChart from './LineChart'
export default {
name: 'Echart1',
components: {
DetailModal,
BarChart,
BarChart2,
LineChart
},
data () {
return {
// 条形图数据
seriesData: [
{
name: '菜单0',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 20]
},
{
name: '菜单1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 20]
},
{
name: '菜单2',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 20]
},
{
name: '菜单3',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 20]
},
{
name: '菜单4',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 20]
},
{
name: '菜单5',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 20]
},
{
name: '菜单6',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 20]
},
{
name: '菜单7',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 20]
},
{
name: '菜单8',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 20]
},
{
name: '菜单9',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 20]
}
],
xAxisData: ['2021/10/01', '2021/10/02', '2021/10/03', '2021/10/04', '2021/10/05', '2021/10/06', '2021/10/07'],
legendData: ['菜单0', '菜单1', '菜单2', '菜单3', '菜单4', '菜单5', '菜单6', '菜单7', '菜单8', '菜单9'],
// 折线图数据:天为单位,小于一天小时为单位
xAxisDataLine: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
seriesDataLine: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 12, 12, 19],
// xAxisDataLine = ['2021/10/01', '2021/10/02', '2021/10/03', '2021/10/04', '2021/10/05', '2021/10/06', '2021/10/07']
// seriesDataLine = [40, 56, 20, 56, 15, 60, 76],
// 按钮
mbSeriesData: [
{
name: '按钮0',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name: '按钮1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name: '按钮2',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name: '按钮3',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name: '按钮4',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name: '按钮5',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
],
mbXAxisData: ['2021/10/01', '2021/10/02', '2021/10/03', '2021/10/04', '2021/10/05', '2021/10/06'],
mbLegendData: ['按钮0', '按钮1', '按钮2', '按钮3', '按钮4', '按钮5']
}
},
methods: {
showModal (params) {
console.log('params:')
console.log(params)
this.$refs.modal.edit({})
}
},
mounted () {}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
import 引入组件,components中声明组件,<bar-chart …/>使用组件并传入数值。
其他代码:
BarChart2.vue
<template>
<div id="BarChart2Id" style="width: 90%; height: 400px"></div>
</template>
<script>
export default {
name: 'BarChart2',
components: {},
props: {
title: {
type: String,
default: '按钮数量'
},
xAxisData: {
type: Array,
default: function () {
return []
}
},
seriesData: {
type: Array,
default: function () {
return []
}
},
legendData: {
type: Array,
default: function () {
return []
}
}
},
data () {
return {}
},
methods: {
drawChart () {
// 基于准备好的dom,初始化echarts实例
const myChart = this.$echarts.init(document.getElementById('BarChart2Id'))
// 指定图表的配置项和数据
const option = {
title: {
text: this.title || '按钮数量'
},
tooltip: {},
legend: {
data: this.legendData || []
},
xAxis: {
data: this.xAxisData || []
},
yAxis: {},
series: this.seriesData || []
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
const that = this
myChart.on('click', function (params) {
// 显示model
that.$parent.showModal(params)
})
}
},
mounted () {
this.drawChart()
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
DetailLineChart.vue
<template>
<div id="DetailLineChartId" style="width: 98%; height: 400px"></div>
</template>
<script>
export default {
name: 'DetailLineChart',
props: {
title: {
type: String,
default: '折线图'
},
xAxisData: {
type: Array,
default: function () {
return []
}
},
seriesData: {
type: Array,
default: function () {
return []
}
}
},
data () {
return {}
},
methods: {
drawChart () {
// 基于准备好的dom,初始化echarts实例
const myChart = this.$echarts.init(document.getElementById('DetailLineChartId'))
// 指定图表的配置项和数据
const option = {
title: {
text: this.title || '折线图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['UserNum']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
// feature: {
// saveAsImage: {}
// }
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.xAxisData || []
},
yAxis: {
type: 'value'
},
series: [
{
name: 'UserNum',
type: 'line',
stack: 'Total',
data: this.seriesData || []
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
},
mounted () {
this.drawChart()
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
DetailModal.vue
<template>
<a-modal
title="折线图"
:width="800"
:visible="visible"
@cancel="handleCancel"
>
<detail-line-chart title="" :xAxisData="['0', '1', '2', '3', '4', '5', '6']" :seriesData="[120, 132, 101, 134, 90, 230, 210]"/>
<template slot="footer">{{undefined}}</template>
</a-modal>
</template>
<script>
import DetailLineChart from './DetailLineChart.vue'
export default {
name: 'DetailModal',
components: {
DetailLineChart
},
data () {
return {
visible: false
}
},
methods: {
edit (record) {
this.visible = true
},
handleCancel () {
this.visible = false
}
}
}
</script>
LineChart.vue
<template>
<div id="LineChartId" style="width: 90%; height: 400px"></div>
</template>
<script>
export default {
name: 'LineChart',
props: {
title: {
type: String,
default: '用户数据'
},
xAxisData: {
type: Array,
default: function () {
return []
}
},
seriesData: {
type: Array,
default: function () {
return []
}
}
},
data () {
return {}
},
methods: {
drawChart () {
// 基于准备好的dom,初始化echarts实例
const myChart = this.$echarts.init(document.getElementById('LineChartId'))
// 指定图表的配置项和数据
const option = {
title: {
text: this.title || '用户数据'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['UserNum']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
// feature: {
// saveAsImage: {}
// }
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.xAxisData || []
},
yAxis: {
type: 'value'
},
series: [
{
name: 'UserNum',
type: 'line',
stack: 'Total',
data: this.seriesData || []
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
},
mounted () {
this.drawChart()
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>