web数据可视化(Echarts版)5-7包含鼠标单击事件的参数params的柱状图 (代码仅供参考)

本文链接：https://blog.youkuaiyun.com/m0_63471474/article/details/130823813

echarts.js文件下载地址:Apache ECharts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="echarts.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height: 400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById("main")); 
        var option={
            color:['LimeGreen','DarkGreen','red','blue','Purple'],
            backgroundColor:'rgba(128,128,128,0.1)',
            title:{text:'产能销量产量利润统计',left:70,top:9},
            xAxis:{
                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis:{},
            tooltip:{
                trigger:'item',show:true,
                formatter:"{a} <br/>{b} :{c}"
            },
            legend:{},
            series:[
                {
                    name:'销量',type:'bar',
                    data:[5,28,16,20,15,33]
                },
                {
                    name:'产量',type:'bar',
                    data:[15,38,20,24,20,45]
                },
                {
                    name:'利润',type:'bar',
                    data:[25,15,10,10,15,22]
                }
            ]
        };
        myChart.setOption(option);
        window.addEventListener("resize",function() {
            myChart.resize();
        });

        myChart.on('click',function(params){
            alert("第"+(params.dataIndex +1)+"件产品:" +params.name +"的"+
                 params.seriesName +"为:"+params.value +
                 "\n\n 1--componentType:" + params.componentType +
                 "\n 2--seriesType:" +params.seriesType +
                 "\n 3--seriesIndex:" +params.seriesIndex +
                 "\n 4--seriesName:" +params.seriesName +
                 "\n 5--name:" +params.name +
                 "\n 6--dataIndex:" +params.dataIndex +
                 "\n 7--data:" +params.data +
                 "\n 8--dataType:" +params.dataType +
                 "\n 9--value:" +params.value +
                 "\n 10--color:" +params.color);
        });

    </script>
</body>
</html>