小程序——npm echarts

最新推荐文章于 2025-04-08 09:34:27 发布

我是槑槑

最新推荐文章于 2025-04-08 09:34:27 发布

阅读量1k

点赞数

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/weixin_42132044/article/details/108599741

版权

小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在小程序中集成Echarts，包括下载Echarts依赖并放置到components目录，创建自定义组件，WXML中添加组件标签，设置图表容器及ec-canvas的样式，以及编写图表的JavaScript逻辑。

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

echarts官网说明

下载echarts依赖包并拷贝到指定位置 components

在这里插入图片描述

导入echarts自定义组件

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

模板中wxml添加标签组件
- 必须提供一个容器view 并且指定高度
- ec-canvas 标签需要设置样式：宽度和高度

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

ec-canvas {
  width: 750rpx;
  height: 640rpx;
}

图表的js逻辑index.js

// echarts图表的用法
import * as echarts from '../../components/ec-canvas/echarts.js'

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      // 坐标轴指示器，坐标轴触发有效
      axisPointer: {          
        // 默认为直线，可选为：'line' | 'shadow'
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  }
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});