web数据可视化(Echarts版)3-8详情提示框组件(代码仅供参考)

【代码】web数据可视化(Echarts版)3-8详情提示框组件(代码仅供参考)

m0_63471474

1155人浏览 · 2023-05-18 22:33:11

m0_63471474 · 2023-05-18 22:33:11 发布

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.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={
           tooltip:{  //配置提示框组件
               trigger:'axis',
               axisPointer:
               {
                   type:'shadow',
                   linieStyle:{
                       color:'#48b',width:2,type:'solid'
                   },
                   crossStyle:{
                       color:'#1e90ff',width:1,type:'solid'
                   },
                   shadowStyle:{
                       color:'rgba(150,150,1510,0.2)',width:'auto',type:'default'
                   }
               },
               showDelay:0,hideDelay:0,transitionDuration:0,
               backgroundColor:'rgba(0,222,0,0.5)',
               borderColor:'#f50',borderRadius:8,borderWidth:2,
               padding:10,
               position:function(p) {
                   //位置回调
                   //console.log && console.log(p)
                   return [p[0]+10,p[1]-10];
               },
               textStyle:{
                   color:'blue',decoration:'none',fontFamily:'sans-serif',
                   fontSize:15,fontStyle:'normal',fontWeight:'bold'
               },
               formatter:function(params,ticket,callback) {
                   console.log(params)
                   var res = '详情提示框:<br/>' +params[0].name;
                   for (var i = 0,l=params.length;i<l;i++) {
                       res +='<b/r>' +params[i].seriesName+' ：'+params[i].value;
                   }
                   setTimeout(function() {
                    //仅为了模拟异步回调
                       callback(ticket,res);
                   },500)
                   return'loading';
               }
           },
           toolbox:{  //配置工具箱组件
               show:true,
               feature:{
                   mark:{show:true},dataView:{show:true,readOnly:false},
                   magicType:{show:true,type:['line','bar','stack','tiled']},
                   restore:{show:true},saveAsImage:{show:true}
               }
           },
           calculable:true,
           xAxis:{  //配置x轴坐标系
               data:['周一','周二','周三','周四','周五','周六','周日']
           },
           yAxis:{   //配置y轴坐标系
               type:'value'
           },
           series:[   //配置数据系列
               {  //设置数据系列1
                   name:'坐标轴触发1',type:'bar',
                   data:[
                       {value:320,extra:'Hello~'},
                       332,301,334,390,330,320
                   ]
               },
               {   //设置数据系列2
                name:'坐标轴触发2',type:'bar',
                data:[862,1018,964,1026,1679,1600,157]
               },
               {   //设置数据系列3
                   name:'数据项触发1',type:'bar',
                   tooltip:{
                       trigger:'item',backgroundColor:'black',position:[0,0],
                       formatter:"Series formatter: <br/>{a}<br/>{b}:{c}"
                   },
                   stack:'数据项',
                   data:[120,132,
                   {
                       value:301,itemStyle:{normal:{color:'red'}},
                       tooltip:{
                           backgroundColor:'blue',
                           formatter:"Data formatter:<br/>{a}<br/>{b}:{c}"
                       }
                   },
                   134,90,
                   {value:230,tooltip:{show:false}},
                   210
                ]
                },
                {   //设置数据系列4
                    name:'数据项触发2',type:'bar',
                    tooltip:{
                        show:false,trigger:'item'
                    },
                    stack:'数据项',data:[150,232,201,154,190,330,410]
                }
            ]
       };
       myChart.setOption(option);
       </script>
</body>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。