2018-2019这段距离需要用虚线展示
配置项如下
var xData = function() {
var data = [];
for (var i = 2011; i < 2020; i++) {
data.push(i);
}
return data;
}();
var data = [13.7, 13.4, 13.5, 16.1,13.4, 13.5, 16.1, 17.4,{
value :15.2,
//自定义标签样式,仅对该数据项有效
label: {},
//自定义特殊 itemStyle,仅对该数据项有效
itemStyle:{
color:'#d9761b',
borderColor: '#fb8c07',
borderWidth: 1,
borderType: 'dotted',
}
},];
var dataline = [13.7, 13.4, 13.5, 16.1,13.4, 13.5, 16.1, 17.4,'null','null'];
// var dataline = [13.7, 13.4, 13.5, 16.1,13.4, 13.5, 16.1,17.4,17.4,16.1,'null'];
var datalinedotted = [13.7, 13.4, 13.5, 16.1,13.4, 13.5, 16.1, 17.4,16.1];
option = {
backgroundColor: "#0c2641",
tooltip: {
trigger: 'axis'
},
legend: {
data:['产值增速','增加值增速'],
textStyle:{
color:'#eeeced',
fontSize:14,
},
top:'5%',
icon: "rect",
itemHeight:8,
itemWidth:8,
itemGap:30,
},
grid: {
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#363e83',
}
},
axisLabel: {
inside: false,
textStyle: {
color: '#bac0c0',
fontWeight: 'normal',
fontSize: '12',
},
// formatter:function(val){
// return val.split("").join("\n")
// },
},
data: xData,
}, {
type: 'category',
// name:'产值增速%',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: xData,
}],
yAxis: [{
type: 'value',
name:'产业增速(%)',
scale: true,
nameTextStyle: {
color: '#e3e3e4',
fontWeight: 'normal',
fontSize: '12',
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#32346c',
}
},
splitLine: {
show: false,
lineStyle: {
color: '#32346c ',
}
},
min:0,
axisLabel: {
textStyle: {
color: '#e3e3e4',
fontWeight: 'normal',
fontSize: '12',
}
}
},
{
type: 'value',
name:'增加值增速(%)',
scale: true,
nameTextStyle: {
color: '#e3e3e4',
fontWeight: 'normal',
fontSize: '12',
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#32346c',
}
},
splitLine: {
show: false,
lineStyle: {
color: '#32346c ',
}
},
axisLabel: {
textStyle: {
color: '#e3e3e4',
fontWeight: 'normal',
fontSize: '12',
}
}
}],
series: [{
name: '产值增速',
type: 'bar',
yAxisIndex: 0,
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#267bcb'
}, {
offset: 1,
color: '#02e3ff'
}]),
borderWidth: 0,
},
emphasis: {
shadowBlur: 15,
shadowColor: 'rgba(105,123, 214, 0.7)'
}
},
zlevel: 2,
barWidth: '40%',
data: data,
},
{
name: '',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 0,
zlevel: 1,
itemStyle: {
normal: {
color: '#103e60',
borderWidth: 0,
shadowBlur: {
shadowColor: 'rgba(255,255,255,0.31)',
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 2,
},
}
},
barWidth: '40%',
data: [30, 30, 30, 30,30, 30, 30, 40,{
value :30,
//自定义标签样式,仅对该数据项有效
label: {},
//自定义特殊 itemStyle,仅对该数据项有效
itemStyle:{
// color:'#d9761b',
borderColor: '#fb8c07',
borderWidth: 1,
borderType: 'dotted',
},
// label: {
// show: true,
// position: 'top',
// formatter: '预测值',
// textStyle:{
// color:'#d9761b',
// fontSize:12
// }
// },
},]},
{
name:'增加值增速',
type:'line',
yAxisIndex: 1,
// xAxisIndex: 1,
zlevel: 3,
symbol: 'none',
smooth: true, //是否平滑曲线显示
// stack: '增加值增速(%)',
data:dataline,
// lineStyle:{
// color:'#ffba27'
// },
itemStyle: {
normal: {
show: true,
color:'#ffba27',
borderWidth: 0,
},
emphasis: {
shadowBlur: 15,
shadowColor: 'rgba(105,123, 214, 0.7)'
}
},
},
{
name:'增加值增速',
type:'line',
yAxisIndex: 1,
// xAxisIndex: 1,
zlevel: 3,
symbol: 'none',
smooth: true, //是否平滑曲线显示
// stack: '增加值增速(%)',
data:datalinedotted,
lineStyle:{
color:'#ffba27',
type:'dotted'
}
}
]
}