1. 程式人生 > >mpvue中使用echarts,echarts檔案過大問題

mpvue中使用echarts,echarts檔案過大問題

首先安裝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>