實例代碼粘貼即用
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Document</title>
</head>
<body>
????<div?id="MeCharts"?style="width:?500px;height:?500px;?background-color:?#000">
????</div>
</body>
<script?src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.min.js"></script>
<script>
????var?MeOption?=?{
????????grid:?{
????????????left:?'3%',
????????????top:?'0',
????????????bottom:?'0',
????????????right:?'5%',
????????????containLabel:?true
????????},
????????xAxis:?{
????????????show:?false
????????},
????????yAxis:?{
????????????axisLine:?{
????????????????show:?false
????????????},
????????????axisLabel:?{
????????????????color:?'#CED1DE',
????????????},
????????????axisTick:?{
????????????????show:?false
????????????},
????????????type:?'category',
????????????data:?['濰城區(qū)',?'奎文區(qū)',?'坊子區(qū)',?'寒亭區(qū)',?'青州市',?'諸城市',?'壽光市',?'安丘市',?'高密市',?'昌邑市',?'臨朐縣',?'昌樂縣'],
????????},
????????//y軸滾動條
????????dataZoom:?[{
????????????type:?'slider',
????????????//隱藏或顯示（true）組件
????????????show:?true,
????????????start:?60,
????????????end:?10,
????????????yAxisIndex:?0,
????????????filterMode:?'empty',
????????????width:?10,
? ? ? ? ? ? //滾動條高度
????????????height:?'80%',
? ? ? ? ? ? //滾動條顯示位置
????????????left:?'95%',
????????????handleSize:?8,
? ? ? ? ? ? zoomLoxk:?true,
????????????top:?'middle',
????????????textStyle:?{
????????????????color:?"#fff",
????????????????fontSize:?10,
????????????},
????????},?],
????????series:?[{
????????????type:?'bar',
????????????itemStyle:?{
????????????????barBorderRadius:?10,
????????????????color:?new?echarts.graphic.LinearGradient(
????????????????????0,?0,?1,?0,?[{
????????????????????????offset:?0,
????????????????????????color:?'#88D4FC'
????????????????????},?{
????????????????????????offset:?1,
????????????????????????color:?'#1DCCC9'
????????????????????}]
????????????????)
????????????},
????????????label:?{
????????????????show:?true,
????????????????position:?'right',
????????????????color:?'#1DCCC9'
????????????},
????????????barWidth:?10,
????????????data:?[578,?245,?321,?160,?282,?177,?198,?578,?245,?321,?160,?282]
????????}]
????};
????var?MeCharts?=?echarts.init(document.getElementById("MeCharts"));
????MeCharts.setOption(MeOption);
</script>
</html>
