echarts 计算柱形图总和以及单个占比

最新推荐文章于 2025-01-21 10:52:03 发布

Star航仔

最新推荐文章于 2025-01-21 10:52:03 发布

阅读量5.9k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41662207/article/details/106762041

版权

<script>
var option = {
    xAxis: {
        data: ["易制毒订单","易制爆订单","剧毒订单","麻醉药品订单","精神药品订单","其它"]  
    },
    yAxis: {
        splitLine:{ show:false}  //改设置不显示坐标区域内的y轴分割线
    },
    tooltip : {
        trigger: 'item',
        formatter: function(params){
         	var series = option["series"];
//       	console.log(option["series"])
//       	console.log(series[0].data)
         	var arr=series[0].data;
			var sum =0 
			for(var i=0;i<arr.length;i++){
			    sum=sum+arr[i];
			}
//			console.log(sum)
			//计算数组总和以及数组中单个数据的占比提取小数点后两位
        	return params.name + '<br />' + '订单总金额:¥'+sum+'<br />占比:'+(params.value/sum*100).toFixed(2) + '%';
        } 
	},
    series: [{
        name: '手机品牌',
        type: 'bar',
        data: [100, 90, 70, 32 , 15, 5],
        //设置柱子的宽度
        barWidth : 50,
        //配置样式
        itemStyle: {   
            //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params){
                    var colorList = ['#3B9FFB','#5ECBCB','#65CB74','#FBD440','#ED5479','#9656E5','#752FCB'];
                    return colorList[params.dataIndex];
                },
                label: {
                    show: false,
                    position: 'top',
                    formatter: '{b}\n{c}%'　　　　//这是关键，在需要的地方加上就行了
                }
            },
            //鼠标悬停时：
            emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }],
　　　　　//控制边距　
    grid: {
            left: '0%',
            right:'10%',
            containLabel: true,
    }
};  
var myChart = echarts.init(document.getElementById('echartDemo'));
myChart.setOption(option);
</script>