1.组件内容
HTML部分
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
JS部分
<script>
import * as echarts from "echarts";
// require('echarts/theme/macarons') // echarts theme
import resize from "@/views/dashboard/mixins/resize";
const animationDuration = 1500;
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "380px",
},
yName: {
type: String,
default: "kM·h",
},
xName: {
type: String,
default: "时",
},
barData: {
type: Array,
// required: true
},
},
data() {
return {
chart: null,
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
watch: {
barData: {
handler() {
this.$nextTick(() => {
if (!this.chart) {
this.initChart();
return;
}
this.chart.dispose();
this.chart = null;
this.initChart();
});
},
},
},
methods: {
initChart() {
this.chart = echarts.init(this.$el)
const colorOption = ['#5d9cd5', '#fcbd0b', '#91cf50', '#c93d3d']
this.chart.setOption({
title: {
text: "本周最优单价核算成本对比",
x: "center",
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
grid: {
top: "15%",
left: "3%",
right: "3%",
bottom: "3%",
containLabel: true,
},
// dataZoom: {
// show: true,
// type: "inside",
// },
legend: {
x:"right",
show: true,
},
xAxis: [
{
type: "category",
// data: xData,
data: ["冲压","焊装","涂装","总装"],
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: 'value',
name: '单位: 元',
},
],
series:[
{
name: '用量',
type: 'bar',
smooth: false,
barGap: 0,
itemStyle: {
normal: {
color: colorOption[0],
label:{
show: true,
}
}
},
data: [2.6, 5.9, 9.0, 26.4]
},
{
name: '原电价费用',
type: 'bar',
smooth: false,
barGap: 0,
itemStyle: {
normal: {
color: colorOption[1],
label:{
show: true,
}
}
},
data: [2.0, 2.2, 3.3, 4.5]
},
{
name: '最低电价费用',
type: 'bar',
smooth: false,
barGap: 0,
itemStyle: {
normal: {
color: colorOption[2],
label:{
show: true,
}
}
},
data: [1.6, 2.3, 3.0, 4.0]
},
{
name: '可节省费用',
type: 'line',
showSymbol: true,
symbol: 'circle',
symbolSize: 5,
smooth: false,
itemStyle: {
normal: {
color: colorOption[3],
label:{
show: true,
}
}
},
data: [4.2, 5.3, 6.5, 7.8]
},
]
});
},
},
};
</script>
2.组件调用
<div> <electric-bar></electric-bar></div>