let option = {
backgroundColor: 'white',
grid: {
top: '20%',
left: '5%',
right: '15%',
bottom: '8%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
backgroundColor: "rgba(1, 13, 19, 0.5)",
borderWidth: 1,
axisPointer: {
type: 'shadow',
// label: {
// show: true,
// },
},
formatter: function (params) {
var str = "";
if (params.length > 0) {
str = params[0].name + "<br/>"
}
for (var i = 0; i < params.length; i++) {
if (params[i].seriesName !== "") {
str +=
params[i].seriesName +
':' +
params[i].value +
"家<br/>";
}
}
return str;
},
textStyle: {
color: "rgba(212, 232, 254, 1)",
// fontSize: fontChart(0.24),
},
extraCssText: "z-index:2"
},
legend: [{
x: "85%",
y: 'center',
orient:'vertical',
data:['汽车产业','互联网产业','信息技术产业','新能源产业','生物制药产业'],
itemWidth: 15,
itemHeight: 10,
itemGap: 15,
borderRadius: 4,
textStyle: {
color: "#000",
fontFamily: "Alibaba PuHuiTi",
fontSize: 14,
fontWeight: 400,
},
},{
type: 'scroll', //分页类型
icon: "circle",
selectedMode: 'single',
left: "center",
bottom: 30,
itemWidth: 15,
itemHeight: 10,
itemGap: 30,
borderRadius: 4,
data:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19'],
textStyle: {
color: "#000",
fontFamily: "Alibaba PuHuiTi",
fontSize: 14,
fontWeight: 400,
},
}],
xAxis: {
type: 'category',
data: ['2018', '2019', '2020', '2021', '2022'],
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#393939', //X轴文字颜色
},
},
},
yAxis: [
{
type: 'value',
name: '主导产业变迁',
nameTextStyle: {
color: "#000",
fontFamily: "Alibaba PuHuiTi",
fontSize: 14,
fontWeight: 600,
// padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
},
nameGap: 30, // 表现为上下位置
axisLine: {
show: true,
lineStyle: {
color: '#eeeeee',
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#393939',
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
color: '#eeeeee',
}
},
},
],
series: [
{
name: '汽车产业',
type: 'line',
// showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: 'white',
borderWidth: '2',
borderColor: '#5470c6',
},
lineStyle: {
color: '#5470c6',
},
data: [175, 160, 153, 121, 156],
},
{
name: '互联网产业',
type: 'line',
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: 'white',
borderWidth: '2',
borderColor: '#91cc75',
},
lineStyle: {
color: '#91cc75',
},
data: [212, 140, 132, 55, 40],
},
{
name: '信息技术产业',
type: 'line',
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: 'white',
borderWidth: '2',
borderColor: '#f3454b',
},
lineStyle: {
color: '#f3454b',
},
data: [122, 213, 128, 146, 106],
},
{
name: '新能源产业',
type: 'line',
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: 'white',
borderWidth: '2',
borderColor: '#fac858',
},
lineStyle: {
color: '#fac858',
},
data: [140, 113, 108, 92, 43],
},
{
name: '生物制药产业',
type: 'line',
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: 'white',
borderWidth: '2',
borderColor: '#fac858',
},
lineStyle: {
color: '#fac858',
},
data: [110, 103, 138, 62, 143],
},
{
name: '1',
type: 'line',
show:false
},
{
name: '2',
type: 'line',
show:false
},
{
name: '3',
type: 'line',
show:false
},
{
name: '4',
type: 'line',
show:false
},
{
name: '5',
type: 'line',
show:false
},
{
name: '6',
type: 'line',
show:false
},
{
name: '7',
type: 'line',
show:false
},
{
name: '8',
type: 'line',
show:false
},
{
name: '9',
type: 'line',
show:false
},
{
name: '10',
type: 'line',
show:false
},
{
name: '11',
type: 'line',
show:false
},
{
name: '12',
type: 'line',
show:false
},
{
name: '13',
type: 'line',
show:false
},
{
name: '14',
type: 'line',
show:false
},
{
name: '15',
type: 'line',
show:false
},
{
name: '16',
type: 'line',
show:false
},
{
name: '17',
type: 'line',
show:false
},
{
name: '18',
type: 'line',
show:false
},
{
name: '19',
type: 'line',
show:false
},
],
};