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>


 

猜你喜欢

转载自blog.csdn.net/qq_33040483/article/details/82866203