首先来说一下echarts
包含的内容:
- 1)图像渐变
- 2)渐变方向
- 3)数量顶点显示
- 4)Y轴颜色设置
- 5)隐藏X、Y轴网格线
- 6)显示鼠标悬浮状态
- 7)字体大小
看图说话
![img1](https://img-blog.csdnimg.cn/20210203181141942.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDk0Njgy,size_16,color_FFFFFF,t_70)
来给兄弟们上代码
var dataList = [10, 52, 200, 334, 390, 330, 220]
var chartFnc = {
init: function() {
this.chartGraphFnc();
},
chartGraphFnc: function () {
var myChart = echarts.init(document.getElementById('main1'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
width:"auto",
containLabel: true
},
xAxis: [
{
"show" : false,
type: 'value',
"splitLine": {
"show": false
}
}
],
yAxis: [
{
boundaryGap: true,
type: 'category',
data : ['话务员A','话务员B','话务员C','话务员D','话务员E','话务员A','话务员E'],
axisTick: {
show:false
},
axisLabel:{
color: '#BEC2CE',
},
"axisLine":{
"show":false
},
}
],
series: [
{
name: '呼叫数量',
type: 'bar',
barWidth : 12,
itemStyle:{
emphasis: {
barBorderRadius: 30,
},
normal: {
barBorderRadius:[20],
label: {
show: true,
position: 'right',
textStyle: {
fontSize : '12',
}
},
color: new echarts.graphic.LinearGradient(
1, 0, 0, 0,
[
{offset: 0, color: '#3366FF'},
{offset: 1, color: '#1C96FF'}
]
)
}
},
data: dataList
}
]
};
myChart.setOption(option);
}
}
chartFnc.init();
看完的兄弟们留个脚印在走呗!