ThingStudio森工厂开发者社区

发帖
分享
查看: 1779|回复: 0

[分享] dom元素结合图表的面板如何写

[复制链接]

dom元素结合图表的面板如何写

发表于 2022-12-23 14:25:56 来自 分享 阅读模式 倒序浏览
zzv_icon1779 zzr_icon0 查看全部
  1. function test(obj, marker) {
  2.     const markDown = document.createElement('div');
  3.     markDown.id = marker + '31';
  4.     markDown.innerHTML =
  5.         `
  6.         <div style="z-index: 1200;margin-left: 9px;margin-top:54px;" >
  7.                 <div class="sign" id="` + marker + `2" style="display: absolute;">
  8.                     <div style="display: absolute;height: 20px;background: rgb(0,0,0);opacity: .9;text-align: center;cursor: pointer;border-top: 3px solid #ff924a;">
  9.                         <span style="margin:0px 1px 0px 1px;height: 20px;font-size: 13px;font-family: Consolas Bold,PingFangSC-Regular,PingFang SC,sans-serif;font-weight: 700;opacity:.9;color: #fff;line-height: 20px;padding: 0 5px;">XXX1号农场</span>
  10.                     </div>
  11.                 </div>
  12.         </div>
  13.         <div style="position:absolute;z-index: 9999;margin-left:-310px;margin-right:80px;margin-top:-100px;font-family: Consolas Bold,PingFangSC-Regular,PingFang SC,sans-serif;">
  14.             <div class="sign" id="` + marker + `" style="display: absolute;font-size: 12px; text-align: left; background-image: linear-gradient(90deg, rgba(0,8,74,0.9),  rgba(0,8,74,0.7));
  15.                 border-radius: 8px; color: rgb(238, 238, 238); z-index: 9999; border: 1px solid #45f1ff;display: block; visibility: visible;">
  16.                 <div  style="margin: 5px 0px 5px 0px;line-height: 30px;overflow: hidden;">
  17.                     <div style="margin:0 auto; ">
  18.                         <div style="display:inline-block;position:absolute;">
  19.                             <span  id = 'sp' style="margin: 0px 10px -15px 20px;font-size:18px;display:block;">`+ obj.userData.省市 + `</span>
  20.                             <span  id = 'sp' style="margin: 5px 10px 10px 20px;line-height:40px">`+ obj.userData.详细地址 + `</span>
  21.                         </div>
  22.                         <div style="display:inline-block;">
  23.                             <span  id = 'sp' style="margin: 0px 20px 10px 180px;display:inline-block;bottom:7px;line-height:42px;font-size:13px;">主营：鸡蛋，半成品</span>
  24.                         </div>
  25.                     </div>
  26.                     <hr style="width: 92%;margin-bottom:5px;" color="#0078a9" >
  27.                     <div>
  28.                         <div style="display:inline-block;position:absolute;">
  29.                             <span  id = 'sp' style="margin: 25px 10px 0px 20px;bottom: 10px;font-size: 18px;">累计采购量</span>
  30.                         </div>
  31.                         <div style="display:inline-block;">
  32.                             <span  id = 'sp' style="margin: 5px 0px 0px 250px;font-size:24px;">36</span>
  33.                         </div>
  34.                         <div style="display:inline-block;">
  35.                             <span  id = 'sp' style="margin: 0px 10px 0px 0px;font-size: 13px;color:#00c0f2">单</span>
  36.                         </div>
  37.                         <div>
  38.                             <div style="">
  39.                                 <div style="margin: 0px 20px 20px 20px;border: 1px solid rgba(0,36,96,0.9);border-radius: 5px;">
  40.                                     <div id="` + marker + `99" style="height: 100px;"></div>
  41.                                 </div>
  42.                             </div>
  43.                         </div>
  44.                     </div>
  45.                     <div  style="display: absolute;border-width: 10px;bottom: 71.5%;border-color: transparent;border-left-color: #45f1ff;opacity:.8;border-style: solid; position: absolute;display: block;
  46.                         width: 0;height: 0;left: 103%;transform: translate(-50%,0);background: transparent; ">
  47.                     </div>
  48.                     <div  style="display: absolute;border-width: 10px;bottom: 71.5%;border-color: transparent;border-left-color: rgba(0,8,74,0.7);border-style: solid; position: absolute;display: block;
  49.                         width: 0;height: 0;left: 102%;transform: translate(-50%,0);background: transparent; ">
  50.                     </div>
  51.                     <div></div>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.     `
  56.     $('div2d').append(markDown)
  57.     var uiAnchor1 = app.create({
  58.         type: 'Marker',
  59.         alwaysOnTop: true,
  60.         keepSize: true,
  61.         size: 0.95,
  62.         inheritScale: false,
  63.         parent: obj,
  64.         element: markDown,
  65.         localPosition: [0, 0, 0],
  66.         complete: function () {
  67.             setTimeout(function () {
  68.                 createEcharts(marker)
  69.                 $('#' + marker + '31').css('pointer-events', 'none')
  70.             }, 100)
  71.         }
  72.     });

  74. }
  75. /**
  76. * 创建供应商弹窗中的Echarts图表，并添加到弹窗中
  77. */
  78. function createEcharts(marker) {
  79.     let mm = marker + '99'
  80.     var myChart = window.echarts.init(document.getElementById(mm));
  81.     // 绘制图表
  82.     var option = {
  83.         tooltip: {
  84.             trigger: 'axis',
  85.             axisPointer: {
  86.                 lineStyle: {
  87.                     color: '#57617B'
  88.                 }
  89.             }
  90.         },
  91.         legend: {
  92.             show: false
  93.         },
  94.         grid: {
  95.             left: '0%',
  96.             right: '0%',
  97.             bottom: '0%',
  98.             top: '0%',
  99.             containLabel: true
  100.         },
  101.         xAxis: [{
  102.             type: 'category',
  103.             boundaryGap: false,
  104.             axisLine: {
  105.                 lineStyle: {
  106.                     color: '#354564'
  107.                 }
  108.             },
  109.             axisTick: {
  110.                 show: false
  111.             },
  112.             axisLabel: {
  113.                 margin: 10,
  114.                 textStyle: {
  115.                     fontSize: 12,
  116.                     color: "#9aa2b2",
  117.                     padding: [-5, 0, 0, 0]
  118.                 }
  119.             },
  120.             splitLine: {
  121.                 lineStyle: {
  122.                     color: '#354564'
  123.                 }
  124.             },
  125.             data: ['', '12', '13', '14', '15', '16', '17', '18', '']
  126.         }],
  127.         yAxis: [{
  128.             type: 'value',
  129.             min: 0,
  130.             max: 15,
  131.             splitNumber: 6,
  132.             axisTick: {
  133.                 show: false
  134.             },
  135.             axisLine: {
  136.                 lineStyle: {
  137.                     color: '#354564'
  138.                 }
  139.             },
  140.             axisLabel: {
  141.                 show: false,
  142.                 margin: 10,
  143.                 textStyle: {
  144.                     fontSize: 14,
  145.                     color: "#9aa2b2"
  146.                 }
  147.             },
  148.             splitLine: {
  149.                 lineStyle: {
  150.                     color: '#354564'
  151.                 }
  152.             }

  154.         }],
  155.         series: [{
  156.             name: '鸡蛋',
  157.             type: 'line',
  158.             smooth: true,
  159.             symbol: 'circle',
  160.             symbolSize: 5,
  161.             showSymbol: false,
  162.             lineStyle: {
  163.                 normal: {
  164.                     width: 3
  165.                 }
  166.             },
  167.             areaStyle: {
  168.                 normal: {
  169.                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  170.                         offset: 0,
  171.                         color: 'rgb(113,92,41, 0.6)'
  172.                     }, {
  173.                         offset: 0.8,
  174.                         color: 'rgba(137, 189, 27, 0)'
  175.                     }], false),
  176.                     shadowColor: 'rgba(0, 0, 0, 0.1)',
  177.                     shadowBlur: 10
  178.                 }
  179.             },
  180.             itemStyle: {
  181.                 normal: {
  182.                     color: '#eeae17',
  183.                     borderColor: 'rgba(137,189,2,0.27)',
  184.                     borderWidth: 12
  185.                 }
  186.             },
  187.             data: [6.4, 7.0, 5.4, 6.0, 6.5, 8.8, 7.0, 8.0, 7.0, 6.0, 7.0]
  188.         }, {
  189.             name: '半成品',
  190.             type: 'line',
  191.             smooth: true,
  192.             symbol: 'circle',
  193.             symbolSize: 5,
  194.             showSymbol: false,
  195.             lineStyle: {
  196.                 normal: {
  197.                     width: 3
  198.                 }
  199.             },
  200.             areaStyle: {
  201.                 normal: {
  202.                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  203.                         offset: 0,
  204.                         color: '#0dacb5'
  205.                     }, {
  206.                         offset: 1,
  207.                         color: 'rgba(0, 136, 212, 0)'
  208.                     }], false),
  209.                     shadowColor: 'rgba(0, 0, 0, 0.1)',
  210.                     shadowBlur: 10
  211.                 }
  212.             },
  213.             itemStyle: {
  214.                 normal: {
  215.                     color: '#05e3ec',
  216.                     borderColor: 'rgba(0,136,212,0.2)',
  217.                     borderWidth: 12

  219.                 }
  220.             },
  221.             data: [2.4, 1.9, 3.9, 2.0, 1.0, 3.0, 2.5, 2.8, 2.0, 3.0, 2.8]
  222.         }]
  223.     };
  224.     myChart.setOption(option)
  225. }
复制代码
以上是一个简单的dom元素中插入了echarts图表的示例，可供参考
元素, 结合, 图表, 面板, 如何

相关帖子
回复

举报

avatar
游客~
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

avatar
张唯威

中级会员

  • 主题

    29

  • 帖子

    37

  • 粉丝

    0

关注 发私信
Ta的新帖
130700ppkpl8x3t7tt1b1t

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4