微信小程序引用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)
		}
	}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值