uniapp,app端使用echarts不兼容，可以使用iframe来使用echarts

07-11 1491阅读

可以新建文件夹 echarts，里面放echart.min.js文件,echarts.html文件生成echarts图，之所以用iframe不用webview，是因为webview容易出问题，最明显问题是层级问题。



  
  
  
  
  
  K线图


    


  window.onload = function () {
				 // 解析URL参数
				const urlParams = new URLSearchParams(window.location.search);
      	const param1 = urlParams.get('param1');
				const data = JSON.parse(param1)
				console.log('K线图数据',data)
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('chart'), 'dark');
  let dates=[],min,max
  min = data[0].low
  max = data[data.length-1].high
  console.log('min',min,',max',max)
  function genData (){
      // let basePrice = 5000
      let dataList = []
      for (let i = 0; i 
                    收盘: ${params[0].data[2]}

                    最高: ${params[0].data[3]}

                    最低: ${params[0].data[4]}

                    时间: ${params[0].axisValue}
            `;
            return result;
          // return datas[0].name + '
' + datas[0].data[1] ; // 由于可能有多个series，因 此  params[0].name和.data表示第一个series的该坐标点 xAxis值和yAxis值 
        } 
        },
      xAxis: {
        type: 'category',
        data: dates,
        axisLabel: { //文字
          color:'#888',
          formatter: function (value) {
            return echarts.format.formatTime('MM-dd', value);
          }
        },
        axisLine: {  // 线
          lineStyle: { color: '#888888' },
        },  
      },
      yAxis: { //文字
        min:min,
        // max:max+0.1,
        axisLabel: {
          color:'#888',
            formatter: function (value) {
              return value.toFixed(4);
            }
          },
      },
      grid: {
        top: 10,
        left:60,
        // right:0,
        bottom:30,
      },
      series: [
        {
          type: 'candlestick',
          data: chartData,
          itemStyle: {
            color: '#3EC36CFF',
            color0: '#3EC36CFF',
            borderColor: '#3EC36CFF',
            borderColor0: '#3EC36CFF'
          }
        }
      ],
      dataZoom: [
        { type:"inside"} //详细配置可见echarts官网 
      //   { // 这个dataZoom组件，默认控制x轴。
      //   type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      //   start: 0,      // 左边在 0% 的位置。
      //   end: 100       // 右边在 100% 的位置。
      //  }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart.resize()
  }

调用，注意：inviteUrl是echarts.html服务器路径，this.postMess是需要传递的数据

// js调用地址跟数据传递
this.webViewSrc = inviteUrl+'/echarts/klinecharts.html?param1='+this.postMess

附上echarts.min.js

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).echarts={})}(this,(function(t){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.
    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.
    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */var e=function(t,n){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},e(t,n)};function n(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function i(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(i.prototype=n.prototype,new i)}var i=function(){this.firefox=!1,this.ie=!1,this.edge=!1,this.newEdge=!1,this.weChat=!1},r=new function(){this.browser=new i,this.node=!1,this.wxa=!1,this.worker=!1,this.svgSupported=!1,this.touchEventsSupported=!1,this.pointerEventsSupported=!1,this.domSupported=!1,this.transformSupported=!1,this.transform3dSupported=!1,this.hasGlobalWindow="undefined"!=typeof window};"object"==typeof wx&&"function"==typeof wx.getSystemInfoSync?(r.wxa=!0,r.touchEventsSupported=!0):"undefined"==typeof document&&"undefined"!=typeof self?r.worker=!0:"undefined"==typeof navigator||0===navigator.userAgent.indexOf("Node.js")?(r.node=!0,r.svgSupported=!0):function(t,e){var n=e.browser,i=t.match(/Firefox\/([\d.]+)/),r=t.match(/MSIE\s([\d.]+)/)||t.match(/Trident\/.+?rv:(([\d.]+))/),o=t.match(/Edge?\/([\d.]+)/),a=/micromessenger/i.test(t);i&&(n.firefox=!0,n.version=i[1]);r&&(n.ie=!0,n.version=r[1]);o&&(n.edge=!0,n.version=o[1],n.newEdge=+o[1].split(".")[0]>18);a&&(n.weChat=!0);e.svgSupported="undefined"!=typeof SVGRect,e.touchEventsSupported="ontouchstart"in window&&!n.ie&&!n.edge,e.pointerEventsSupported="onpointerdown"in window&&(n.edge||n.ie&&+n.version>=11),e.domSupported="undefined"!=typeof document;var s=document.documentElement.style;e.transform3dSupported=(n.ie&&"transition"in s||n.edge||"WebKitCSSMatrix"in window&&"m11"in new WebKitCSSMatrix||"MozPerspective"in s)&&!("OTransition"in s),e.transformSupported=e.transform3dSupported||n.ie&&+n.version>=9}(navigator.userAgent,r);var o="sans-serif",a="12px "+o;var s,l,u=function(t){var e={};if("undefined"==typeof JSON)return e;for(var n=0;n=0)o=r*t.length;else for(var c=0;c1)%2;a.style.cssText=["position: absolute","visibility: hidden","padding: 0","margin: 0","border-width: 0","user-select: none","width:0","height:0",i[s]+":0",r[l]+":0",i[1-s]+":auto",r[1-l]+":auto",""].join("!important;"),t.appendChild(a),n.push(a)}return n}(e,a),l=function(t,e,n){for(var i=n?"invTrans":"trans",r=e[i],o=e.srcCoords,a=[],s=[],l=!0,u=0;u

VPS购买请点击我