微信小程序使用echarts图表(ec-canvas)

简介: 这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。

本文微信小程序开发所使用技术:taro+vue+less

taro:v3.3.14

vue:v2.6.14

若使用ec-canvas加载图表时报错如下图:

解决方法①:

将echarts.js源码中的t.addEventListener(e,n,i)修改为:t.addEventListener**?.**(e,n,i)

解决方法②:

将echarts.js源码中的function(t)修改为:function(t,window,document)

ec-canvas文件下载地址: https://github.com/ecomfe/echarts-for-weixin

①将ec-canvas文件夹复制到项目目录中

②创建要使用的图表组件,例如折线图(LineChart.vue,其他图表类似)

<template>
  <view class="m-line-container">
    <ec-canvas class="m-container" id="mychart-dom-line" canvas-id="mychart-line" :ec="ec"></ec-canvas>
  </view>
</template>

<script>
import * as echarts from '../../../ec-canvas/echarts'
export default {
  name: 'LineChart',
  props: {
    lineData: {
      type: Array,
      default: () => {
        return []
      }
    },
    datePeriod: {
      type: Array,
      default: () => {
        return []
      }
    },
    legend: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      ec: {
        onInit: this.initChart
      }
    }
  },
  methods: {
    initChart(canvas, width, height, dpr) {
      console.log(echarts)
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);
      console.log(chart)
      var option = {
        tooltip: {
          trigger: 'axis',
          confine: true,
          formatter: function (params) {
            // console.log('params:', params)
            var text = params[0].name
            const len = params.length
            for (var i = 0; i < len; i++) {
              text += '年' + '\n' + params[i].marker + params[i].seriesName + ' ' + params[i].value + '万辆'
            }
            return text
          }
        },
        legend: {
          top: 5,
          right: 30,
          data: [{
            name: this.legend,
            textStyle: {
              color: '#383874'
            }
          }]
        },
        grid: {
          top: 36
        },
        color: ['#3B7FF0'],
        xAxis: { // 坐标系的X轴设置
          type: 'category', // 坐标轴类型,雷姆轴
          boundaryGap: false, // 坐标轴两边留白策略
          data: this.datePeriod, // X轴类目数据
          nameTextStyle: {
            color: '#999999',
            fontSize: 20
          }
        },
        yAxis: { // 坐标系的Y轴设置
          type: 'value', // 数值轴,用于连续数据
          axisLabel: {
            formatter: '{value}'
          },
          nameTextStyle: {
            color: '#999999',
            fontSize: 20
          }
        },
        series: [
          {
            name: this.legend,
            type: 'line',
            // areaStyle: { // 渐变面积图
            //   color: {
            //     type: 'linear',
            //     x: 0,
            //     y: 0,
            //     x2: 0,
            //     y2: 1,
            //     colorStops: [{
            //         offset: 0, color: '#3A79EE' // 0% 处的颜色
            //     }, {
            //         offset: 1, color: '#3B7FF0' // 100% 处的颜色
            //     }],
            //     global: false // 缺省为 false
            //   }
            // },
            data: this.lineData
          }
        ]
      }
      chart.setOption(option)
      console.log(chart)
      return chart
    }
  }
}
</script>
<style>
.m-line-container {
  width: 100%;
  height: 100%;
}
.m-container {
  width: 100%;
  height: 100%;
}
</style>

③在要使用图表的pages页面配置中引入ec-canvas

export default {
  navigationBarTitleText: '折线图',
  usingComponents: {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

④在要使用图表的页面引入图表组件

<LineChart class="m-line" legend="Tesla产量" v-if="lineData.length" :datePeriod="dateDict" :lineData="lineData" />
import LineChart from './modules/LineChart'
export default {
  name: 'Index',
  components: {
    LineChart
  },
  data () {
    return {
      dateDict: [],
      lineData: []
    }
  }
}

⑤若ec-canvas下的charts.js文件过大

可尝试通过在线定制echarts.js的方式解决: ECharts 在线构建

相关文章
|
7天前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
2月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
2月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
2月前
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
33 1
|
2月前
|
JavaScript
Echarts——VUE中非根节点时不显示图表也无报错
Echarts——VUE中非根节点时不显示图表也无报错
33 1
|
3月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
|
3月前
|
Apache
Axure rp9 引入Echarts图表 |手动引入图表 Apache Echarts
Axure rp9 引入Echarts图表 |手动引入图表 Apache Echarts
101 0
|
3月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
130 0
|
3月前
|
数据可视化 JavaScript 前端开发
使用ECharts创建动态数据可视化图表
使用ECharts创建动态数据可视化图表
Echarts各类图表常用配置项说明,附示例代码
Echarts各类图表常用配置项说明,附示例代码
下一篇
无影云桌面