柱状图下钻，例如柱状图中都是省级信息，当点击其中一个进入到显示当前省级的所以市级信息，右键返回上一级

本文链接：https://blog.csdn.net/qq_41339975/article/details/98179553

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="./js/echarts.js"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
       function fileData(echarts,optiondata){
            echarts.setOption({
                xAxis: {
                    data: optiondata.xData
                },
                yAxis: {},
                series: [{
                    name: optiondata.name,
                    type: 'bar',
                    data: optiondata.data,

itemStyle: {

color: { //柱状图颜色渐变
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [{
               offset: 0, color: 'red' // 0% 处的颜色
               }, {
               offset: 1, color: 'blue' // 100% 处的颜色
               }],
               globalCoord: false, // 缺省为 false
               },
},

                }]
            })
       }
       fileData(myChart,{
            xData: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
            name: '销售量',
            data: [5, 20, 36, 10, 10, 20]
       })

        myChart.on('click',(params) => {
            fileData(myChart,{
                xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                name: '可有可无看你需要',
                data: [120, 200, 150, 80, 70, 110, 130]
            })
            console.log(params)
        })
       //阻止鼠标默认的右击事件
       document.getElementById("main").oncontextmenu = function(e){
   e.preventDefault();
   };
   //鼠标右击返回到上一级
   document.getElementById("main").οnmοuseup=function(oEvent) {
if (!oEvent) oEvent=window.event;
if (oEvent.button==2) {
fileData(myChart, {
   xData: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
   data: [5, 20, 36, 10, 10, 20]
   })
}
}
    </script>
</body>
</html>