echarts
chartData: {
title: {
text: "月渗透率趋势变化",
textStyle: {
color: "rgba(0, 0, 0, 0.85)",
fontSize: "14"
},
left: 30
},
tooltip: {
trigger: "axis"
},
legend: {
data: ["品类月渗透率", "品牌月渗透率"],
right: 10
},
// "legend":{"show":false,"x2":"30px"},
grid: {
left: "3%",
right: "4%",
bottom: "60", //轴线距离盒子下面的距离
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: true, //左右两端留白
data: [],
axisTick: { show: true }, //刻度线是否影藏
splitLine: {
show: false,
interval: 0,
lineStyle: { color: "#D9D9D9", type: "solid" }
},
splitArea: { show: false },
axisLine: { show: true, lineStyle: { color: "#D9D9D9" } }
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: { color: "#E9E9E9", width: 1, type: "dashed" }
},
splitArea: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { color: "#808080", formatter: "{value}%" }
},
series: [
{
name: "品类月渗透率",
type: "line",
// stack: "总量",
data: [120, 886, 101, 666, 90, 230, 888, 565, 334, 999, 65, 555],
color: "#00B3AB",
itemStyle: {
normal: {
lineStyle: {
width: 1, //折线宽度
color: "#00B3AB" //折线颜色
}
}
},
symbol: "circle"
},
{
name: "品牌月渗透率",
type: "line",
// stack: "总量",
data: [820, 123, 901, 455, 1290, 432, 122, 101, 666, 90, 230, 110],
color: "#FFBB5F",
itemStyle: {
normal: {
lineStyle: {
width: 1, //折线宽度
color: "#FFBB5F" //折线颜色
}
}
},
symbol: "circle"
}
],
dataZoom: [
{
show: true,
height: 24,
filterMode: "weakFilter",
textStyle: false,
xAxisIndex: [0],
type: "slider",
bottom: 25, //放大进度条距离盒子下面的距离
start: 0,
end: 100,
handleIcon:
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "90%",
showDataShadow: false,
dataBackground: {
areaStyle: { color: "#8392A5" },
lineStyle: { opacity: 0.8, color: "#8392A5" }
},
handleStyle: {
color: "#fff",
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.6)",
shadowOffsetX: 2,
shadowOffsetY: 2
}
}
// {"show":true,"height":24,"filterMode":"weakFilter","textStyle":false,
// "xAxisIndex":[0],"type":"inside","bottom":10,"start":0,"end":100,"handleIcon":"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z","handleSize":"90%","showDataShadow":false,
// "dataBackground":{"areaStyle":{"color":"#8392A5"},"lineStyle":{"opacity":0.8,"color":"#8392A5"}},"handleStyle":{"color":"#fff","shadowBlur":3,"shadowColor":"rgba(0, 0, 0, 0.6)","shadowOffsetX":2,"shadowOffsetY":2}
// }
]
},
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer);
timer = null;
})
https://blog.csdn.net/qq_37600506/article/details/105208307
chartData1: {
title: {
text: "同比",
textStyle: { fontSize: 12, fontWeight: 400, color: "#808080" },
left: 20,
top: 30
},
legend: { show: false, x2: "30px" },
xAxis: {
boundaryGap: false,
axisTick: { show: false },
axisLabel: { color: "#666666" },
splitLine: {
show: false,
interval: 0,
lineStyle: { color: "#D9D9D9", type: "dashed" }
},
splitArea: { show: false },
axisLine: { show: false, lineStyle: { color: "#D9D9D9" } }
},
dataZoom: [
{
show: true,
height: 24,
filterMode: "weakFilter",
textStyle: false,
xAxisIndex: [0],
type: "slider",
bottom: 20,
start: 0,
end: 100,
handleIcon:
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "90%",
showDataShadow: false,
dataBackground: {
areaStyle: { color: "#8392A5" },
lineStyle: { opacity: 0.8, color: "#8392A5" }
},
handleStyle: {
color: "#fff",
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.6)",
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
{
show: true,
height: 24,
filterMode: "weakFilter",
textStyle: false,
xAxisIndex: [0],
type: "inside",
bottom: 10,
start: 0,
end: 100,
handleIcon:
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "90%",
showDataShadow: false,
dataBackground: {
areaStyle: { color: "#8392A5" },
lineStyle: { opacity: 0.8, color: "#8392A5" }
},
handleStyle: {
color: "#fff",
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.6)",
shadowOffsetX: 2,
shadowOffsetY: 2
}
}
],
grid: {
show: true,
left: 20,
right: 80,
bottom: 20,
top: 80,
borderWidth: 0,
containLabel: true
},
tooltip: {
trigger: "item",
backgroundColor: "#FFFFFF",
padding: [10, 10],
textStyle: { color: "rgba(0, 0, 0, 0.65)", fontSize: 12 },
extraCssText:
"box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);border-radius: 4px"
},
yAxis: {
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { color: "#808080", formatter: "{value}%" },
splitLine: {
show: true,
interval: 0,
lineStyle: { color: "#E9E9E9", type: "dashed" }
},
splitArea: { show: false }
},
series: [
{
data: [
[7475365.23, "216.69", "防晒/隔离", 7475365.23],
[2889677.09, "191.76", "男士洁面", 2889677.09],
[2236114.49, "224.04", "润肤", 2236114.49],
[16273549.04, "400.76", "洗发", 16273549.04]
],
type: "scatter",
emphasis: { label: { show: false, position: "top" } },
itemStyle: {
shadowBlur: 10,
shadowColor: "rgba(0, 179, 171, 0)",
shadowOffsetY: 5,
color: {
colorStops: [{ offset: 1, color: "rgba(255, 187, 95,.5)" }]
}
},
markLine: {
silent: true,
label: { show: true, position: "insideEndTop" },
precision: 0.01,
symbolSize: 0,
lineStyle: {
normal: { color: "rgba(0, 179, 171)", type: "solid", width: 1 }
},
data: [
{
xAxis: 8136774.52,
type: "average",
label: { position: "end" }
},
{ yAxis: 200.38, type: "average" }
]
},
markArea: {
silent: true,
label: {
color: "#FFFFFF",
fontSize: 12,
padding: [5, 5],
borderRadius: 2,
backgroundColor: "#00B3AB"
}
},
animation: true,
animationDuration: 1500,
animationDurationUpdate: 1500,
animationDelayUpdate: 300,
animationThreshold: 2000
}
]
},
chartData: {
title: {
text: "月渗透率趋势变化",
textStyle: {
color: "rgba(0, 0, 0, 0.85)",
fontWeight: "400",
fontSize: "14"
},
left: 30
},
tooltip: {
trigger: "axis",
formatter(params) {
var relVal = params[0].name
for (var i = 0, l = params.length; i < l; i++) {
relVal += ' <br/> ' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
}
return relVal;
},
// formatter: '{a0}:{c0}%</br>{a1}:{c1}%',
backgroundColor: '#fff',
padding: 20,
extraCssText:
'box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);border-radius: 4px;',
textStyle: {
color: '#333'
},
},
legend: {
data: ["品类月渗透率", "品牌月渗透率"],
right: 10
},
// "legend":{"show":false,"x2":"30px"},
grid: {
left: "3%",
right: "4%",
bottom: "60", //轴线距离盒子下面的距离
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: true, //左右两端留白
data: [],
axisTick: { show: true }, //刻度线是否影藏
splitLine: {
show: false,
interval: 0,
lineStyle: { color: "#D9D9D9", type: "solid" }
},
splitArea: { show: false },
axisLine: { show: true, lineStyle: { color: "#D9D9D9",width: 1, type: "solid"} } //x轴线
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: { color: "#E9E9E9", width: 1, type: "dashed" }
},
splitArea: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { color: "#808080", formatter: "{value}%" }
},
series: [
{
name: "品类月渗透率",
type: "line",
// stack: "总量",
data: [120, 886, 101, 666, 90, 230, 888, 565, 334, 999, 65, 555],
color: "#00B3AB",
itemStyle: {
normal: {
lineStyle: {
width: 1, //折线宽度
color: "#00B3AB" //折线颜色
}
}
},
symbol: "circle"
},
{
name: "品牌月渗透率",
type: "line",
// stack: "总量",
data: [820, 123, 901, 455, 1290, 432, 122, 101, 666, 90, 230, 110],
color: "#FFBB5F",
itemStyle: {
normal: {
lineStyle: {
width: 1, //折线宽度
color: "#FFBB5F" //折线颜色
}
}
},
symbol: "circle"
}
],
dataZoom: [
{
show: true,
height: 24,
filterMode: "weakFilter",
textStyle: false,
xAxisIndex: [0],
type: "slider",
bottom: 20,
start: 0,
end: 100,
handleIcon:
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "90%",
showDataShadow: false,
dataBackground: {
areaStyle: { color: "#8392A5" },
lineStyle: { opacity: 0.8, color: "#8392A5" }
},
handleStyle: {
color: "#fff",
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.6)",
shadowOffsetX: 2,
shadowOffsetY: 2
}
}
]
},
tooltip: {
trigger: "axis",
formatter(params) {
var relVal = params[0].name
for (var i = 0, l = params.length; i < l; i++) {
relVal += ' <br/> ' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
}
return relVal;
},
params[0]={seriesName :'品类月渗透率',value:ele.category_scale,name:ele.transaction_month}
params[1]={seriesName :'品牌月渗透率',value:ele.brand_scale}
this.chartData.tooltip.formatter(params)
\
