mpvue-echarts 双轴折线案例

• 使用echarts双轴折线图实战
• • 项目导入
  • • 一、打包结果超过小程序大小限制？
    • • 1.下载自定义echarts.js
      • 2. 引入 echarts.js
      • 3. 项目引入
    • 二、图表配置
    • 二、Demo 图表集成

使用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 图表集成

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