mpvue中使用echarts,echarts檔案過大問題
阿新 • • 發佈:2018-11-05
首先安裝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>