【mpvue】mpvue-echarts echarts动态渲染、延迟加载、双轴动态计算、双轴对齐
mpvue-echarts 双轴折线案例
- 使用echarts双轴折线图实战
-
- 项目导入
-
- 一、打包结果超过小程序大小限制？
-
- 1.下载自定义echarts.js
- 2. 引入 echarts.js
- 3. 项目引入
- 二、图表配置
- 二、Demo 图表集成
使用echarts双轴折线图实战
转载请注明出处
https://blog.csdn.net/u014513456/article/details/128438703
Author：[email protected]
难点：
- mpvue-echarts 引入
- mpvue-echarts 打包大小问题
- mpvue-echarts 动态加载
- 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