关于标题
title: {
text: '',
left: 'left',
textStyle: {
color: 'rgba(80,227,194,1)',
fontfamily: 'AlibabaPuHuiTiM',
fontSize: fontSize(0.8)
},
padding: [40, 0, 0, 140] // 位置
},
titile可以是一个数组,表示多个标题
副标题的设置
subtext: ' 2020-3-23 12:12',
itemGap: 10, // 间距
subtextStyle: { // 对应样式 color: 'rgba(255, 255, 255, 1)', fontSize: 24, fontWeight: 400},
调整图表位于当前的canvas的坐标轴
grid: { //
x: 130,
y: 350,
borderWidth: 1,
containLabel: true
},
legend 图表的一些设置
data: [],
icon: 'circle', // 可以设置形状
right: '14%',
top: '10%',
y: 'center',
itemWidth: 60, // 设置宽度
itemHeight: 60, // 设置高度
itemGap: 60, // 设置间距
textStyle: {
color: '#ffffff',
fontSize: fontSize(0.45)
}
改变轴线的一些基本的设置
splitLine: {
// 改变轴线颜色
show: true, // 网格
lineStyle: {
// 使用深浅的间隔色
color: 'rgba(216, 224, 255, 0.62)',
// opacity: 0.58,
width: 1
}
}
关于series的设置
showSymbol: false, // 折现的原点在点击时候出现
symbolSize: 10, // 折线点的大小
关于基准线markLine的设置
markLine: {
silent: true,
symbol: ['none', 'none'],
lineStyle: {
width: 8
},
data: [{
yAxis: 900,
label: {
formatter: '监测点',
fontSize: fontSize(0.6)
},
lineStyle: {
color: 'rgba(248, 231, 28, 1)'
}
}]
}
图表上面的动态的显示数据
var app = {
currentIndex: -1
}
setInterval(function () {
var dataLen = options.series[0].data.length
// 取消之前高亮的图形
Chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: app.currentIndex
})
app.currentIndex = (app.currentIndex + 1) % dataLen
// console.log(app.currentIndex);
// 高亮当前图形
Chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: app.currentIndex
})
// 显示 tooltip
Chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: app.currentIndex
})
}, 1000)
Chart.setOption(options)
window.onresize = Chart.resize