样式展示:
示例代码:
html:
<div id="charts" class="main_container"></div>
js
//初始化方法
getOption(c, d, e, f) {
var QYThingChart = this.$echarts.init(
document.getElementById("charts")
);
QYThingChart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,'line' | 'shadow'
},
formatter(params) {
return `${params[0].seriesName}:${params[0].value}<br/>${params[1].seriesName}:${params[1].value}<br/>${params[2].seriesName}:${params[2].value}`;
},
},
legend: {
data: ["xxx", "xxx", "xxx"],//使用时请替换xxx为自己的实际数据
icon: "horizontal",
itemWidth: 20,
itemHeight: 5,
top: "5%",
textStyle: {
//图例文字样式
color: "#8F93A2",
fontSize: 18,
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
data: ["周一", "周二", "周三", "周四", "周五"],
axisTick: {
show: false, // 设置x轴的刻度线
},
axisLine: {
lineStyle: {
color: "#3B537A",
},
},
axisLabel: {
textStyle: {
color: "#8F93A2", // 设置字体颜色
fontSize: 22,
},
},
},
yAxis: {
type: "value",
axisTick: {
show: false, //坐标轴刻度线
},
axisLine: {
show: false, // 坐标轴线
},
splitLine: {
show: true,
lineStyle: {
type: "dashed", // 虚线类型
color: "#273E63",
},
},
axisLabel: {
textStyle: {
color: "#8F93A2", // 字体颜色
fontSize: 22,
},
},
},
series: [
{
name: "xxx", //使用时请替换数据名称
type: "bar",
stack: "总量",
barWidth: 30,
itemStyle: {
normal: {
color: "#159AFF",
},
},
label: {
normal: {
show: false,
position: "insideRight",
},
},
data: c,
},
{
name: "xxx",//使用时请替换数据名称
type: "bar",
stack: "总量",
barWidth: 30,
itemStyle: {
normal: {
color: "#15FFF6",
},
},
label: {
normal: {
show: false,
position: "insideRight",
},
},
data: d,
},
{
name: "xxx",//使用时请替换数据名称
type: "bar",
stack: "总量",
barWidth: 30,
itemStyle: {
normal: {
color: "#EECB5F",
},
},
label: {
normal: {
show: false,
position: "insideRight",
},
},
data: e,
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#0B285D",
},
},
symbolRepeat: "fixed",
symbolMargin: 5,
symbol: "rect",
symbolClip: true,
symbolSize: [30, 2],
symbolPosition: "start",
symbolOffset: [0, 1],
data: f,
width: 1,
z: 10,
zlevel: 1,
},
],
});
this.echartResize(charts);//自适应窗口方法
},
echartResize(e){
window.addEventListener("resize", function () {
e.resize();
});
},
//调用接口获取数据
getData(){
//c,d,e,f为模拟数据,根据接口返回数据结构可以重写逻辑
let c = [320, 302, 301, 334, 390];
let d = [120, 132, 101, 134, 90];
let e = [220, 182, 191, 234, 290];
let f = [];//f为横线样式,f的数组是为了显示高度,为各组数据之和
c.map((it, index) => {
f.push(Number(it) + Number(d[index]) + Number(e[index]));
});
this.getCompanyThings(c, d, e, f);
}