echarts 如何设置提示框边框阴影

2025-10-13 04:05:26

1、(1)绘制一个简单的图表,在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器.

<body> 

    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> 

   <div id="main" style="width: 600px;height:400px;"></div>

</body>

2、(2)然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。

<!DOCTYPE html>

<html>

<head>  

  <meta charset="utf-8"> 

    <title>ECharts</title>  

  <!-- 引入 echarts.js -->   

 <script src="echarts.min.js"></script>

</head>

<body>  

  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->  

  <div id="main" style="width: 600px;height:400px;"></div> 

   <script type="text/javascript">     

   // 基于准备好的dom,初始化echarts实例     

   var myChart = echarts.init(document.getElementById('main'));  

      // 指定图表的配置项和数据    

    var option = {          

  title: {             

   text: 'ECharts 入门示例'    

        },   

         tooltip: {},   

         legend: {          

      data:['销量']            },     

       xAxis: {         

       data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]     

       },         

   yAxis: {},         

   series: [{         

           name: '销量',     

           type: 'bar',  

            data: [5, 20, 36, 10, 10, 20]  

          }]   

     };    

    // 使用刚指定的配置项和数据显示图表。  

      myChart.setOption(option);   

 </script>

</body>

</html>

3、(3)这样你的图表就诞生了!如下图所示:(提示框没有阴影效果,添加提示框阴影效果,查看后续步骤)

echarts 如何设置提示框边框阴影

4、在第二步的代码中设置对象的属性来改变提示框的阴影效果,具体操作如下:

修改代码:如下图标注所示:效果可在下一步中查看(本案例仅做测试用),可根据自己的需求进行更改。

echarts 如何设置提示框边框阴影

5、效果展示如下图所示:

echarts 如何设置提示框边框阴影

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢