调试预览
代码如下:
let list = [
{
policy_content: '',
policy_country: '北京',
policy_time: '1999-06-11',
policy_title: '测试数据 - 1',
},
{
policy_content: '',
policy_country: '北京',
policy_time: '2007-01-31',
policy_title: '测试数据 - 2',
},
{
policy_content: '',
policy_country: '北京',
policy_time: '2007-06-22',
policy_title: '测试数据 - 2',
},
{
policy_content: '',
policy_country: '北京',
policy_time: '2016-02-06',
policy_title: '测试数据 - 3',
},
{
policy_content: '',
policy_country: '北京',
policy_time: '2016-03-09',
policy_title: '测试数据 - 4',
},
{
policy_content: '',
policy_country: '北京',
policy_time: '2016-03-18',
policy_title: '测试数据 - 5',
},
{
policy_content: '',
policy_country: '北京',
policy_time: '2016-10-26',
policy_title: '测试数据 - 6',
},
{
policy_content:'',
policy_country: '北京',
policy_time: '2016-11-29',
policy_title: '测试数据 - 7',
},
];
let seriesList = [];
var yarr = [];
var linearr = [];
var linev = { value: -0, symbol: 'none' };
list.map((item, index) => {
seriesList.push({
date: item.policy_time,
title: item.policy_title,
country: item.policy_country,
content: item.policy_content,
value: 0,
label: {
show: true,
lineHeight: 20,
align: 'left',
padding: 30,
position: 'left',
formatter: function (params) {
return `{bolder|${params.name}}\n${params.data.title}`;
},
rich: {
bolder: {
fontWeight: 900,
color: '#F40',
},
},
},
});
});
seriesList.map((item, index) => {
linearr.push({
value: -0,
});
yarr.push(`${item.date} ${item.country}`);
});
option = {
grid: {
top: 0,
left: '10%',
right: '30%',
bottom: 0,
},
legend: {
bottom: 0,
itemWidth: 10,
itemHeight: 10,
textStyle: {
padding: [2, 0, 0, 0],
},
},
xAxis: {
show: false,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
splitLine: { show: false },
min: 0,
max: 0,
},
yAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: {
width: 6,
color: 'yellow',
},
},
axisTick: {
show: false,
alignWithLabel: true,
},
splitLine: {
show: false,
},
axisLabel: {
margin: 10,
alignWithLabel: true,
show: false,
},
data: ['', ...yarr, ''],
},
color: ['#f40'],
series: [
{
type: 'line',
symbolSize: 12,
itemStyle: {
color:'yellow',
borderColor:'yellow',
borderWidth: 1,
},
hoverAnimation: false,
legendHoverLink: false,
data: [linev, ...seriesList, linev],
lineStyle: {
color: 'yellow',
},
},
],
};