【mpvue】mpvue-echarts echarts动态渲染、延迟加载、双轴动态计算、双轴对齐

使用echarts双轴折线图实战

转载请注明出处
https://blog.csdn.net/u014513456/article/details/128438703
Author：ruanjianjiagou@163.com

难点：

1. mpvue-echarts 引入
2. mpvue-echarts 打包大小问题
3. mpvue-echarts 动态加载
4. mpvue-echarts 双轴折线图动态计算

效果图：

项目导入

git地址
https://github.com/F-loat/mpvue-echarts

$ npm install mpvue-echarts
$ npm install echarts

一、打包结果超过小程序大小限制？

1.下载自定义echarts.js

使用自定义版 echarts，官网定制
https://echarts.apache.org/zh/builder.html
选择需要的功能后点击下载

2. 引入 echarts.js

将下载的echarts.js 重命名为 diy_echarts.js
粘贴到node_modules/echarts/dist 下

3. 项目引入

import * as echarts from 'echarts/dist/diy_echarts'
import mpvueEcharts from 'mpvue-echarts'

二、图表配置

yAxis 则配置双轴
yAxis- max: this.maxRight, 需要动态计算轴最大值，通过动态计算左右轴最大值可以实现双轴对齐效果
axisLine：Y轴刻度值及颜色
series：y轴数据项
xAxis：x 轴数据项

initChart () {
      this.option = {
        backgroundColor: '#fff',
        color: this.colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          containLabel: true
        },
        legend: {
          data: ['gmv', '订单数'],
          top: 'top'
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: this.orderDate
        },
        yAxis: [
          {
            type: 'value',
            name: '总订单数',
            position: 'right',
            alignTicks: true,
            max: this.maxRight,
            axisLine: {
              show: true,
              lineStyle: {
                color: this.colors[1]
              }
            }
          },
          {
            type: 'value',
            name: '总Gmv(元)',
            position: 'left',
            alignTicks: true,
            max: this.maxLeft,
            axisLine: {
              show: true,
              lineStyle: {
                color: this.colors[0]
              }
            },
            axisLabel: {
              formatter: '{value} 元'
            }
          }
        ],
        series: [
          {
            name: 'gmv',
            type: 'line',
            data: this.gmv
          },
          {
            name: '订单数',
            type: 'line',
            yAxisIndex: 1,
            data: this.orderNumber
          }]
      }

      this.$refs.echarts.init()
    }
  }

二、Demo 图表集成

<div class="wrap">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleInit" ref="echarts"/>
</div>

<script>
import * as echarts from 'echarts/dist/diy_echarts'
import mpvueEcharts from 'mpvue-echarts'

data () {
    return {
    maxLeft: 0,
      maxRight: 0,
      rotate: 0, // 旋转的度数
      interval: 0, // 间隔数
      option: null,
      echarts,
      colors: ['#409EFF', '#ff9933'],
      gmv: [],
      orderNumber: [],
      orderDate: []
    }
  },
  mounted () {
  //获取网络数据
    this.getOperateData()
  },  
  components: {
    mpvueEcharts
  },
  onShareAppMessage () {
  },
  methods: {
  async getOperateData () {
      const res = await operateData(param)
      if (res.code === 'SUCCESS' && res.data) {
        // console.log(res)
        this.maxState = false
        const data = res.data.operateData
        var mGmv = []
        var mNum = []
        var mDate = []
        data.forEach((item, index) => {
          item.gmv = (item.gmv).toFixed(2)
          mGmv.push(item.gmv)
          mNum.push(item.number)
          mDate.push(item.orderDate)
        })
        this.gmv = mGmv
        this.orderNumber = mNum
        this.orderDate = mDate
        
        this.maxLeft = Math.max.apply(null, mGmv)
        this.maxRight = Math.max.apply(null, mNum)
        //设置最小值小于6则执行展示6个单位
        if (this.maxLeft === 0) {
          this.maxLeft = 6
        }
        if (this.maxRight === 0) {
          this.maxRight = 6
        }
        //控制双Y轴 最大值以保证刻度对齐
        this.maxLeft = Math.ceil(this.maxLeft / 6) * 6
        this.maxRight = Math.ceil(this.maxRight / 6) * 6
        this.chartData.rows = data
        const length = this.chartData.rows.length
        //控制x轴展示坐标数量 动态计算
        if (length <= 7) {
          this.rotate = 0
          this.interval = 1
        } else if (length > 7 && length <= 14) {
          this.rotate = 10
          this.interval = 1
        } else if (length > 14 && length <= 21) {
          this.rotate = 20
          this.interval = 1
        } else {
          this.rotate = 30
          this.interval = 1
        }
        // chart.setData(this.chartData.rows)
        this.initChart()
      }
    },
     handleInit (canvas, width, height) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      canvas.setChart(chart)
      chart.setOption(this.option)
      return chart
    },
    initChart () {
      this.option = {
        backgroundColor: '#fff',
        color: this.colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          containLabel: true
        },
        legend: {
          data: ['gmv', '订单数'],
          top: 'top'
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: this.orderDate
        },
        yAxis: [
          {
            type: 'value',
            name: '总订单数',
            position: 'right',
            alignTicks: true,
            max: this.maxRight,
            axisLine: {
              show: true,
              lineStyle: {
                color: this.colors[1]
              }
            }
          },
          {
            type: 'value',
            name: '总Gmv(元)',
            position: 'left',
            alignTicks: true,
            max: this.maxLeft,
            axisLine: {
              show: true,
              lineStyle: {
                color: this.colors[0]
              }
            },
            axisLabel: {
              formatter: '{value} 元'
            }
          }
        ],
        series: [
          {
            name: 'gmv',
            type: 'line',
            data: this.gmv
          },
          {
            name: '订单数',
            type: 'line',
            yAxisIndex: 1,
            data: this.orderNumber
          }]
      }

      this.$refs.echarts.init()
    }
  }
</script>

————————————————
版权声明：本文为CSDN博主「HarmonyOS Developer」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014513456/article/details/128438703