效果图
采用的是父传子
数据格式
子组件代码
<template>
<div class="line-echarts">
<div class="line" ref="lineRef"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// this.init();
},
methods: {
init(row) {
if (!this.myChart) {
this.myChart = echarts.init(this.$refs.lineRef);
window.addEventListener("resize", () => {
this.myChart?.resize();
});
}
let data = {
chart: row,
};
let xAxisMonth = [],
barData = [],
lineData = [];
for (let i = 0; i < data.chart.length; i++) {
xAxisMonth.push(data.chart[i].name);
barData.push({
name: xAxisMonth[i],
value: data.chart[i].VALUE,
});
lineData.push({
name: xAxisMonth[i],
value: data.chart[i].VALUE,
});
}
// console.log(barData,lineData);
let option = {
// backgroundColor: "#020d22",
title: "",
grid: {
top: "5%",
left: "0%",
bottom: "0%",
right: "0%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
backgroundColor: "rgba( 248,248,255,0.7)", //设置背景图片 rgba格式
borderWidth: "1", //边框宽度设置1
borderColor: "#3EB6F5", //设置边框颜色
textStyle: {
color: "#3C3A3A", //设置文字颜色
},
formatter: function(params) {
return (
params[0]["data"].name +
"<br/>" +
params[0].marker +
" " +
params[0]["data"].value
);
},
},
xAxis: [
{
type: "category",
show: true,
data: row.map((it) => it.name),
axisLabel: {
textStyle: {
color: "#b6b5ab",
},
},
},
{
type: "category",
position: "bottom",
// data: xAxisMonth,
boundaryGap: true,
// offset: 40,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: "#b6b5ab",
},
},
},
],
yAxis: [
{
show: true,
splitLine: {
show: false,
lineStyle: {
color: "rgba(255,255,255,0.2)",
},
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
color: "#b6b5ab",
},
},
],
color: ["#A7F5F9"],
series: [
{
type: "pictorialBar",
xAxisIndex: 1,
barWidth: 3,
symbol: 'path://d="M150 130 L130 50 L170 50 Z"',
itemStyle: {
color: "#f5d600",
emphasis: {
opacity: 1,
},
},
data: barData,
},
{
symbol: "circle",
symbolSize: 8,
symbolOffset: [0, "-50%"],
symbolPosition: "end",
type: "pictorialBar",
xAxisIndex: 0,
data: barData,
itemStyle: {
color: "#f5d600",
},
},
{
symbol: "circle",
symbolSize: 20,
symbolOffset: [0, "-50%"],
symbolPosition: "end",
type: "pictorialBar",
xAxisIndex: 0,
data: barData,
itemStyle: {
color: "#f5d60022",
},
},
],
};
option && this.myChart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
.line-echarts {
width: 100%;
height: calc(100% - 70px);
.line {
width: 100%;
height: 100%;
padding: 18px;
box-sizing: border-box;
}
}
</style>