let xsl = [30, 45, 26, 40];
let xse = [35, 56, 20, 43];
let xszzl = [24, 42, 21, 23];
const isRedList = new Array(xse.length).fill(0);
const max = Math.max(...xse, 1);
const getSymbolData = (datas) => {
let arr = [];
for (var i = 0; i < datas.length; i++) {
isRedList[i] = max;
arr.push({
value: datas[i],
symbolPosition: "end",
});
}
return arr;
};
let myData2 = ["水泥", "多孔砖", "医用氧气", "工业氧气"];
let option = {
//你的代码
backgroundColor: "#041C44",
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
textStyle: {
color: "#fff",
fontSize: 12,
},
confine: true, // 超出范围
backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
// borderColor: "rgba(255, 255, 255, .8)",
formatter: "{b}<br>{a}：{c}万吨<br>{a1}：{c1}万元<br>{a2}：{c2}%",
},
legend: {
top: "4%",
y: "center",
itemWidth: 14,
itemHeight: 4,
itemGap: 15,
textStyle: {
fontSize: 12,
color: "#fff",
padding: [0, 0, 0, 6],
},
},
grid: {
top: "18%",
left: "4%",
right: "4%",
bottom: "2%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: myData2,
axisTick: {
show: false,
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: "#1C82C5",
},
},
axisLabel: {
interval: 0,
margin: 10,
color: "#05D5FF",
textStyle: {
fontSize: 14,
color: "#fff",
},
},
},
],
yAxis: [
{
type: "value",
name: "销售量（万吨）",
splitNumber: 5,
type: "value",
nameTextStyle: {
color: "#fff",
fontSize: 12,
align: "center",
padding: [0, 0, 0, 0],
},
axisLabel: {
formatter: "{value}",
color: "rgba(95, 187, 235, 1)",
textStyle: {
fontSize: 14,
color: "#fff",
lineHeight: 16,
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(28, 130, 197, .3)",
type: "dashed",
},
},
},
{
name: "增长额（万元）",
splitNumber: 5,
type: "value",
nameTextStyle: {
color: "#fff",
fontSize: 12,
align: "center",
padding: [0, 0, 0, 0],
},
axisLabel: {
show: true,
fontSize: 12,
color: "#fff",
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
{
// name: "销售增长率（%）",
splitNumber: 5,
// offset: 50,
type: "value",
nameTextStyle: {
color: "#fff",
fontSize: 12,
align: "center",
padding: [0, 0, 0, 0],
},
axisLabel: {
show: false,
fontSize: 12,
color: "#fff",
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
],
series: [
{
name: "销售量",
type: "bar",
yAxisIndex: 0,
barWidth: "16",
barGap: "50%",
data: xsl,
itemStyle: {
// borderRadius: [2, 2, 0, 0],
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(16, 160, 242, 1)",
},
{
offset: 1,
color: "rgba(0, 82, 184, 0)",
},
],
},
},
},
{
name: "销售额",
type: "bar",
yAxisIndex: 1,
barWidth: "16",
barGap: "50%",
data: xse,
itemStyle: {
// borderRadius: [2, 2, 0, 0],
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(0, 216, 255, 1)",
},
{
offset: 1,
color: "rgba(0, 216, 255, 0)",
},
],
},
},
},
{
name: "销售增长率",
yAxisIndex: 2,
type: "line",
showSymbol: true,
smooth: true,
symbolSize: 8,
lineStyle: {
normal: {
color: "#02D3EA",
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0, 255, 246, 0.16)",
},
{
offset: 1,
color: "rgba(0, 255, 246, 0)",
},
],
false
),
},
},
itemStyle: {
color: "#02D3EA",
borderColor: "#02D3EA",
borderWidth: 2,
},
label: {
show: true,
position: "top",
formatter: "{c}%",
textStyle: {
fontSize: 14,
color: "#fff",
},
},
data: xszzl, // 折线图的数据
},
{
type: "pictorialBar",
symbol: "react",
symbolSize: [18, 3],
symbolOffset: [-12, -2],
z: 12,
itemStyle: {
color: "#00BAFF",
shadowColor: "#00BAFF",
shadowBlur: 20,
},
data: getSymbolData(xsl),
},
{
type: "pictorialBar",
symbol: "react",
symbolSize: [18, 3],
symbolOffset: [12, -2],
z: 12,
itemStyle: {
color: "#00EAFF",
shadowColor: "#00EAFF",
shadowBlur: 20,
},
data: getSymbolData(xse),
},
],
};