请选择 进入手机版 | 继续访问电脑版
分享
查看: 794|回复: 0

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

[复制链接]

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

发表于 2022-12-23 14:25:56 来自 分享 阅读模式 倒序浏览
zzv_icon794 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.     });

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

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

  216.                 }
  217.             },
  218.             data: [2.4, 1.9, 3.9, 2.0, 1.0, 3.0, 2.5, 2.8, 2.0, 3.0, 2.8]
  219.         }]
  220.     };
  221.     myChart.setOption(option)
  222. }
复制代码
以上是一个简单的dom元素中插入了echarts图表的示例,可供参考
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t