Echarts之横向柱状图（完成进度）效果图
代码
<script src="../js/echarts-4.1.0/echarts.js"></script>
<script src="../js/theme/customed.js"></script>
<script type="text/javascript">
var legendData = ['xx事件总计划','xx事件已完成','xx事件1总计划','xx事件2已完成'];
var yAxisData = ['分类1','分类2','分类3','分类4','分类5','分类6','分类7'];
var llData = [5520,11730,7044,5547,5126,7710,7872];
var llwwcData = [1380,2070,2739,2732,2197,1579,2351];
var jsData = [1680,2640,4393,5205,4673,3905,2784];
var jswwcData = [720,1760,1239,918,957,1518,1499];
//总计
var allllData = function() {
var datas = [];
for (var i = 0; i < llData.length; i++) {
datas.push(llData[i] + llwwcData[i]);
}
return datas;
}();
//总计
var alljsData = function() {
var datas = [];
for (var i = 0; i < jsData.length; i++) {
datas.push(jsData[i] + jswwcData[i]);
}
return datas;
}();
var option = {
// legend: {
//    icon: "circle",
//    itemWidth: 10,  // 设置宽度
//    itemHeight: 10, // 设置⾼度
//    itemGap: 2, // 设置间距
//    textStyle:{
/
/        fontSize:10,
//    },
//    x: 'right',
//    top:'-1',
//    data: legendData
// },
grid: {
top:'5%',
left: '1%',
right: '4%',
bottom: '3%',
containLabel: true
},
tooltip: {
show:"true",
trigger: 'axis',
axisPointer: { // 坐标轴指⽰器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'            }
},
xAxis:  {
border radius什么意思type: 'value',
axisTick : {show: false},
axisLine: {
show: false,
// lineStyle:{
//    color:'#fff',
// }
},
splitLine: {
show: false
},
},
yAxis: [
{
type: 'category',
axisLabel: {
interval: 0,
rotate: 30
},
axisTick : {show: false},
axisLine: {
show: true,
// lineStyle:{
//    color:'#fff',
/
/ }
},
data: yAxisData
},
{
type: 'category',
axisLine: {show:false},
axisLabel: {show:false},                splitArea: {show:false},
splitLine: {show:false},
data: yAxisData
},
]
,
series: [
{
name: legendData[0],
type: 'bar',
yAxisIndex:1,
itemStyle:{
normal: {
show: true,
color: '#277ace',
barBorderRadius:50,                        borderWidth:0,
borderColor:'#333',                    }
},
barGap:'0%',
barCategoryGap:'50%',                data: allllData
},
{
name: legendData[1],
type: 'bar',
itemStyle:{
normal: {
show: true,
color: '#5de3e1',
barBorderRadius:50,                        borderWidth:0,
borderColor:'#333',                    }
},
barGap:'0%',
barCategoryGap:'50%',                data: llData
},{
name: legendData[2],
type: 'bar',
yAxisIndex:1,
itemStyle:{
normal: {
show: true,
color: '#ce58c4',
barBorderRadius:50,                        borderWidth:0,
borderColor:'#333',                    }
},
barGap:'0%',
barCategoryGap:'50%',                data: alljsData
},
{
name: legendData[3],
type: 'bar',
itemStyle:{
normal: {
show: true,
color: '#d89de3',
borderWidth:0,
borderColor:'#333',
}
},
barGap:'0%',
barCategoryGap:'50%',
data: jsData
}
]
};
</script>
⼯作中使⽤到的，总结归纳后，仅供各位⼤神们参考......

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。