很久没有写小程序了,2023年回来补充一句;
以下echart为2019年版本踩的坑,后来用了antv f2 性能比echart好很多,卡顿问题也不知道echart官方解决没有,移动端不推荐使用tooltip悬浮框;如果项目非要用,驯服不了产品;那antv f2也是很好的选择
mpvue-echarts地址: https://github.com/F-loat/mpvue-echarts
装包 :
npm install -D sass-loader node-sass
npm install --save echarts
npm i mpvue-echarts --save
官方示例代码:
<template>
<div class="echarts-wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="demo-canvas" />
</div>
</template>
<script>
import echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
let chart = null;
export default {
components: {
mpvueEcharts
},
data () {
return {
echarts,
onInit: this.initChart
}
},
methods: {
initChart (canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type:</