从vue2升级到vue3，对原来的柱状图、折线图组件进行了修改，这两个组件的语法保留了vue2，实际使用也没有问题。
1、通用柱状图 BarChart.vue
<template>
<div :class="className" :style="{height: height, width: width}"/>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons.js'
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '450px'
},
title: {
type: String,
required: true
},
chartData: {
type: Object,
required: true
}
},
data() {
// vue3需要这样写，否则`tooltip`无效
chart: null
return {
// chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
title: {
text: this.title,
textStyle: {
fontSize: 15
}
},
toolbox: {
show: true,
orient: 'horizontal',
left: 'right',
top: 'top',
feature: {
mark: {
show: true },
magicType: {
show: true, type: ['line', 'bar'] },
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '10%',
left: '2%',
right: '2%',
bottom: '4%',
containLabel: true
},
xAxis: [{
type: 'category',
axisTick: {
show: false },
}],
yAxis: [{
type: 'value',
}],
series: []
})
},
setOptions(data) {
let map = data.map
let series = []
map.forEach((val, key) => {
let obj = {
name: key,
data: Array.from(val),
type: 'bar',
barWidth: '10%',
barGap: 0,
emphasis: {
focus: 'series'
},
animationDuration: 2800,
animationEasing: 'quadraticOut'
}
series.push(obj)
});
this.chart.setOption({
xAxis: [{
data: data.date,
}],
legend: {
data: Array.from(map.keys())
},
series: series
})
}
}
}
</script>
AI 代码解读
2、通用的折线图组件 LineChart.vue
<template>
<div :class="className" :style="{height: height, width: width}"/>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons.js'
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '450px'
},
title: {
type: String,
required: true
},
chartData: {
type: Object,
required: true
}
},
data() {
// vue3需要这样写，否则`tooltip`无效
chart: null
return {
// chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
title: {
text: this.title,
textStyle: {
fontSize: 15
}
},
xAxis: {
type: 'category',
boundaryGap: false,
},
grid: {
left: 15,
right: 10,
bottom: 20,
top: '10%',
containLabel: true
},
toolbox: {
show: true,
orient: 'horizontal',
left: 'right',
top: 'top',
feature: {
mark: {
show: true },
magicType: {
show: true, type: ['line', 'bar'] },
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
yAxis: {
type: 'value',
axisTick: {
show: false
}
},
series: []
})
},
setOptions(data) {
let map = data.map
let series = []
map.forEach((val, key) => {
let obj = {
name: key,
data: Array.from(val),
type: 'line',
barWidth: '40',
smooth: true,
itemStyle: {
normal: {
lineStyle: {
width: 2
}
}
},
animationDuration: 2800,
animationEasing: 'quadraticOut'
}
series.push(obj)
});
this.chart.setOption({
xAxis: {
data: data.date,
},
series: series
})
}
}
}
</script>
AI 代码解读
3、通用饼图组件 PieChart.vue
<template>
<div :class="className" :style="{height:height,width:width}"/>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons.js'
const color = [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
];
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
title: {
type: String,
required: true
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
title: {
textStyle: {
fontSize: 15
}
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
itemStyle: {
normal:{
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
},
label: {
color: '#32c5e9'
},
labelLine: {
lineStyle: {
width: 2
}
},
grid: {
top: '10%',
left: '2%',
right: '2%',
bottom: '4%',
containLabel: true
},
series: [{
type: "pie",
radius: [50, 110],
center: ['50%', '50%'],
top: 10,
itemStyle: {
normal:{
color: item => {
return color[item.dataIndex%(color.length)]
},
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
},
label: {
color: '#32c5e9'
},
labelLine: {
lineStyle: {
width: 2
}
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
}
},
animationEasing: 'cubicInOut',
animationDuration: 2600
}]
})
},
setOptions(data) {
this.chart.setOption({
title: {
text: this.title,
},
series: [{
data: data,
}]
})
}
}
}
</script>
AI 代码解读
4、调用示例
<template>
<div class="dashboard-editor-container">
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="24">
<div class="chart-wrapper">
<el-radio-group v-model="period" @change="getData" style="margin: 0 0 20px 0">
<el-radio-button label="30">近30天</el-radio-button>
<el-radio-button label="180">近180天</el-radio-button>
<el-radio-button label="365">近365天</el-radio-button>
</el-radio-group>
<line-chart :chart-data="lineChartData" :title="`每日任务接收情况统计`"/>
</div>
</el-col>
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="24">
<div class="chart-wrapper">
<bar-chart :chart-data="monthlyData" :title="`近半年统计月报`"/>
</div>
</el-col>
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart :chart-data="diagnosePieChartData" :title="`诊断任务统计`"/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup name="Index">
import LineChart from './LineChart'
import BarChart from './BarChart'
import PieChart from './PieChart'
import {
countByMonthly,
countByReceiptTime,
countByTypeAndDept
} from '@/api/xxx'
const {
proxy} = getCurrentInstance();
const period = ref(180)
const monthlyData = ref({
});
const lineChartData = ref({
});
const diagnosePieChartData = ref({
});
function getData() {
lineChartData.value = {
}
countByReceiptTime(period.value).then(res => {
let arr = res.data
let date = arr.map(item => item.time);
let data = arr.map(item => item.total);
let map = new Map();
map.set('每日接收任务', data);
lineChartData.value = {
date,
map
};
})
}
function monthly() {
monthlyData.value = {
};
countByMonthly().then(res => {
let arr = res.data
let date = arr.map(item => item.item);
let data1 = arr.map(item => item["xx"]);
let data2 = arr.map(item => item["xx"]);
let data3 = arr.map(item => item["xx"]);
let data4 = arr.map(item => item["xx"]);
let data5 = arr.map(item => item["xx"]);
let map = new Map();
map.set('任务总数', data1);
map.set('未开始', data2);
map.set('进行中', data3);
map.set('已完成', data4);
map.set('已发布', data5);
monthlyData.value = {
date,
map
};
})
}
function typeAndDept() {
diagnosePieChartData.value = {
}
countByTypeAndDept().then(res => {
let arr = res.data;
diagnosePieChartData.value = arr.filter(item => item.type === 'diagnose').map(item => {
return {
"name": item.dept, "value": item.total}
});
})
}
getData();
monthly();
typeAndDept();
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
@media (max-width: 1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>
AI 代码解读
5、实现效果：
- 折线图
柱状图
饼图
