實(shí)現(xiàn)如下圖所示的柱形圖：
image.png
- 網(wǎng)站：http://chart.majh.top/
- 示例網(wǎng)址：http://chart.majh.top/xdrkELTGnr
- 示例代碼：
var labelData = ['黨小組刁赦、村（居）民組會(huì)議', '糧油副食群眾通過(guò)電話(huà)或口頭等方式', '群眾通過(guò)微信拗慨、QQ等方式退出', '黨員議事日', '意見(jiàn)箱', '包組干部收集到群眾的需求', '落實(shí)上級(jí)黨委政府工作安排', '其它'];
var valueData = [52, 32, 12, 53, 65,36,69,29];
var option = {
backgroundColor: '#013B6F',
xAxis: {
show: false,
},
tooltip: {
show: true,
},
yAxis: [
{
splitLine: 'none',
axisLine: 'none',
axisLabel: {
verticalAlign: 'top',
align: 'left',
padding: [20, 0, 0, 10],//文字與柱狀圖的距離
textStyle: {
color: '#FFFFFF',
fontSize: '16',
},
},
data: labelData,
},
{
axisLine: 'none',
data: valueData,
axisLabel: {
show: true,
verticalAlign: 'bottom',
align: 'right',
padding: [30, 10, -40, 0],//數(shù)據(jù)與圖形的距離
textStyle: {
color: '#fff',
fontSize: '16',
}
},
},
],
series: [
{
type: 'bar',
showBackground: true,
data: valueData,
barWidth: 18,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: 'rgba(41, 204, 255, 1)',
},
{
offset: 1,
color: 'rgba(10, 116, 255, 1)',
},
]),
},
},
},
],
};
