Echarts 柱状图重叠展示总量和部分量

原创于 2024-11-22 16:05:41 发布 · 1.9k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript #vue.js #信息可视化 #html #css

该文章已生成可运行项目，

文章目录

前言
一、效果展示
二、代码介绍
三、完整代码
总结

前言

基于vue2+Echarts 柱状图重叠展示总量和部分量

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果展示

二、代码介绍

首先使用 echarts.init 方法初始化一个 echarts 实例 fullScreen，并传入一个 DOM 元素（通过 this.$refs.WireRod 获取）作为渲染容器。
通过 await selectDataWireRod() 获取数据，并对数据进行处理，提取出需要的值 ZDD、ZKC、SUM、invRedNum、invOrangeNum、invYellowNum。
定义了一个 option 对象，包括图表的标题、提示框、图例、坐标轴、系列等配置。
在 series 中定义了几个不同类型的数据系列，包括"当前库存"、"未发订单"、"总库存"，以及三个自定义的安全库存线条系列。
设置了图表的样式、颜色、柱状图宽度等属性。
调用 fullScreen.setOption(option) 将配置好的选项应用到图表中。
监听窗口大小变化事件，实现图表的自适应。
监听点击事件，触发自定义事件。
重要点：属性 stack: "x",和 barGap: "-100%", 柱状图宽度一定要固定。

三、完整代码

盘条代码如下单独封装基本都差不多（示例）：

</template>

import echarts from "echarts";

import { selectDataWireRod } from "@/api/MMZ/MMZ410";

export default {

data() {

return {};

mounted() {

this.Echarts();

methods: {

async Echarts() {

const fullScreen = echarts.init(this.$refs.WireRod);

let data = await selectDataWireRod();

let list = [];

let ZDD = "";

let ZKC = "";

let SUM = "";

let invRedNum = ""; // 第一组警戒线值

let invOrangeNum = ""; // 第二组警戒线值

let invYellowNum = ""; // 第三组警戒线值

if (data.data.code == 200) {

list = data.data.data.Total;

}

ZDD = list[0].ZDD;

ZKC = list[0].ZKC;

SUM = list[0].SUM;

invRedNum = list[0].invRedNum;

invOrangeNum = list[0].invOrangeNum;

invYellowNum = list[0].invYellowNum;

var option = {

title: {

text: "盘条",

textStyle: {

fontWeight: "normal",

fontSize: 21,

left: "15%",

tooltip: {

trigger: "axis", //触发类型。[ default: 'item' ] :数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用;'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用

axisPointer: {

lineStyle: {

color: "#57617B",

legend: {

data: ["当前库存", "未发订单"],

grid: {

left: "3%", //grid 组件离容器左侧的距离。

right: "4%", //grid 组件离容器右侧的距离。

bottom: "3%", //grid 组件离容器下侧的距离。

containLabel: true, //grid 区域是否包含坐标轴的刻度标签[ default: false ]

xAxis: {

data: ["盘条"],

yAxis: {

type: "value",

splitLine: { show: false },

series: [

{

data: [ZKC],

type: "bar",

stack: "x",

yAxisIndex: 0,

color: "#409EFF",

barWidth: "50px",

itemStyle: {

normal: {

color: function (params) {

if (

Number(params.value) < Number(invRedNum)

) {

return "#F56C6C";

} else if (

Number(params.value) <

Number(invOrangeNum)

) {

return "#E6A23C";

} else if (

Number(params.value) <

Number(invYellowNum)

) {

return "yellow";

} else {

return "#409EFF";

}

{

data: [ZDD],

type: "bar",

stack: "x",

yAxisIndex: 0,

color: "#ccc",

barWidth: "50px",

{

type: "bar",

data: [SUM],

smooth: false,

// stack: "x",

yAxisIndex: 0,

barWidth: "50px",

barGap: "-100%",

z: -1,

color: "#fff",

itemStyle: {

normal: {

borderColor: "#ccc", // 虚线颜色

borderType: "dashed", // 虚线样式

{

type: "custom",

renderItem: function renderItem(param, api) {

var point = api.coord([api.value(0), api.value(1)]);

return {

type: "line",

transition: ["shape"],

shape: {

x1: point[0] - 25,

x2: point[0] + 25,

y1: point[1],

y2: point[1],

style: api.style({

stroke: api.visual("color"),

lineWidth: 3,

}),

};

itemStyle: {

borderType: "soild",

normal: {

color: "#F56C6C",

z: 999,

data: [invRedNum],

{

type: "custom",

renderItem: function renderItem(param, api) {

var point = api.coord([api.value(0), api.value(1)]);

return {

type: "line",

transition: ["shape"],

shape: {

x1: point[0] - 25,

x2: point[0] + 25,

y1: point[1],

y2: point[1],

style: api.style({

stroke: api.visual("color"),

lineWidth: 3,

}),

};

itemStyle: {

borderType: "soild",

normal: {

color: "#E6A23C",

z: 999,

data: [invOrangeNum],

{

type: "custom",

renderItem: function renderItem(param, api) {

var point = api.coord([api.value(0), api.value(1)]);

return {

type: "line",

transition: ["shape"],

shape: {

x1: point[0] - 25,

x2: point[0] + 25,

y1: point[1],

y2: point[1],

style: api.style({

stroke: api.visual("color"),

lineWidth: 3,

}),

};

itemStyle: {

borderType: "soild",

normal: {

color: "yellow",

z: 999,

data: [invYellowNum],

};

fullScreen.setOption(option);

window.addEventListener("resize", function () {

fullScreen.resize();

});

fullScreen.on("click", (params) => {

this.$emit("custom-event", true);

});

};

</script>

</style>

总结

总体来说，这段代码实现了一个基于 Echarts 的图表展示功能，展示了盘条的当前库存、未发订单、总库存，并标注了三个不同颜色的安全库存线，当前库存、未发订单基于总库存之中。

本文章已经生成可运行项目

Echarts 柱状图重叠展示 总量和部分量

文章目录

前言

一、效果展示

二、代码介绍

三、完整代码

总结

Echarts 柱状图重叠展示总量和部分量