<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<title>Echarts绘制横向柱状图(圆角+渐变)</title>
<script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.min.js"></script>
</head>
<body>
<div id="drawTop10" style="width: 900px;height:400px;"></div>
<script type="text/javascript">
var MyChartsTop10;
function drawTop10(dic){
var myChart = echarts.init(document.getElementById('drawTop10'));
//初始化数据
// var category = ['小王', '小李', '小赵', '小马', '小刘', '小张', '小齐'];
// var barData = [3100, 3100, 3100, 3100, 3100, 3100, 3100];
// var barData1 = [2300, 2012, 800, 400, 260, 146, 106];
var option = {
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
// },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
show: false,
// axisLine: {
// show: false
// },
// axisTick: {
// show: false
// }
},
yAxis: {
type: 'category',
data: ['1 张三三','2 李四四','3 李四四','4 李四四','5 李四四','6 李四四','7 李四四','8 李四四','9 李四四','10 李四四'],
axisLine: { show: false},
axisTick: {show: false},
inverse:true,
axisLabel: {
textStyle: {
color:"#000000",
// align:"top",
// baseline:"center",
}
},
// splitLine: {show: false},
// axisLine: {
// show: false
// },
// axisTick: {
// show: false
// },
// offset: 10,
// nameTextStyle: {
// fontSize: 15
// }
},
series: [
{
name: '数量',
type: 'bar',
data: [3100, 3100, 3100, 3100, 3100, 3100, 3100, 3100, 3100, 3100],
barWidth: 14,
// barWidth:10,
barGap: 10,
smooth: true,
// barGap: '-100%',
label: {
normal: {
show: false,
position: 'right',
// offset: [5, -2],
textStyle: {
color: '#F68300',
fontSize: 13
}
}
},
itemStyle: {
emphasis: {
barBorderRadius: 7
},
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#2d3d69'},
{offset: 1, color: '#2b3c67'}
]
)
},
}
},
{
name: '数量',
type: 'bar',
// data: [2300, 2012, 800, 400, 260, 146, 106,800,600,380],
data:[],
// barWidth:10,
barWidth:14,
barGap: 10,
smooth: true,
barGap: '-100%',
// label: {
// normal: {
// show: true,
// position: 'right',
// // offset: [5, -2],
// textStyle: {
// color: '#F68300',
// fontSize: 13
// }
// }
// },
itemStyle: {
emphasis: {
barBorderRadius: 7
},
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#0a6253'},
{offset: 1, color: '#34b9a4'}
]
),
label : {
show: true,
position: 'right',
// position: ['50%','50%'],
// offset: [2, -2],
formatter: function (params) {
// console.log(params)//这里输出params所有参数 需要什么下面自己拼
// return params.name + params.data;
return "￥" + params.data;
},
textStyle: {
color: '#ffffff'
}
},
},
}
}
]
};
// myChart.setOption(option);
// };
//排序
var sdic=Object.keys(dic).sort(function(a,b){return dic[b]-dic[a]}); //排序后key的数组
var i=1;
for(ki in sdic){
//console.log(sdic[ki]+":"+dic[sdic[ki]]+",");
// option.yAxis.data.push((i++)+' '+sdic[ki]); //名字
option.series[1].data.push(dic[sdic[ki]]); //值
}
//排序结束
if (option && typeof option === "object") {
MyChartsTop10 = myChart.setOption(option, true);
}
}
var dick={'李四1':100,'李四2':200,'李四3':300,'李四4':400,'李四5':500,'李四6':600,'李四7':650,'李四8':680,'李四9':760,'张三1':860};
drawTop10(dick);
setInterval(function (){
var dic2={'李四1':100,'李四2':200,'李四3':300,'李四4':400,'李四5':500,'李四6':600,'李四7':650,'李四8':680,'李四9':760,'张三1':860};
for (var key in dic2) {
// alert(dic2[key]);
var a=Math.round(Math.random() * 1000);
if(a>900)a-=100;
dic2[key]=a;
}
drawTop10(dic2);
MyChartsTop10;
}, 10000);
</script>
</body>
</html>
