微信小程序引用eharts

1、先安装mpvue-echarts，npm install --save mpvue-echarts
2、在components文件夹里面新起一个目录mpvue-echarts，然后在目录node_modules里面把mpvue-echarts里面的src文件夹拉出来放在components的mpvue-echarts里面
3、下载echarts，npm i echarts@5.2.2 -S
4、然后把mpvue-echarts里面的echarts文件夹复制到根目录
5、为了减少echarts的包体积，在ECharts 在线构建按需选择你要的模块然后构建下载，下载完后复制到根目录的echarts文件夹里面，命名为echarts.min.js
6、在页面中引入：

import * as echarts from '@/echarts/echarts.min';
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';

7、页面的html中<mpvue-echarts ref="chart" :echarts="echarts" @onInit="initChart" throttleTouch="true" />
8、

async initChart(e) {let chartData = await this.getChartData();let { xAxis, series } = chartData.data[0];let { canvas, width, height } = e;chart = echarts.init(canvas, null, {// 为了处理x轴名称的正常显示，canvas的宽度不能和父盒子相同width: width - 12,height: height});canvas.setChart(chart);let option = {tooltip: {trigger: 'axis',textStyle: {fontSize: 12}},legend: {selectedMode: false,right: 0,top: 0,data:  [{ name:  'T1进货', itemStyle: { opacity: 0 } }, { name:'T1进货(LY)' , itemStyle: { opacity: 0 } }] },grid: {left: '6%',right: '2%',bottom: '5%',top: '22%',containLabel: true},xAxis: {name: '',type: xAxis.type,boundaryGap: false,data: xAxis.data,axisLabel: {rotate: 50,interval: 0,fontSize: 10},nameTextStyle: {align: 'middle',fontSize: '10px'},axisTick: {show: false},axisLine: {lineStyle: {color: '#A1A1A1',width: 1, //这里是为了突出显示加上的}},},yAxis: {name: this.newParams.dataUnit == 'wx' ? '(箱)' : 'GIV(m)',type: 'value',show: true,nameTextStyle: {align: 'center'},axisLine: {lineStyle: {color: '#A1A1A1',width: 1, //这里是为了突出显示加上的}},axisLabel: {// rotate: 30},splitNumber: 5,},series: [{name: this.newParams.dataType == 'Y' ? 'T1进货' : 'SD进货',type: 'line',smooth: true,itemStyle: {normal: {color: this.goldenSkin?"#9C6429":"#014c66",lineStyle: {color: this.goldenSkin?"#9C6429":"#014c66"}}},// data: [120, 132, 101, 134, 90, 230,210,70,60,30,29,60,30,66,77]data: series[0].data},{name: this.newParams.dataType == 'Y' ? 'T1进货(LY)' : 'SD进货(LY)',type: 'line',smooth: true,itemStyle: {normal: {color: '#FEC392',lineStyle: {color: '#FEC392'}}},data: series[1].data},{name: 'AOP',type: 'line',smooth: true,itemStyle: {normal: {color: '#169D59',lineStyle: {color: '#169D59'}}},data: this.newParams.dataUnit == 'wx' ? [] : series[2].data}]};chart.setOption(option);this.$refs.chart.setChart(chart);

注意：
运行如果报错
编辑刚才拷贝的echarts.min.js，检索“e(t.echarts={})”字符串
找到相邻的(this,function(t) 串，将其改为(this,function(t,window,document)保存即可
或者：全文搜索 use strict 在下面增加语句var isDomLevel2 = (typeof window !== 'undefined') && !!window.addEventListener
全文搜索 function Pe(t, e, n, i) 和 function Le(t, e, n, i) 进行修改增加判断，（注意是参数中带有i的，Le 与 Pe 函数里内容可能颠倒，在原有方法上增加对应新判断即可）

function Pe(t, e, n, i) {if(isDomLevel2){t.addEventListener(e, n, i)}else{t.attachEvent('on' + e, n)}}function Le(t, e, n, i) {if(isDomLevel2){t.removeEventListener(e, n, i)}else{t.detachEvent('on' + e, n)}}

微信小程序引用eharts相关推荐

微信小程序引用vant toast 提示 “未找到 van-toast 节点“
微信小程序引用vant 的toast 出现如下报错都是因为没有正确引入toast 组件正确引入toast 组件需要在三个文件中设置在 .wxml 文件的 view 内写入 <van-toa ...
微信小程序--引用第三方组件
引用方式分为两种 1.使用npm安装 [方便更新推荐] 2.直接引用dist文件按需加载组件库中的组件可以使用 3.lin-ui 组件库中的配置一.使用npm安装 1.安装nodejs环境 2. ...
微信小程序——引用阿里云字体
阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标--保存至你的项目--下载你的图标项目--在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...
微信小程序引用fontawesome字体
1.到fontawesome官网下载字体包. 2.打开1中下载的压缩包找到.ttf文件. 3.上传2中的字体文件到https://transfonter.org/,选择base64 编吗 ,conve ...
微信小程序引用腾讯视频
文章转自 https://www.jiezhe.net/post/38.html tips:腾讯视频上传需要认证,上传身份证图片时如果报错,就换个QQ号,我一个QQ号能上传,另一个QQ号就不行,应该是 ...
微信小程序引用vant Weapp
vant-weapp官网https://youzan.github.io/vant-weapp/#/quickstarthttps://youzan.github.io/vant-weapp/#/qu ...
微信小程序引用其他js里的方法
微信小程序中,在微信官方开发文档我们可以知道小程序的目录结构 . 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件 ...
微信小程序引用php函数,微信小程序Page中data数据操作和函数调用详细介绍
这篇文章主要介绍了微信小程序详解Page中data数据操作和函数调用的相关资料,需要的朋友可以参考下微信小程序详解Page中data数据操作和函数调用 Page() 函数用来注册一个页面.接受一 ...
微信小程序引用php函数,php微信小程序支付讲解（JSAPI）
在早起的某篇文章中我们已经简单介绍了小程序支付, 这里我们在这篇文章中详细的介绍一个微信小程序支付, 顺便附带小程序端的部分支付代码. 微信小程序支付文档地址(微信小程序支付) 微信完整支付类下载地址 ...

微信小程序引用eharts

微信小程序引用eharts相关推荐

最新文章

热门文章