echarts柱状图
![在这里插入图片描述](https://img-blog.csdnimg.cn/037465e0744b48b5951b314313b1bad7.png)
var chartDom = document.getElementById('meiti');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['抖音', '微信', '安防交易网', '今日头条', '快手', '西瓜视频', '搜狐新闻', '小红书', '百度百家', '百度贴吧'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval:0,
textStyle: {
fontSize: 14,
color: '#abc7ff'
},
formatter: function (value) {
if (value.length >= 4) {
return value.substring(0,2) + '\n' + value.substring(2)
} else {
return value
}
}
},
}, ],
yAxis: [{
type: 'value',
name: '单位:量',
nameLocation: 'end',
offset:'-10',
nameTextStyle: {
color: '#abc7ff',
fontSize: 14,
},
splitLine: {
lineStyle: {
color: '#293e60'
}
},
axisLabel: {
textStyle: {
fontSize: 14,
color: '#abc7ff'
}
},
axisLine: {
show: false
}
}],
series: [{
name: 'Direct',
type: 'bar',
barWidth: '30%',
data: [10, 52, 200, 334, 390, 330, 220,390,390,390],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#004552'
}, {
offset: 0.8,
color: '#002859'
}], false),
borderColor:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00ebb1'
}, {
offset: 0.8,
color: '#001330'
}], false)
},
},
label: {
normal: {
show: true,
fontSize: 14,
color: '#abc7ff',
position: 'top',
}
},
}]
};
window.onresize = myChart.resize;
option && myChart.setOption(option);