var myData = ['大栅栏', '天安门', '故宫', '景山', '北海公园'];
var databeast = [38, 59, 62, 24, 32];
option = {
backgroundColor: '#000',
tooltip: {
trigger: 'axis',
formatter: '{b0}: {c0}㎡'
},
xAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
margin: 8,
textStyle: {
color:'rgba(255,255,255,0.5)',
fontSize: 12,
},
},
data: myData,
},
yAxis: {
type: 'value',
name:'水位(㎡)',
axisLine: {
show: false,
},
//y轴分割线
axisTick: {
show: false,
},
position: 'center',
//y轴标签
axisLabel: {
show: true,
color:'rgba(255,255,255,0.5)'
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.5)',
width: 1,
type: 'dashed',
},
},
},
series: [
// 真实数据
{
type: 'pictorialBar',
symbol: 'rect',
barWidth: '20px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#003190',
},
{
offset: 1,
color: '#26E1FF',
},
]),
}
},
data: databeast
},
{
//辅助方格图形
name: "辅助值",
type: 'pictorialBar',
barWidth: '20px',
symbol: 'rect',
symbolRepeat: 'true',
symbolMargin: '70%',
symbolSize: ['100%', '30%'],
symbolOffset: ['0%', '0%'],
symbolRepeat: true,
itemStyle: {
normal: {
color: '#000'
},
},
data : databeast,
z: 2
},
]
};