父组件: <ordinary-bar
id="shiftOuput"
:data="shiftOuputData"
:options="shiftOuputOptions"
>
</ordinary-bar>
shiftOuputData: [
{ name: "早班", value: "350" },
{ name: "中班", value: "300" },
{ name: "晚班", value: "230" },
],
shiftOuputOptions: {
xAxisKey: "name",
yname: "吨",
barWidth: this.fontSize(16),
grid: {
top: "15%",
left: "5%",
right: 0,
bottom: "30%",
},
keys: [
{
name: "班产量",
val: "value",
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#148EFF", // 0% 处的颜色
},
{
offset: 1,
color: "#1D54E1", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
barBorderRadius: [3, 3, 3, 3],
},
},
},
],
},
子组件:
<template>
<!-- 普通柱状图 -->
<div :id="id" :style="{ height: height, width: width }"></div>
</template>
<script>
import resize from "@/views/mixins/resize";
export default {
mixins: [resize],
props: {
id: {
type: String,
default: "",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "100%",
},
//数据(xy)
data: {
type: Array,
default: [],
},
options: {
type: Object,
default: {},
},
},
data() {
return {
chart: null,
};
},
watch: {
data: {
handler(newName, oldName) {
this.ordinaryBar();
},
deep: true, //深度监听
immediate: false, //初次绑定执行
},
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
ordinaryBar() {
this.chart = this.$echarts.init(document.getElementById(this.id));
let series = this.options.keys.map((i, index) => {
return {
name: i.name,
type: "bar",
data: this.data.map((v) => v[i.val]),
barMinHeight: this.options.barMinHeight,
barGap: this.options.barGap,
barCategoryGap: this.options.barCategoryGap,
itemStyle: i.itemStyle ? i.itemStyle : {},
barWidth: this.options.barWidth,
label: i.label ? i.label : {},
silent: true,
};
});
let option = {
//调用成功次数
grid: this.options.grid
? this.options.grid
: {
top: "15%",
left: "5%",
right: "5%",
bottom: "10%",
},
tooltip: {
show: true,
trigger: "axis", //axis , item//鼠标移入Y轴竖条样式
axisPointer: {
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(126,199,255,0)", // 0% 处的颜色
},
{
offset: 0.5,
color: "rgba(126,199,255,1)", // 100% 处的颜色
},
{
offset: 1,
color: "rgba(126,199,255,0)", // 100% 处的颜色
},
],
},
},
},
backgroundColor: "RGBA(0, 49, 85, 1)",
borderColor: "rgba(0, 151, 251, 1)",
borderWidth: 1,
borderRadius: 0,
textStyle: {
color: "#BCE9FC",
fontSize: this.fontSize(12),
align: "left",
},
},
legend: {
show: this.options.keys.length > 1 ? true : false,
icon: "roundRect",
itemWidth: this.options.legend
? this.options.legend.itemWidth
: this.fontSize(17),
itemHeight: this.options.legend
? this.options.legend.itemHeight
: this.fontSize(10),
borderRadius: 5,
itemGap: 13,
data: this.options.keys.map((v) => v.name),
top: "5%",
right: "5%",
textStyle: {
fontSize: this.options.legend
? this.options.legend.fontSize
: this.fontSize(12),
color: "#666",
},
},
color: this.options.color > 0 ? this.options.color : [],
xAxis: [
{
type: "category",
boundaryGap: true, //坐标轴两边留白
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: this.options.axisLineColor
? this.options.axisLineColor
: "#BFBFBF",
},
},
axisLabel: {
interval: 0,
rotate: 45,
margin: 10,
show: true,
align: "center",
fontSize: this.fontSize(12),
color: this.options.axisLineColor
? this.options.axisLineColor
: "#666",
},
data: this.data.map((i) => i[this.options.xAxisKey]),
},
],
yAxis: {
name: this.options.yname,
nameTextStyle: {
color: "#666",
fontSize: this.fontSize(12),
},
splitLine: {
show: true,
lineStyle: {
color: "#BFBFBF",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#BFBFBF",
},
},
axisLabel: {
show: true,
align: "center",
fontSize: this.fontSize(12),
color: this.options.axisLineColor
? this.options.axisLineColor
: "#666",
},
},
dataZoom: this.options.dataZoom || [
{
type: "slider",
show: true,
bottom: "20px",
borderColor: "#07417a",
backgroundColor: "transparent",
dataBackground: {
lineStyle: {
color: "transparent",
shadowOffsetY: 0,
},
areaStyle: {
color: "transparent",
shadowOffsetY: 0,
},
},
// 拖拽手柄样式 svg 路径
handleColor: "#aab6c6",
height: 6,
handleSize: 12,
showDataShadow: false,
filterMode: "filter",
textStyle: {
color: "#ccc",
},
start: 0,
end: 100,
},
],
series,
};
this.chart.clear();
this.chart.setOption(option);
setTimeout(() => {
this.chart.resize();
}, 300);
},
},
mounted() {
this.ordinaryBar();
},
};
</script>
柱状图echarts
于 2023-05-25 16:39:37 首次发布
这篇文章展示了如何在Vue.js应用中创建一个自定义的柱状图组件,使用Echarts库进行数据可视化。组件接收数据和配置选项,并在父组件更新数据时动态更新图表。配置包括颜色渐变、网格布局、数据缩放等功能。
摘要由CSDN通过智能技术生成