小程序 mpvue 使用echarts 饼状图、折线图（组件封装）

直接撸码！！！

饼状图组件代码

<template>
  <div class="echarts-wrap">
    <mpvue-echarts :echarts="echarts" :onInit="pieChart" :canvas-id="pieData.pieId"/>
  </div>
</template>
<script>
import echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'

let pieChart = null;
export default {
  components: { //引入其它组件
    mpvueEcharts
  },
  data() {  // 设置数据
    return {
      echarts,
    }
  },
  props: { //接收传过来的数据
    pieData: Object,
  },
  watch: {
    pieData: {
      handler() {
        if (pieChart) {
          pieChart.setOption(this.myPieOptions())
        }
      },
      deep: true
    }
  },
  methods: {  //方法
    pieChart(canvas, width, height) {
      let that = this;
      pieChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(pieChart);
      pieChart.setOption(that.myPieOptions());
      return pieChart; // 返回 pieChart 后可以自动绑定触摸操作
    },
    myPieOptions() {
      let that = this;
      return {
        title: {  // 标题
          text: that.pieData.text,
          subtext: that.pieData.subtext ? that.pieData.subtext : '',
          left: 'center',
        },
        tooltip: {  // 提示框组件
          trigger: 'item',  // item 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        },
        legend: { //图例组件展示
          orient: 'horizontal', // vertical 垂直、horizontal 水平
          left: 'left', // 如果 left 的值为left, center, right 组件会根据相应的位置自动对齐。
          bottom: '20'
        },
        series: [
          {
            type: 'pie',  // pie 饼状图
            radius: '50%',
            label: {
              formatter: '{c} ({d}%)',
            },
            data: that.pieData.data,
            emphasis: { //高亮状态的扇区和标签样式
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    pageClose() { //页面销毁
      this.pieData = []
    },
  }
}

</script>

<style lang="scss" scoped>
.echarts-wrap {
  width: 100%;
  height: 300px;
}
</style>

折线图组件代码 

<template>
  <div class="echarts-wrap">
    <mpvue-echarts :echarts="echarts" :onInit="lineChart" :canvas-id="lineData.lineId"/>
  </div>
</template>
<script>
import echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'

let chartLine = null;
export default {
  components: { //引入其它组件
    mpvueEcharts
  },
  data() {  // 设置数据
    return {
      echarts,
    }
  },
  props: { //接收传过来的数据
    lineData: Object,
  },
  watch: {
    lineData: {
      handler() {
        if (chartLine) {
          chartLine.setOption(this.myLineOptions())
        }
      },
      deep: true
    }
  },
  methods: {  //方法
    lineChart(canvas, width, height) {
      let that = this;
      chartLine = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(chartLine);
      chartLine.setOption(that.myLineOptions());
      return chartLine; // 返回 chartLine 后可以自动绑定触摸操作
    },
    myLineOptions() {
      let that = this;
      return {
        title: {
          text: that.lineData.text,
          textAlign: 'auto'
        },
        tooltip: {
          trigger: 'axis',
          position: ['20%', '30%'],
        },
        legend: {
          padding: [30, 0, 0, 0],
          data: that.lineData.legend
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        /*toolbox: { // 保存图片
          feature: {
            saveAsImage: {}
          }
        },*/
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0
          },
          data: that.lineData.xAxis
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: [
          {
            bottom: '30%',
            type: 'inside',
            start: 0,
            end: 50
          },
          {
            height: 25,
            start: 0,
            end: 50,
          }],
        series: that.seriesInit()
      }
    },
    seriesInit() {
      let that = this;
      let l = this.lineData.legend;
      let s = that.lineData.series;
      let data = [];
      for (let i = 0; i < l.length; i++) {
        data.push({name: l[i], type: 'line', data: s[i]})
      }
      return data;
    },
    pageClose() { //页面销毁
      this.lineData = []
    },
  }
}

</script>

<style lang="scss" scoped>
.echarts-wrap {
  width: 100%;
  height: 300px;
}
</style>