let myDate1 = [
"2017年",
"2018年",
"2019年",
"2020年",
"2021年",
"2022年",
];
let yData = [54000, 75000, 40000, 50000, 40000, 59000];
let yData1 = [50, 80, 130, 120, 85, 120];
function getSymbolData(datas) {
let arr = [];
for (var i = 0; i < datas.length; i++) {
arr.push({
value: datas[i],
symbolPosition: "end",
});
}
return arr;
}
let option = {
//你的代码
backgroundColor: "#02312D",
grid: { containLabel: true, top: '18%', right: '3%', bottom: '3%', left: '3%' },
legend: {
show: true,
data: ["第一产业(万元)", "发展速度(%)"],
textStyle: { fontSize: '12px', color: "#ffffff", },
top: "4%",
},
tooltip: {
trigger: "axis",
formatter: '农业产值及发展速度<br>{b}：{c}万元<br>{b1}：{c1}%',
backgroundColor: "#053D35", //设置背景颜色
textStyle: {
color: "#fff",
},
borderColor: "#053D35",
axisPointer: {
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(0, 255, 233,0)",
},
{
offset: 0.5,
color: "rgba(255, 255, 255,1)",
},
{
offset: 1,
color: "rgba(0, 255, 233,0)",
},
],
global: false,
},
},
},
},
xAxis: {
type: "category",
data: myDate1,
axisLine: {
show: true,
lineStyle: { color: "rgba(9, 80, 67, 1)", type: "solid" },
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
show: true,
fontSize: 12,
color: "#D1DEEE",
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
},
},
yAxis: [
{
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
show: true,
fontSize: 12,
color: "#fff",
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(9, 80, 67, 1)',
type: 'dashed'
}
},
},
{
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
show: true,
fontSize: 12,
color: "#fff",
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
formatter: "{value}",
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(9, 80, 67, 1)',
type: 'dashed'
}
},
interval: 40,
// splitNumber: 3
},
],
series: [
{
name: "第一产业(万元)",
type: "bar",
barWidth: "18px",
showBackground: true,
backgroundStyle: {
color: "rgba(11, 173, 142, .12)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(20, 208, 168, 0)" },
{ offset: 1, color: "rgba(25, 225, 183, 1)" },
]),
},
// emphasis: {
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#83bff6" },
// { offset: 1, color: "#2378f7" },
// ]),
// },
// },
data: yData,
},
{
name: "发展速度(%)",
type: "line",
yAxisIndex: 1,
itemStyle: {
normal: {
lineStyle: {
color: "#FFA600", //改变折线颜色
},
},
},
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// // 渐变颜色
// {
// offset: 0,
// color: "rgba(255, 166, 0, 0.3)",
// },
// {
// offset: 1,
// color: "rgba(255, 166, 0, 0.5)",
// },
// ],
// global: false,
// },
// },
smooth: false,
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 6,
data: yData1,
},
{
type: "pictorialBar",
symbol: "react",
symbolSize: [18, 3],
symbolOffset: [0, -4],
z: 12,
itemStyle: {
color: "#6FE3FF",
},
data: getSymbolData(yData)
}
],
};