首先安装mpvue-echarts:cnpm install mpvue-echarts --save
然后在组件中引用 import mpvueEcharts from "mpvue-echarts";
接着引入import * as echarts from "../../static/echarts.min.js";
一开始我直接把echarts所有的组件引进去了,直接超过了小程序项目大小的限制(2M)
解决:http://echarts.baidu.com/builder.html
直接在线定制你需要的组件,然后就生成了echarts.min.js
echarts.vue组件
<template>
<div>
<div class="echarts-wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="demo-canvas" />
</div>
</div>
</template>
<script>
import * as echarts from "../../static/echarts.min.js";
import mpvueEcharts from "mpvue-echarts";
export default {
components: { mpvueEcharts },
data() {
return {
echarts,
onInit: this.initChart
};
},
props:{
radarData:{
type:Array,
default:()=>[]
},
initText:{
type:Array,
default:()=>[]
}
},
methods: {
initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
backgroundColor: "#ffffff",
color: ["#f7393b"],
tooltip: {},
grid: {
position: "center"
},
xAxis: {
show: false
},
yAxis: {
show: false
},
radar: {
// shape: 'circle',
indicator: this.initText
},
series: [
{
symbolSize: 8,
symbol: "circle", // 拐点的样式,还可以取值'rect','angle'等
type: "radar",
data: this.radarData
}
]
};
chart.setOption(option);
return chart;
}
}
};
</script>
<style lang="less">
.echarts-wrap {
margin-top: 40rpx;
width: 100%;
height: 220px;
}
</style>