echarts折线图X轴刻度设置与多种标记
x轴刻度设置图表多标记
tooltop回调展示
数据标记
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
[removed][removed]
<!-- [removed][removed] -->
[removed]
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
let base = +new Date(1968, 9, 3);
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [{ value : Math.random() * 300 }];
for (let i = 200; i <= 750; i++) {
var now = new Date((base += oneDay));
date.push(i);
}
for (let i = 1; i <= (750-200); i++) {
data.push({
value : Math.round((Math.random() - 0.5) * 20 + data[i - 1].value),
rank: 10000 + Math.round((Math.random() - 0.5) * 20 + data[i - 1].value),
})
}
// 我的分数
// emptyCircle 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
// 'image://http://example.website/a/b.png' 'image://[removed]xxxxxxxxxxxxx'
// data[50].symbol = 'emptyCircle'
// data[300].symbol = 'circle'
// data[400].symbol = 'image://[removed]R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
// data[400].symbolSize = 20
// data[400].symbolKeepAspect = true
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '30%'];
},
// formatter: '
当前成绩：{b0}分: {c}人', //字符串处理
formatter: function (option, ticket, callback) { //回调函数处理
return `我的成绩：500分
当前成绩：${option[0].dataIndex + 200}分, ${option[0].value}人
当前位次：${data[option[0].dataIndex].rank}`;
}
},
title: {
left: 'center',
text: 'echarts折线图X轴刻度设置与多种标记'
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
interval: 49 //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
},
data: date
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
// dataZoom: [
// {
// type: 'inside',
// start: 0,
// end: 10
// },
// {
// start: 0,
// end: 10
// }
// ],
series: [
{
name: 'Fake Data',
type: 'line',
symbol: 'none',
symbolSize : 20,
symbolKeepAspect: true,
sampling: 'lttb',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 158, 68)'
},
{
offset: 1,
color: 'rgb(255, 70, 131)'
}
])
},
data: data,
markPoint: {
symbolSize: 14,
data: [{
name: '成绩',
// yAxis: '150',
// xAxis: '480',
coord:[50,data[50].value],
symbol: 'circle',
},{
name: '成绩',
// yAxis: '150',
// xAxis: '480',
coord:[300,data[300].value],
symbol: 'pin',
symbolSize: 24,
},{
name: '成绩',
// yAxis: '150',
// xAxis: '480',
coord:[400,data[400].value],
symbol: 'emptyCircle',
},]
}
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
[removed]
</body>
</html>
发表评论 取消回复