微信小程序引用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 [email protected] -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中
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)
}
}