echats的折线图使用和一些简单的配置信息

232 阅读1分钟
关于标题
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