집 >위챗 애플릿 >미니 프로그램 개발 >WeChat 애플릿에서 ECharts를 설치하고 참조하는 방법에 대한 자세한 설명은 무엇입니까?

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

青灯夜游앞으로: 2021-10-19 10:55:184601검색

이 글에서는 npm을 사용하여 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 &#39;echarts&#39; // 从 npm 引入 echarts
import * as echarts from &#39;./echarts&#39; // 或者从本地引入自定义构建的 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

准备工作

安装依赖

npm install echarts-for-weixin

在项目根目录中新建文件 project.package.json 或者自定义命名，此文件是小程序的 package.json，并在下一步中添加小程序自定义构建 npm 方式。这么做的目的是为了能够共享项目 node_modules

project.package.json

{
  "dependencies": {
    "echarts": "^5.1.2",
    "echarts-for-weixin": "^1.0.2"
  }
}

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

{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "../project.package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

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

npm run dev:weapp

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

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

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

引入 Echarts

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

{
  "usingComponents": {
    "ec-canvas": "echarts-for-weixin"
  }
}

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

import * as echarts from &#39;echarts&#39; // 从 npm 引入 echarts
import * as echarts from &#39;./echarts&#39; // 或者从本地引入自定义构建的 echarts

将引入的 echarts 传给组件

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

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

示例代码

function initChart(canvas, width, height) {  const chart = echarts.init(canvas, null, {    width: width,    height: height
  })
  canvas.setChart(chart)  const model = {    yCates: ['Saturday', 'Friday', 'Thursday',      'Wednesday', 'Tuesday', 'Monday',      'Sunday'],    xCates: ['1', '2', '3', '4', '5'],    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] || '-']
  })  const option = {    tooltip: {      position: 'top'
    },    animation: false,    grid: {      bottom: 60,      top: 10,      left: 80
    },    xAxis: {      type: 'category',      data: model.xCates
    },    yAxis: {      type: 'category',      data: model.yCates
    },    visualMap: {      min: 1,      max: 10,      show: false,      calculable: true,      orient: 'horizontal',      left: 'center',      bottom: 10,      inRange: {        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
      }
    },    series: [{      name: 'Punch Card',      type: 'heatmap',      data: data,      label: {        normal: {          show: true
        }
      },      itemStyle: {        emphasis: {          shadowBlur: 10,          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }

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

  state = {    ec: {      onInit: initChart
    }
  }

  render () {    return (      <view>        <ec-canvas></ec-canvas>      </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 🎜

준비🎜

종속성 설치

// 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,
  ]
);

프로젝트 루트 디렉터리인 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}
/>

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>
    )
  }
}

Taro의 개발 또는 패키징 명령 실행 code> 프로젝트 개발을 위한

rrreee

애플릿 개발자 도구에서 npm을 빌드하세요. 참고: 미니 프로그램 개발 도구로 열리는 프로젝트 디렉터리는 dist 폴더입니다.

🎜개발자 도구의 메뉴 표시줄을 클릭하세요: Tools--> Build npm🎜 🎜🎜

Echarts 소개🎜
전역 `app.config.js`에 추가하거나 `echarts 참조 구성요소 추가`
rrreee
페이지에 `echarts`를 도입합니다. `npm에서 <code>를 도입할 수 있습니다.` echarts, 로컬 사용자 정의 `echarts`를 도입하여 크기를 줄일 수도 있습니다.
rrreee
도입된 echarts는 특정 사용법과 방법을 위해 구성요소
rrreee
`ec-canvas`에 전달됩니다. 차트를 초기화하려면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

json echarts npm for copy JS canvas apache 微信小程序 taro

성명：

이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：마인드맵이란 무엇인가? 미니 프로그램에서 F6을 사용하여 마인드맵을 그리는 방법은 무엇입니까?다음 기사：마인드맵이란 무엇인가? 미니 프로그램에서 F6을 사용하여 마인드맵을 그리는 방법은 무엇입니까?