微信小程序单页面使用echarts组件实现两个折线图

最新推荐文章于 2025-05-10 13:40:01 发布

丶枕边人

最新推荐文章于 2025-05-10 13:40:01 发布

阅读量3.2k

点赞数 4

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/nan961136007/article/details/106488704

版权

本文介绍如何在微信小程序中使用Echarts组件创建并展示两个折线图。内容包括下载Echarts插件、配置WXML、WCSS、JSON及JS代码，特别指出当X轴数据过多时可能存在的显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天呢，放一个很早以前做的一个echarts组件的引用和实现。话不多说，上图片之后在上代码。

这些代码都是我单独运行了才放上来得，应该可以直接用，有个问题是，X轴如果超过7个的话，会看不到后续的X轴，X轴的单位位置也只能在这条线上，比较无奈。
在这里插入图片描述
首先呢，要去下载echarts插件包放在你的小程序里面
接着就按照echarts的文档来查看属性，代码里放入你需要的属性就可以了。

wxml代码，这是两个折线图的数据渲染

<view class="container1">
	<view class='echart_wrap'>
		<ec-canvas id="mychart" canvas-id="mychart-line" ec="{
  { ec1 }}"></ec-canvas>
	</view>
</view>


<view class="divLine"></view>

<view class="container1">
	<view class='echart_wrap'>
		<ec-canvas id="mychart" canvas-id="mychart-line" ec="{
  { ec2 }}"></ec-canvas>
	</view>
</view>

wcss代码

.echart_wrap{
  width: 100%;
  height: 680rpx;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

.divLine {
  background: #F4F4F4;
  width: 100%;
  height: 20rpx;
}

接着，也是重要的json里面引入

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

最后是js代码，不懂得我注释在代码里面了。

import * as echarts from '../../../ec-canvas/echarts';
var barec1 = null
var barec2 = null
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec1: {
      onInit: function (canvas, width, height) {
        barec1 = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(barec1);
        return barec1;

最低0.47元/天解锁文章