Graphic doesn't work when I'm using Timeline and dataset
Version
4.8.0
Reproduction link
https://codepen.io/wogaozhixu/pen/yLJEaZb
Steps to reproduce
The graphic property does not appear to be in effect
What is expected?
make it work!
What is actually happening?
it does not work
Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.
In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.
If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical question.
If you are interested in the project, you may also subscribe our mailing list.
Have a nice day! 🍵
nobody care this bug?
var chart_bar = echarts.init(document.getElementsByClassName("chart")[0]);
chart_bar.setOption({
baseOption: {
tooltip: {
trigger: "axis"
},
legend: {
type: "scroll",
scrollDataIndex: 0,
orient: "horizontal",
show: true,
textStyle: {
fontSize: 12,
fontFamily: "微软雅黑",
fontWeight: null
}
},
grid: {
containLabel: true,
left: 20,
right: 20,
bottom: 80,
top: 50
},
xAxis: {
type: "category",
axisLabel: {
interval: "auto",
rotate: 0,
show: true,
fontSize: 12,
fontWeight: null
},
axisLine: {
lineStyle: {
width: 1
},
show: true
}
},
yAxis: {
type: "value",
axisLabel: {
show: true,
fontSize: 12,
fontWeight: null
},
min: null,
max: null,
axisLine: {
lineStyle: {
width: 1
},
show: true
}
},
series: [
{
name: "签约额(元)",
type: "line",
dimensions: ["分子公司", "签约额(元)"],
smooth: false,
smoothMonotone: "default",
label: {}
}
],
color: [
"#4266F2",
"#17C5D2",
"#FFB82E",
"#F9731B",
"#F04331",
"#E300A4",
"#911CF8",
"#0F19D1"
],
label: {
show: false,
showZero: true,
showMin: false,
showMax: false
},
dataZoom: [
{
show: false,
xAxisIndex: 0,
height: 15,
bottom: 90
}
],
// graphic attribute doesn`t work
graphic: [
{
type: "text",
rotation: 0,
left: "center",
top: 10,
style: {
text: "分子公司",
fill: "#545454",
font: "14px 微软雅黑"
}
},
{
type: "text",
rotation: 1.57,
left: 0,
bottom: "center",
style: {
text: "签约额(元)",
fill: "#545454",
font: "14px 微软雅黑"
}
}
],
timeline: {
show: true,
autoPlay: true,
loop: true,
playInterval: 2000,
axisType: "category",
controlPosition: "left",
rewind: false,
symbol: "emptyCircle",
symbolSize: 10,
orient: "horizontal",
left: 0,
right: "auto",
top: "auto",
bottom: 20,
lineStyle: {
show: true,
color: "#304654"
},
data: [
{
value: "双章合同",
tooltip: {
show: true,
formatter: "{b}"
}
},
{
value: "单章合同",
tooltip: {
show: true,
formatter: "{b}"
}
}
]
}
},
options: [
{
dataset: {
source: [
{
合同状态: "双章合同",
"签约额(元)": 8980788.75,
分子公司: "北京系统集成"
},
{
合同状态: "双章合同",
"签约额(元)": 4990600,
分子公司: "河南系统集成"
},
{
合同状态: "双章合同",
"签约额(元)": 6960337.5,
分子公司: "朗云产品部"
},
{
合同状态: "双章合同",
"签约额(元)": 1109125,
分子公司: "分销事业部"
},
{
合同状态: "双章合同",
"签约额(元)": 13357490.5,
分子公司: "吉林系统集成"
},
{
合同状态: "双章合同",
"签约额(元)": 60613638.46,
分子公司: "江西系统集成"
},
{
合同状态: "双章合同",
"签约额(元)": 40731012.5,
分子公司: "天津系统集成"
}
]
}
},
{
dataset: {
source: [
{
合同状态: "单章合同",
"签约额(元)": 6171718.75,
分子公司: "天津系统集成"
},
{
合同状态: "单章合同",
"签约额(元)": 1083375,
分子公司: "辽宁系统集成"
},
{
合同状态: "单章合同",
"签约额(元)": 967187.5,
分子公司: "吉林系统集成"
}
]
}
}
]
});
See demo - maybe this is what you want ? graphic moved inside options.