lineData1 = [
7, 10, 13, 7.5, 14, 15, 12, 25, 13, 17, 12, 21, 15, 14, 12, 7.5,
13, 15, 22, 16, 20, 14, 13, 20, 12, 5, 12, 21, 18, 19, 50, 20,
12.3, 42, 7.5, 20, 22.5, 35, 21, 18, 16, 24, 12.5, 10, 14.5, 17,
20, 19, 26, 23, 22, 27, 16.5, 23.8, 25,
]
lineData2 = [8, 10, 7, 7.5, 16, 5, 18, 45, 12, 13, 8.23, 19, 5, 11.15,
18, 7.5, 13, 19, 23, 14, 15, 22, 25, 37, 16, 12, 24, 22, 30, 11, 20,
20, 12.7, 8, 7.5, 20, 22.5, 15, 21, 22, 19, 16, 12.5, 25, 20.5, 17,
20, 6, 16, 27, 18, 13, 20.5, 41.2, 23]
lineData3 = [15, 20, 23.75, 20, 5, 10, 10, 10, 25, 50, 21.02, 45, 15,
31.1, 33.75, 15.8, 28, 43.5, 45, 45, 28.3, 31.5, 32, 38, 20.3, 8, 24,
42, 32, 20, 30, 27.5, 25, 50, 15, 45, 45, 50, 43, 40, 35, 40, 25, 35,
35, 36, 10, 25, 18, 50, 60, 40, 43, 35, 52]
lineData4 = [
{ name: "一", value: "45" },
{ name: "二", value: "10" },
{ name: "三", value: "44.25" },
{ name: "四", value: "35" },
{ name: "五", value: "43" },
{ name: "六", value: "35" },
{ name: "七", value: "40" },
{ name: "八", value: "20" },
{ name: "九", value: "46" },
{ name: "十", value: "20" },
{ name: "十一", value: "52.75" },
{ name: "十二", value: "8" },
{ name: "十三", value: "40" },
{ name: "十四", value: "23.75" },
{ name: "十五", value: "26.25" },
{ name: "十六", value: "44.2" },
{ name: "十七", value: "31" },
{ name: "十八", value: "4.5" },
{ name: "十九", value: "8" },
{ name: "二十", value: "10" },
{ name: "二十一", value: "19.7" },
{ name: "二十二", value: "21.5" },
{ name: "二十三", value: "12" },
{ name: "二十四", value: "5" },
{ name: "二十五", value: "33.7" },
{ name: "二十六", value: "55" },
{ name: "二十七", value: "23" },
{ name: "二十八", value: "10" },
{ name: "二十九", value: "20" },
{ name: "三十", value: "30" },
{ name: "三十一", value: "0" },
{ name: "三十二", value: "17.5" },
{ name: "三十三", value: "39" },
{ name: "三十四", value: "0" },
{ name: "三十五", value: "45" },
{ name: "三十六", value: "7" },
{ name: "三十七", value: "6" },
{ name: "三十八", value: "0" },
{ name: "三十九", value: "11" },
{ name: "四十", value: "12" },
{ name: "四十一", value: "11" },
{ name: "四十二", value: "7" },
{ name: "四十三", value: "36" },
{ name: "四十四", value: "20" },
{ name: "四十五", value: "25" },
{ name: "四十六", value: "15" },
{ name: "四十七", value: "45" },
{ name: "四十八", value: "34" },
{ name: "四十九", value: "36" },
{ name: "五十", value: "0" },
{ name: "五十一", value: "10" },
{ name: "五十二", value: "12" },
{ name: "五十三", value: "19" },
{ name: "五十四", value: "10" },
{ name: "五十五", value: "10" },
]
xData = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十',
'十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九',
'二十', '二十一', '二十二', '二十三', '二十四', '二十五', '二十六',
'二十七', '二十八', '二十九', '三十', '三十一', '三十二', '三十三',
'三十四', '三十五', '三十六', '三十七', '三十八', '三十九', '四十',
'四十一', '四十二', '四十三', '四十四', '四十五', '四十六', '四十七',
'四十八', '四十九', '五十', '五十一', '五十二', '五十三', '五十四', '五十五']
option = {
tooltip: {
trigger: "axis",
triggerOn: "click",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
textStyle: {
color: "#fff",
fontSize: 12,
},
backgroundColor: "rgba(51, 51, 51,0.7)",
borderColor: "#333",
borderWidth: 1,
extraCssText:
"box-shadow: 0 2px 25px #d1d415 inset;text-align: left;max-width:140px; white-space:pre-wrap",
formatter: function (params) {
let relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal +=
"<br/>" +
params[i].marker +
"第" +
(params.length - i) +
"季度" +
" " +
params[i].value +
"%";
}
return relVal;
},
},
xAxis: [
{
type: "category",
boundaryGap: false, //坐标轴两边留白
axisLine: {
show: true,
lineStyle: {
color: " #D2D2D2",
},
},
axisLabel: {
interval: 0,
textStyle: {
fontSize: 18,
color: "#828282",
},
},
axisTick: {
show: false,
},
data: xData,
},
],
yAxis: [
{
type: "value",
show: true,
},
],
series: [
{
name: "第一季度",
type: "line",
smooth: false,
stack: "总量",
symbolSize: 0,
showSymbol: false,
// 折线颜色
lineStyle: {
color: "rgb(211, 208, 152)",
type: "solid",
width: 2,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1,
0,
1,
1,
[
{
offset: 0,
color: "rgba(6, 23, 51, 1)",
},
{
offset: 0.5,
color: "rgba(6, 23, 51, 0.8)",
},
{
offset: 1,
color: "rgba(6, 23, 51, 0.4)",
},
],
false
),
},
},
data: lineData1
},
{
name: "第二季度",
type: "line",
smooth: false,
stack: "总量",
symbolSize: 0,
showSymbol: false,
// 折线颜色
lineStyle: {
color: "rgb(211, 208, 152)",
type: "solid",
width: 2,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1,
0,
1,
1,
[
{
offset: 0,
color: "rgba(13, 55, 123, 1)",
},
{
offset: 0.5,
color: "rgba(13, 55, 123, 0.8)",
},
{
offset: 1,
color: "rgba(13, 55, 123, 0.2)",
},
],
false
),
},
},
data: lineData2
},
{
name: "第三季度",
type: "line",
smooth: false,
stack: "总量",
symbolSize: 0,
showSymbol: false,
// 折线颜色
lineStyle: {
color: "rgb(211, 208, 152)",
type: "solid",
width: 2,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1,
0,
1,
1,
[
{
offset: 0,
color: "rgba(90, 128, 186, 1)",
},
{
offset: 0.5,
color: "rgba(90, 128, 186, 0.8)",
},
{
offset: 1,
color: "rgba(90, 128, 186, 0.2)",
},
],
false
),
},
},
data: lineData3
},
{
name: "第四季度",
type: "line",
smooth: false,
stack: "总量",
symbolSize: 0,
showSymbol: false,
// 折线颜色
lineStyle: {
color: "rgb(255, 110, 59, 0)",
type: "solid",
width: 1,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1,
0,
1,
1,
[
{
offset: 0,
color: "rgb(255, 110, 59)",
},
{
offset: 0.5,
color: "rgb(255, 137, 59)",
},
{
offset: 1,
color: "rgb(240, 195, 94)",
},
],
false
),
},
},
data: lineData4
},
// 进度警戒线
{
type: "line",
markLine: {
//添加警戒线
symbol: "none",
name: "警戒线",
silent: true,
label: {
position: "end",
fontSize: 14,
distance: 30,
},
data: [
{
silent: true, //鼠标悬停事件 true没有，false有
lineStyle: {
//警戒线的样式 ，虚实 颜色
type: "dashed",
color: "rgb(6, 23, 51)",
width: 2,
},
label: {
formatter: "年度目标线",
color: "orange",
fontSize: 16,
},
yAxis: 70,
animation: true,
},
{
silent: false, //鼠标悬停事件 true没有，false有
lineStyle: {
//警戒线的样式 ，虚实 颜色
type: "solid",
color: "rgba(237, 89, 78, 0.6)",
width: 1.5,
// opacity: 0.4,
},
label: {
color: "rgb(255, 96, 0)",
position: "end",
formatter: "二季度预警线",
fontSize: 16,
},
yAxis: 45, // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
},
{
silent: false, //鼠标悬停事件 true没有，false有
lineStyle: {
//警戒线的样式 ，虚实 颜色
type: "solid",
color: "rgba(255, 96, 0, 0.5)",
width: 1.5,
// opacity: 0.4,
},
label: {
color: "rgb(255, 96, 0)",
position: "end",
formatter: "三季度预警线",
fontSize: 16,
},
yAxis: 60, // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
},
{
silent: false, //鼠标悬停事件 true没有，false有
lineStyle: {
//警戒线的样式 ，虚实 颜色
type: "solid",
color: "rgba(237, 89, 78, 0.5)",
width: 1.5,
// opacity: 0.4,
},
label: {
color: "rgb(255, 96, 0)",
position: "end",
formatter: "一季度预警线",
fontSize: 16,
},
yAxis: 30, // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
},
],
},
},
],
};