简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 위챗 애플릿 > 미니 프로그램 개발 > 본문

WeChat 애플릿에서 ECharts를 설치하고 참조하는 방법에 대한 자세한 설명은 무엇입니까?

青灯夜游
풀어 주다： 2021-10-19 10:55:18
앞으로
4535명이 탐색했습니다.

이 글에서는 npm을 사용하여 WeChat 애플릿에 ECharts를 도입하는 방법을 소개하겠습니다. 도움이 되길 바랍니다!

WeChat 애플릿에서 ECharts를 설치하고 참조하는 방법에 대한 자세한 설명은 무엇입니까?

Apache ECharts는 WeChat 미니 프로그램에서 Echarts를 사용하기 위한 코드 예제와 ec-canvas 구성 요소를 공식적으로 제공하지만 npm 패키지는 출시되지 않았습니다. ec-canvas 组件，但是未发布 npm 包。

此项目在官方代码之上修改支持 ec-canvas 组件传入 echarts 可支持 npm 引入 echarts 或本地自定义构建后的 echarts，更符合 Web 开发体验。

并且发布 npm 包，支持小程序通过 npm 安装使用。并支持 Taro 按需引入 echarts 减小打包体积。【相关学习推荐：小程序开发教程】

安装

npm install echarts-for-weixin
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

小程序引用

参考代码 tools/demo

1、首先在页面的 json 文件加入 usingComponents 配置字段

{
  "usingComponents": {
    "ec-canvas": "echarts-for-weixin"
  }
}
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

2、项目根目录创建 package.json 并执行 npm install 安装依赖

{
  "dependencies": {
    "echarts": "^5.1.2",
    "echarts-for-weixin": "^1.0.0"
  }
}
로그인 후 복사

3、小程序开发者工具中构建 npm

点击开发者工具中的菜单栏：工具 --> 构建 npm

WeChat 애플릿에서 ECharts를 설치하고 참조하는 방법에 대한 자세한 설명은 무엇입니까?

4、在页面中引入 echarts，可以从 npm 引入 echarts，也可以引入本地自定义构建的 echarts 以减小体积

import * as echarts from 'echarts' // 从 npm 引入 echarts
import * as echarts from './echarts' // 或者从本地引入自定义构建的 echarts
로그인 후 복사
로그인 후 복사

5、然后可以在对应页面的 wxml 中直接使用该组件

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" echarts="{{ echarts }}" ec="{{ ec }}"></ec-canvas>
</view>
로그인 후 복사

6、ec-canvas 的具体用法和如何初始化图表请参考 Echarts 官方小程序示例

import * as echarts from &#39;echarts&#39;

let chart = null;

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

  var option = {
    tooltip: {
      trigger: &#39;axis&#39;,
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: &#39;shadow&#39;        // 默认为直线，可选为：&#39;line&#39; | &#39;shadow&#39;
      },
      confine: true
    },
    legend: {
      data: [&#39;热度&#39;, &#39;正面&#39;, &#39;负面&#39;]
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    xAxis: [
      {
        type: &#39;value&#39;,
        axisLine: {
          lineStyle: {
            color: &#39;#999&#39;
          }
        },
        axisLabel: {
          color: &#39;#666&#39;
        }
      }
    ],
    yAxis: [
      {
        type: &#39;category&#39;,
        axisTick: { show: false },
        data: [&#39;汽车之家&#39;, &#39;今日头条&#39;, &#39;百度贴吧&#39;, &#39;一点资讯&#39;, &#39;微信&#39;, &#39;微博&#39;, &#39;知乎&#39;],
        axisLine: {
          lineStyle: {
            color: &#39;#999&#39;
          }
        },
        axisLabel: {
          color: &#39;#666&#39;
        }
      }
    ],
    series: [
      {
        name: &#39;热度&#39;,
        type: &#39;bar&#39;,
        label: {
          normal: {
            show: true,
            position: &#39;inside&#39;
          }
        },
        data: [300, 270, 340, 344, 300, 320, 310],
        itemStyle: {
          // emphasis: {
          //   color: &#39;#37a2da&#39;
          // }
        }
      },
      {
        name: &#39;正面&#39;,
        type: &#39;bar&#39;,
        stack: &#39;总量&#39;,
        label: {
          normal: {
            show: true
          }
        },
        data: [120, 102, 141, 174, 190, 250, 220],
        itemStyle: {
          // emphasis: {
          //   color: &#39;#32c5e9&#39;
          // }
        }
      },
      {
        name: &#39;负面&#39;,
        type: &#39;bar&#39;,
        stack: &#39;总量&#39;,
        label: {
          normal: {
            show: true,
            position: &#39;left&#39;
          }
        },
        data: [-20, -32, -21, -34, -90, -130, -110],
        itemStyle: {
          // emphasis: {
          //   color: &#39;#67e0e3&#39;
          // }
        }
      }
    ]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    echarts,
    ec: {
      onInit: initChart
    }
  },
  onReady() {
    setTimeout(function () {
      // 获取 chart 实例的方式
      console.log(chart)
    }, 2000);
  }
})
로그인 후 복사

Taro 引用

参考代码 examples/taro

准备工作

  1. 安装依赖
npm install echarts-for-weixin
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
  1. 在项目根目录中新建文件 project.package.json 或者自定义命名，此文件是小程序的 package.json，并在下一步中添加小程序自定义构建 npm 方式。这么做的目的是为了能够共享项目 node_modules

project.package.json

{
  "dependencies": {
    "echarts": "^5.1.2",
    "echarts-for-weixin": "^1.0.2"
  }
}
로그인 후 복사
  1. 在 project.config 的 setting 中添加小程序自定义构建 npm 方式，参考 自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式
{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "../project.package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}
로그인 후 복사
  1. 执行 Taro 的开发或者打包命令进行项目开发
npm run dev:weapp
로그인 후 복사
로그인 후 복사
로그인 후 복사
  1. 小程序开发者工具中构建 npm。注意：小程序开发工具打开的项目目录是 dist 文件夹

点击开发者工具中的菜单栏：工具 --> 构建 npm

WeChat 애플릿에서 ECharts를 설치하고 참조하는 방법에 대한 자세한 설명은 무엇입니까?

引入 Echarts

  1. 在全局的 app.config.js 中添加或者在单个需要使用到 echarts 的页面配置中添加引用组件
{
  "usingComponents": {
    "ec-canvas": "echarts-for-weixin"
  }
}
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
  1. 在页面中引入 echarts，可以从 npm 引入 echarts，也可以引入本地自定义构建的 echarts 以减小体积
import * as echarts from &#39;echarts&#39; // 从 npm 引入 echarts
import * as echarts from &#39;./echarts&#39; // 或者从本地引入自定义构建的 echarts
로그인 후 복사
로그인 후 복사
  1. 将引入的 echarts 传给组件
<ec-canvas 
  id=&#39;mychart-dom-area&#39; 
  canvas-id=&#39;mychart-area&#39; 
  echarts={echarts} // 将引入的 echarts 传给组件
  ec={this.state.ec}
/>
로그인 후 복사
로그인 후 복사
로그인 후 복사
  1. ec-canvas 的具体用法和如何初始化图表请参考 Echarts 官方小程序示例
示例代码
function initChart(canvas, width, height) {  const chart = echarts.init(canvas, null, {    width: width,    height: height
  })
  canvas.setChart(chart)  const model = {    yCates: [&#39;Saturday&#39;, &#39;Friday&#39;, &#39;Thursday&#39;,      &#39;Wednesday&#39;, &#39;Tuesday&#39;, &#39;Monday&#39;,      &#39;Sunday&#39;],    xCates: [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;],    data: [      // [yCateIndex, xCateIndex, value]
      [0, 0, 5], [0, 1, 7], [0, 2, 3], [0, 3, 5], [0, 4, 2],
      [1, 0, 1], [1, 1, 2], [1, 2, 4], [1, 3, 8], [1, 4, 2],
      [2, 0, 2], [2, 1, 3], [2, 2, 8], [2, 3, 6], [2, 4, 7],
      [3, 0, 3], [3, 1, 7], [3, 2, 5], [3, 3, 1], [3, 4, 6],
      [4, 0, 3], [4, 1, 2], [4, 2, 7], [4, 3, 8], [4, 4, 9],
      [5, 0, 2], [5, 1, 2], [5, 2, 3], [5, 3, 4], [5, 4, 7],
      [6, 0, 6], [6, 1, 5], [6, 2, 3], [6, 3, 1], [6, 4, 2]
    ]
  }  const data = model.data.map(function (item) {    return [item[1], item[0], item[2] || &#39;-&#39;]
  })  const option = {    tooltip: {      position: &#39;top&#39;
    },    animation: false,    grid: {      bottom: 60,      top: 10,      left: 80
    },    xAxis: {      type: &#39;category&#39;,      data: model.xCates
    },    yAxis: {      type: &#39;category&#39;,      data: model.yCates
    },    visualMap: {      min: 1,      max: 10,      show: false,      calculable: true,      orient: &#39;horizontal&#39;,      left: &#39;center&#39;,      bottom: 10,      inRange: {        color: [&#39;#37A2DA&#39;, &#39;#32C5E9&#39;, &#39;#67E0E3&#39;, &#39;#91F2DE&#39;, &#39;#FFDB5C&#39;, &#39;#FF9F7F&#39;],
      }
    },    series: [{      name: &#39;Punch Card&#39;,      type: &#39;heatmap&#39;,      data: data,      label: {        normal: {          show: true
        }
      },      itemStyle: {        emphasis: {          shadowBlur: 10,          shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
        }
      }
    }]
  }

  chart.setOption(option)  return chart
}export default class Echarts extends React.Component {

  state = {    ec: {      onInit: initChart
    }
  }

  render () {    return (      <View className=&#39;echarts&#39;>        <ec-canvas 
          id=&#39;mychart-dom-area&#39; 
          canvas-id=&#39;mychart-area&#39; 
          echarts={echarts} 
          ec={this.state.ec}
        />      </View>
    )
  }
}复制代码
로그인 후 복사

Taro 按需引用

参考代码 examples/taro-manual-load

注意：小程序开发者工具打开的项目目录是打包后的 dist

이 프로젝트는 npm을 지원하고 를 도입하기 위해 <code>echarts를 전달하는 ec-canvas 구성 요소를 지원하도록 공식 코드 위에 수정되었습니다. echarts 또는 웹 개발 경험에 더 부합하는 로컬 사용자 정의 내장 echarts입니다.

그리고 npm을 통해 작은 프로그램의 설치 및 사용을 지원하는 npm 패키지를 출시하세요. 또한 포장 크기를 줄이기 위해 주문형 차트를 도입하는 Taro도 지원합니다. [관련 학습 권장사항: 미니 프로그램 개발 튜토리얼

]

설치 

npm install echarts-for-weixin
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

미니 프로그램 참조

🎜참조 코드 tools/demo🎜🎜1 먼저 usingComponents 구성을 json에 추가하세요. 페이지 필드의 파일 🎜
{
  "dependencies": {
    "echarts-for-weixin": "^1.0.2"
  }
}
로그인 후 복사
로그인 후 복사
🎜2. 프로젝트 루트 디렉토리에 package.json을 생성하고 npm install을 실행하여 종속성을 설치합니다🎜
{
  copy: {
    patterns: [
      { from: &#39;project.package.json&#39;, to: &#39;dist/package.json&#39; }, // 指定需要 copy 的文件
      { from: &#39;node_modules/echarts-for-weixin/&#39;, to: &#39;dist/node_modules/echarts-for-weixin/&#39; }
    ],
    options: {}
  }
}
로그인 후 복사
로그인 후 복사
🎜3. 미니 프로그램 개발자 도구에서 npm을 빌드합니다🎜🎜 개발자 도구의 메뉴 표시줄: 도구--> Build npm🎜🎜1. png🎜🎜4. 페이지에 echarts를 도입하세요. npm에서 echarts를 도입할 수 있습니다. 로컬에서 사용자 정의한 echarts를 도입하여 크기를 줄일 수 있습니다🎜
{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}
로그인 후 복사
로그인 후 복사
🎜5. 그런 다음 해당 페이지의 wxml에서 직접 이 구성 요소를 사용할 수 있습니다🎜
npm run dev:weapp
로그인 후 복사
로그인 후 복사
로그인 후 복사
🎜6. -canvas 및 차트 초기화 방법은 Echarts 공식 애플릿 예시🎜🎜
{
  "usingComponents": {
    "ec-canvas": "echarts-for-weixin"
  }
}
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

Taro 참조

🎜 참조 코드 examples/taro 🎜

준비🎜
  1. 종속성 설치
// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from &#39;echarts/core&#39;;
// Import charts, all with Chart suffix
import {
  // LineChart,
  BarChart,
  // PieChart,
  // ScatterChart,
  // RadarChart,
  // MapChart,
  // TreeChart,
  // TreemapChart,
  // GraphChart,
  // GaugeChart,
  // FunnelChart,
  // ParallelChart,
  // SankeyChart,
  // BoxplotChart,
  // CandlestickChart,
  // EffectScatterChart,
  // LinesChart,
  // HeatmapChart,
  // PictorialBarChart,
  // ThemeRiverChart,
  // SunburstChart,
  // CustomChart,
} from &#39;echarts/charts&#39;;
// import components, all suffixed with Component
import {
  // GridSimpleComponent,
  GridComponent,
  // PolarComponent,
  // RadarComponent,
  // GeoComponent,
  // SingleAxisComponent,
  // ParallelComponent,
  // CalendarComponent,
  // GraphicComponent,
  // ToolboxComponent,
  TooltipComponent,
  // AxisPointerComponent,
  // BrushComponent,
  TitleComponent,
  // TimelineComponent,
  // MarkPointComponent,
  // MarkLineComponent,
  // MarkAreaComponent,
  // LegendComponent,
  // LegendScrollComponent,
  // LegendPlainComponent,
  // DataZoomComponent,
  // DataZoomInsideComponent,
  // DataZoomSliderComponent,
  // VisualMapComponent,
  // VisualMapContinuousComponent,
  // VisualMapPiecewiseComponent,
  // AriaComponent,
  // TransformComponent,
  DatasetComponent,
} from &#39;echarts/components&#39;;
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
  CanvasRenderer,
  // SVGRenderer,
} from &#39;echarts/renderers&#39;;
// Register the required components
echarts.use(
  [
    TitleComponent,
    TooltipComponent, 
    GridComponent, 
    BarChart, 
    CanvasRenderer, 
    HeatmapChart, 
    VisualMapComponent,
    VisualMapContinuousComponent,
    VisualMapPiecewiseComponent,
  ]
);
로그인 후 복사
로그인 후 복사
  1. 프로젝트 루트 디렉터리인 File project.package.json에 새 파일을 생성하거나 이름을 사용자 정의합니다. 이 파일은 미니 프로그램의 package.json이며, 다음 단계에서 미니 프로그램의 사용자 정의 빌드 npm 메소드를 추가하십시오. 이것의 목적은 node_modules
🎜project.package.json🎜
<ec-canvas 
  id=&#39;mychart-dom-area&#39; 
  canvas-id=&#39;mychart-area&#39; 
  echarts={echarts} // 将引入的 echarts 传给组件
  ec={this.state.ec}
/>
로그인 후 복사
로그인 후 복사
로그인 후 복사
  1. project.config의 설정에 미니 프로그램을 추가하여 npm 빌드 방법을 맞춤설정하세요. node_modules 및 miniprogram_npm 위치를 사용자 정의하여 npm 메소드 구축 🎜
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  })
  canvas.setChart(chart)
  const model = {
    yCates: [&#39;Saturday&#39;, &#39;Friday&#39;, &#39;Thursday&#39;,
      &#39;Wednesday&#39;, &#39;Tuesday&#39;, &#39;Monday&#39;,
      &#39;Sunday&#39;],
    xCates: [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;],
    data: [
      // [yCateIndex, xCateIndex, value]
      [0, 0, 5], [0, 1, 7], [0, 2, 3], [0, 3, 5], [0, 4, 2],
      [1, 0, 1], [1, 1, 2], [1, 2, 4], [1, 3, 8], [1, 4, 2],
      [2, 0, 2], [2, 1, 3], [2, 2, 8], [2, 3, 6], [2, 4, 7],
      [3, 0, 3], [3, 1, 7], [3, 2, 5], [3, 3, 1], [3, 4, 6],
      [4, 0, 3], [4, 1, 2], [4, 2, 7], [4, 3, 8], [4, 4, 9],
      [5, 0, 2], [5, 1, 2], [5, 2, 3], [5, 3, 4], [5, 4, 7],
      [6, 0, 6], [6, 1, 5], [6, 2, 3], [6, 3, 1], [6, 4, 2]
    ]
  }

  const data = model.data.map(function (item) {
    return [item[1], item[0], item[2] || &#39;-&#39;]
  })

  const option = {
    tooltip: {
      position: &#39;top&#39;
    },
    animation: false,
    grid: {
      bottom: 60,
      top: 10,
      left: 80
    },
    xAxis: {
      type: &#39;category&#39;,
      data: model.xCates
    },
    yAxis: {
      type: &#39;category&#39;,
      data: model.yCates
    },
    visualMap: {
      min: 1,
      max: 10,
      show: false,
      calculable: true,
      orient: &#39;horizontal&#39;,
      left: &#39;center&#39;,
      bottom: 10,
      inRange: {
        color: [&#39;#37A2DA&#39;, &#39;#32C5E9&#39;, &#39;#67E0E3&#39;, &#39;#91F2DE&#39;, &#39;#FFDB5C&#39;, &#39;#FF9F7F&#39;],
      }
    },
    series: [{
      name: &#39;Punch Card&#39;,
      type: &#39;heatmap&#39;,
      data: data,
      label: {
        normal: {
          show: true
        }
      },
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
        }
      }
    }]
  }

  chart.setOption(option)
  return chart
}

export default class Echarts extends React.Component {

  state = {
    ec: {
      onInit: initChart
    }
  }

  render () {
    return (
      <View className=&#39;echarts&#39;>
        <ec-canvas 
          id=&#39;mychart-dom-area&#39; 
          canvas-id=&#39;mychart-area&#39; 
          echarts={echarts} 
          ec={this.state.ec}
        />
      </View>
    )
  }
}
로그인 후 복사
로그인 후 복사
  1. Taro의 개발 또는 패키징 명령 실행</ code> 프로젝트 개발을 위한 </li></ol>rrreee<ol start="5"><li>애플릿 개발자 도구에서 npm을 빌드하세요. 참고: 미니 프로그램 개발 도구로 열리는 프로젝트 디렉터리는 <code>dist 폴더입니다.
🎜개발자 도구의 메뉴 표시줄을 클릭하세요: Tools--> Build npm🎜 🎜🎜

Echarts 소개🎜
  1. 전역 app.config.js에 추가하거나 echarts<를 사용해야 하는 단일 페이지 구성에 추가하세요. /code> 참조 구성요소 추가</li></ol>rrreee<ol start="2"><li>페이지에 <code>echarts를 도입합니다. npm에서 <code>를 도입할 수 있습니다. echarts, 로컬 사용자 정의 echarts를 도입하여 크기를 줄일 수도 있습니다.
rrreee
  1. 도입된 < code>echarts는 특정 사용법과 방법을 위해 구성요소
rrreee
  1. ec-canvas에 전달됩니다. 차트를 초기화하려면 < a href="https://github.com/ecomfe/echarts-for-weixin#%E5%88%9B%E5%BB%BA%E5%9B%BE%E8%A1을 참조하세요. %A8" target="_blank" ref="nofollow noopener noreferrer">Echarts 공식 애플릿 예시🎜
샘플 코드rrreee

주문형 타로 참조

🎜참조 코드 examples/taro-manual-load🎜🎜참고: 미니 프로그램 개발자 도구로 열리는 프로젝트 디렉터리는 패키지된 프로젝트 디렉터리입니다. dist 디렉토리🎜🎜준비🎜🎜1. 설치 종속성🎜
npm install echarts-for-weixin
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

2、在项目根目录中新建文件 project.package.json 或者自定义命名，此文件是小程序的 package.json，并在下一步中添加小程序自定义构建 npm 方式。并配置 config/index.js 中的 copy 选项，将 project.package.json 复制到 dist 目录下并且重命名为 package.json。并且复制 node_modules/echarts-for-weixin 至 dist/node_modules/echarts-for-weixin 避免在小程序开发者工具中打开的项目重新安装依赖

project.package.json

{
  "dependencies": {
    "echarts-for-weixin": "^1.0.2"
  }
}
로그인 후 복사
로그인 후 복사

config/index.js

{
  copy: {
    patterns: [
      { from: &#39;project.package.json&#39;, to: &#39;dist/package.json&#39; }, // 指定需要 copy 的文件
      { from: &#39;node_modules/echarts-for-weixin/&#39;, to: &#39;dist/node_modules/echarts-for-weixin/&#39; }
    ],
    options: {}
  }
}
로그인 후 복사
로그인 후 복사

3、在 project.config 的 setting 中添加小程序自定义构建 npm 方式，参考 自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式

{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}
로그인 후 복사
로그인 후 복사

4、执行 Taro 的开发或者打包命令进行项目开发

npm run dev:weapp
로그인 후 복사
로그인 후 복사
로그인 후 복사

5、小程序开发者工具中构建 npm。注意：小程序开发工具打开的项目目录是 dist 文件夹

点击开发者工具中的菜单栏：工具 --> 构建 npm

WeChat 애플릿에서 ECharts를 설치하고 참조하는 방법에 대한 자세한 설명은 무엇입니까?

引入 Echarts

1、在全局的 app.config.js 中添加或者在单个需要使用到 echarts 的页面配置中添加引用组件

{
  "usingComponents": {
    "ec-canvas": "echarts-for-weixin"
  }
}
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

2、在页面中引入 echarts/core 和需要的组件，Taro 打包会只打包引入的组件，这样达到按需引入的目的

// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from &#39;echarts/core&#39;;
// Import charts, all with Chart suffix
import {
  // LineChart,
  BarChart,
  // PieChart,
  // ScatterChart,
  // RadarChart,
  // MapChart,
  // TreeChart,
  // TreemapChart,
  // GraphChart,
  // GaugeChart,
  // FunnelChart,
  // ParallelChart,
  // SankeyChart,
  // BoxplotChart,
  // CandlestickChart,
  // EffectScatterChart,
  // LinesChart,
  // HeatmapChart,
  // PictorialBarChart,
  // ThemeRiverChart,
  // SunburstChart,
  // CustomChart,
} from &#39;echarts/charts&#39;;
// import components, all suffixed with Component
import {
  // GridSimpleComponent,
  GridComponent,
  // PolarComponent,
  // RadarComponent,
  // GeoComponent,
  // SingleAxisComponent,
  // ParallelComponent,
  // CalendarComponent,
  // GraphicComponent,
  // ToolboxComponent,
  TooltipComponent,
  // AxisPointerComponent,
  // BrushComponent,
  TitleComponent,
  // TimelineComponent,
  // MarkPointComponent,
  // MarkLineComponent,
  // MarkAreaComponent,
  // LegendComponent,
  // LegendScrollComponent,
  // LegendPlainComponent,
  // DataZoomComponent,
  // DataZoomInsideComponent,
  // DataZoomSliderComponent,
  // VisualMapComponent,
  // VisualMapContinuousComponent,
  // VisualMapPiecewiseComponent,
  // AriaComponent,
  // TransformComponent,
  DatasetComponent,
} from &#39;echarts/components&#39;;
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
  CanvasRenderer,
  // SVGRenderer,
} from &#39;echarts/renderers&#39;;
// Register the required components
echarts.use(
  [
    TitleComponent,
    TooltipComponent, 
    GridComponent, 
    BarChart, 
    CanvasRenderer, 
    HeatmapChart, 
    VisualMapComponent,
    VisualMapContinuousComponent,
    VisualMapPiecewiseComponent,
  ]
);
로그인 후 복사
로그인 후 복사

3、将引入的 echarts 传给组件

<ec-canvas 
  id=&#39;mychart-dom-area&#39; 
  canvas-id=&#39;mychart-area&#39; 
  echarts={echarts} // 将引入的 echarts 传给组件
  ec={this.state.ec}
/>
로그인 후 복사
로그인 후 복사
로그인 후 복사

4、ec-canvas 的具体用法和如何初始化图表请参考 Echarts 官方小程序示例

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  })
  canvas.setChart(chart)
  const model = {
    yCates: [&#39;Saturday&#39;, &#39;Friday&#39;, &#39;Thursday&#39;,
      &#39;Wednesday&#39;, &#39;Tuesday&#39;, &#39;Monday&#39;,
      &#39;Sunday&#39;],
    xCates: [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;],
    data: [
      // [yCateIndex, xCateIndex, value]
      [0, 0, 5], [0, 1, 7], [0, 2, 3], [0, 3, 5], [0, 4, 2],
      [1, 0, 1], [1, 1, 2], [1, 2, 4], [1, 3, 8], [1, 4, 2],
      [2, 0, 2], [2, 1, 3], [2, 2, 8], [2, 3, 6], [2, 4, 7],
      [3, 0, 3], [3, 1, 7], [3, 2, 5], [3, 3, 1], [3, 4, 6],
      [4, 0, 3], [4, 1, 2], [4, 2, 7], [4, 3, 8], [4, 4, 9],
      [5, 0, 2], [5, 1, 2], [5, 2, 3], [5, 3, 4], [5, 4, 7],
      [6, 0, 6], [6, 1, 5], [6, 2, 3], [6, 3, 1], [6, 4, 2]
    ]
  }

  const data = model.data.map(function (item) {
    return [item[1], item[0], item[2] || &#39;-&#39;]
  })

  const option = {
    tooltip: {
      position: &#39;top&#39;
    },
    animation: false,
    grid: {
      bottom: 60,
      top: 10,
      left: 80
    },
    xAxis: {
      type: &#39;category&#39;,
      data: model.xCates
    },
    yAxis: {
      type: &#39;category&#39;,
      data: model.yCates
    },
    visualMap: {
      min: 1,
      max: 10,
      show: false,
      calculable: true,
      orient: &#39;horizontal&#39;,
      left: &#39;center&#39;,
      bottom: 10,
      inRange: {
        color: [&#39;#37A2DA&#39;, &#39;#32C5E9&#39;, &#39;#67E0E3&#39;, &#39;#91F2DE&#39;, &#39;#FFDB5C&#39;, &#39;#FF9F7F&#39;],
      }
    },
    series: [{
      name: &#39;Punch Card&#39;,
      type: &#39;heatmap&#39;,
      data: data,
      label: {
        normal: {
          show: true
        }
      },
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
        }
      }
    }]
  }

  chart.setOption(option)
  return chart
}

export default class Echarts extends React.Component {

  state = {
    ec: {
      onInit: initChart
    }
  }

  render () {
    return (
      <View className=&#39;echarts&#39;>
        <ec-canvas 
          id=&#39;mychart-dom-area&#39; 
          canvas-id=&#39;mychart-area&#39; 
          echarts={echarts} 
          ec={this.state.ec}
        />
      </View>
    )
  }
}
로그인 후 복사
로그인 후 복사

5、可以查看小程序开发者工具中的依赖分析，确定文件大小以及是否正确按需引入

WeChat 애플릿에서 ECharts를 설치하고 참조하는 방법에 대한 자세한 설명은 무엇입니까?

更多编程相关知识，请访问：编程入门！！

위 내용은 WeChat 애플릿에서 ECharts를 설치하고 참조하는 방법에 대한 자세한 설명은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
echarts npm 微信小程序
원천：juejin.cn
이전 기사：마인드맵이란 무엇인가? 미니 프로그램에서 F6을 사용하여 마인드맵을 그리는 방법은 무엇입니까? 다음 기사：미니 프로그램과 앱 사이를 이동하는 방법에 대해 이야기해 보겠습니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
npx create-react-app 명령에 오류가 있습니다. 어떻게 해결합니까? 'npxcreate-react-app' 명령을 사용하여 새 React 앱을 만들려고 했지만 제대로 작동하지 않는 것 같습니다. 최근에 이 문제를 겪은 사람이 있나...
에서 2024-04-05 14:42:18
0
1
3511
CSS를 사용하여 Next.js의 Tic-Tac-Toe 보드에서 각 줄 아래의 공간을 제거하는 방법은 무엇입니까? 각 줄 아래에 공백이 있는 이유는 무엇입니까? (CSS) 저는 제 실력을 테스트하기 위해 Next.js tic-tac-toe 앱을 만들려고 합니다. 그러나 CSS...
에서 2024-04-05 11:39:02
0
1
1431
테이블 대신 DOM을 통해 데이터를 렌더링하는 방법 만들고 있는 애플리케이션에 대해 질문이 있습니다. Oracle 데이터베이스를 사용하고 있으며 데이터베이스에서 정보를 가져와 테이블을 통해 화면에 표시하고 있는데 ...
에서 2024-04-04 18:17:27
0
1
3567
Google SHOPIFY 사용자 로그인 후 승인 과정 Google에 로그인한 후 사용자의 인증된 계정에 대한 정보를 어디에서도 찾을 수 없습니다. laravel 기반 애플리케이션이 있는데, Google에 로그인하면 ...
에서 2024-04-04 09:40:59
0
1
310
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！