折线图交互echarts 配置项内容和展示
dateSet 设置数据
配置项如下
option = {
"backgroundColor": '#000',
"name": "saleTrends",
"axisPointer": {
"link": {
"xAxisIndex": "all"
},
"label": {
"backgroundColor": "#777"
}
},
"title": [{
"text": "接单量（万平方米）",
"left": 22,
"top": 0,
"textStyle": {
"color": "rgba(255,255,255,0.65)",
"fontSize": 14,
"fontWeight": "normal"
}
}, {
"subtext": "总GMV（万元）",
"subtextStyle": {
"color": "rgba(255,255,255,0.65)",
"fontSize": 14,
"fontWeight": "normal"
},
"left": 22,
"top": "43%"
}],
"dataset": {
"dimensions": ["dateStr", "saleAmount", "relativeRatio", "groupAmount", "groupAmountRatio", "integralAmount", "integralAmountRatio", "hiddenVal", "mold"],
"source": [{
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-1",
"date": "5-1",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-2",
"date": "5-2",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-3",
"date": "5-3",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": "0.52",
"relativeRatio": "-",
"groupAmount": "0.50",
"groupAmountRatio": "-",
"groupArea": "5000.00",
"groupAreaRatio": "-",
"integralAmount": "0.02",
"integralAmountRatio": "-",
"dateStr": "5-4",
"date": "5-4",
"originAmount": "5,200.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-100.00%",
"groupAmount": 0,
"groupAmountRatio": "-100.00%",
"groupArea": "0.00",
"groupAreaRatio": "-100.00%",
"integralAmount": 0,
"integralAmountRatio": "-100.00%",
"dateStr": "5-5",
"date": "5-5",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-6",
"date": "5-6",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-7",
"date": "5-7",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-8",
"date": "5-8",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-9",
"date": "5-9",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-10",
"date": "5-10",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": "0.61",
"relativeRatio": "-",
"groupAmount": "0.60",
"groupAmountRatio": "-",
"groupArea": "6000.00",
"groupAreaRatio": "-",
"integralAmount": "0.01",
"integralAmountRatio": "-",
"dateStr": "5-11",
"date": "5-11",
"originAmount": "6,100.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-100.00%",
"groupAmount": 0,
"groupAmountRatio": "-100.00%",
"groupArea": "0.00",
"groupAreaRatio": "-100.00%",
"integralAmount": 0,
"integralAmountRatio": "-100.00%",
"dateStr": "5-12",
"date": "5-12",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-13",
"date": "5-13",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-14",
"date": "5-14",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-15",
"date": "5-15",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-16",
"date": "5-16",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-17",
"date": "5-17",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-18",
"date": "5-18",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-19",
"date": "5-19",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-20",
"date": "5-20",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-21",
"date": "5-21",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-22",
"date": "5-22",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-23",
"date": "5-23",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-24",
"date": "5-24",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-25",
"date": "5-25",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-26",
"date": "5-26",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-27",
"date": "5-27",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-28",
"date": "5-28",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-29",
"date": "5-29",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-30",
"date": "5-30",
"originAmount": "0.00",
"mold": "日环比"
}, {
"saleAmount": 0,
"relativeRatio": "-",
"groupAmount": 0,
"groupAmountRatio": "-",
"groupArea": "0.00",
"groupAreaRatio": "-",
"integralAmount": 0,
"integralAmountRatio": "-",
"dateStr": "5-31",
"date": "5-31",
"originAmount": "0.00",
"mold": "日环比"
}]
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"show": true,
"type": "line",
"lineStyle": {
"type": "dashed"
}
},
"backgroundColor": "rgba(0, 0, 0, 0.85)",
"padding": 10,
"formatter": {
"_custom": {
"type": "function",
"display": "<span>ƒ</span> formatter(params)"
}
}
},
"grid": [{
"x": "1%",
"y": "5%",
"height": "35%",
"top": 40,
"left": 80,
"right": 28,
"show": false
}, {
"x": "1%",
"y1": "0%",
"height": "85.5%",
"top": 40,
"left": 80,
"right": 28,
"show": false
}, {
"x": "1%",
"y2": "5%",
"top": "52.5%",
"height": "40%",
"left": 80,
"right": 28,
"show": false
}],
"xAxis": [{
"gridIndex": 0,
"show": false,
"type": "category",
"axisTick": {
"show": false
},
"axisLabel": {
"interval": 4
}
}, {
"show": false,
"gridIndex": 1,
"type": "category",
"axisTick": {
"show": false
},
"axisLabel": {
"interval": 4
}
}, {
"type": "category",
"gridIndex": 2,
"axisTick": {
"show": false
},
"axisLabel": {
"color": "rgba(255,255,255,0.85)",
"interval": 4
},
"axisLine": {
"lineStyle": {
"color": "rgba(255,255,255,0.12);"
}
}
}],
"yAxis": [{
"type": "value",
"gridIndex": 0,
"nameTextStyle": {
"padding": 40
},
"offset": 24,
"position": "left",
"nameLocation": "middle",
"splitLine": {
"show": true,
"lineStyle": {
"color": "rgba(255,255,255,0.12)"
}
},
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
"axisLabel": {
"formatter": "{value}",
"textStyle": {
"color": "rgba(255,255,255,0.65)",
"fontSize": 12
}
},
"splitNumber": 5
}, {
"show": false,
"type": "value",
"gridIndex": 1,
"splitLine": {
"show": true
},
"offset": 24,
"nameTextStyle": {
"padding": 25,
"align": "center"
},
"position": "left",
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
"axisLabel": {
"formatter": "{value}"
},
"splitNumber": 5
}, {
"type": "value",
"gridIndex": 2,
"nameTextStyle": {
"padding": 40
},
"offset": 24,
"position": "left",
"nameLocation": "middle",
"splitLine": {
"show": true,
"lineStyle": {
"color": "rgba(255,255,255,0.12)"
}
},
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
"axisLabel": {
"formatter": "{value}",
"textStyle": {
"color": "rgba(255,255,255,0.65)",
"fontSize": 12
}
},
"splitNumber": 5
}],
"series": [{
"name": "接单量",
"type": "line",
"xAxisIndex": 0,
"yAxisIndex": 0,
"encode": {
"x": "dateStr",
"y": "groupArea"
},
"symbol": "circle",
"symbolSize": 8,
"itemStyle": {
"normal": {
"width": 2,
"color": "#80F5FF"
}
}
}, {
"type": "bar",
"stack": "merge",
"barWidth": 14,
"xAxisIndex": 2,
"yAxisIndex": 2,
"encode": {
"x": "dateStr",
"y": "integralAmount"
},
"icon": "",
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgba(255,211,41,1)"
}, {
"offset": 1,
"color": "rgba(254,167,18,1)"
}]
}
}
}
}, {
"type": "bar",
"stack": "merge",
"barWidth": 14,
"xAxisIndex": 2,
"yAxisIndex": 2,
"encode": {
"x": "dateStr",
"y": "groupAmount"
},
"icon": "",
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "#2A84CF"
}, {
"offset": 1,
"color": "#03FECD"
}]
}
}
}
}, {
"type": "bar",
"barWidth": 14,
"xAxisIndex": 1,
"yAxisIndex": 1,
"encode": {
"x": "dateStr",
"y": "hiddenVal"
},
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "#ccc"
}, {
"offset": 1,
"color": "#f00"
}]
}
}
},
"z": 1
}]
}
截图如下
