Introduce ECharts through NPM in wechat applet

Apache ECharts officially provides code examples and ec-Canvas components for using ECharts in wechat applets, but does not release NPM packages.

Ec-canvas component to echarts can support NPM to introduce Echarts or local custom built Echarts, more in line with the Web development experience.

And release NPM package, support small programs through NPM installation use. Taro also supports the introduction of Echarts on demand to reduce packaging volume.

The installation

npm install echarts-for-weixin
Copy the code

Applet reference

Refer to tools/demo

Start by adding the usingComponents configuration field to the JSON file on the page

{
  "usingComponents": {
    "ec-canvas": "echarts-for-weixin"}}Copy the code

Project root directory is createdpackage.jsonAnd execute NPM install to install dependencies

{
  "dependencies": {
    "echarts": "^ 5.1.2." "."echarts-for-weixin": "^ 1.0.0"}}Copy the code

Build NPM in applets developer tools

Click on the developer Tools menu bar: Tools –> Build NPM

Introduced in the pageechartsfromnpmThe introduction ofecharts, can also introduce a local custom buildechartsTo reduce the volume

import * as echarts from 'echarts' // Import echarts from NPM
import * as echarts from './echarts' // Or import custom built Echarts locally
Copy the code

This component can then be used directly in THE WXML of the corresponding page

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

ec-canvasPlease refer to the specific usage and how to initialize the diagramEcharts official applets example

The sample code

import * as echarts from 'echarts'

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: 'axis'.axisPointer: {            // Axis indicator. Axis trigger works
        type: 'shadow'        / / the default value is linear, optional: 'the line' | 'shadow'
      },
      confine: true
    },
    legend: {
      data: ['heat'.'positive'.'negative']},grid: {
      left: 20.right: 20.bottom: 15.top: 40.containLabel: true
    },
    xAxis: [{type: 'value'.axisLine: {
          lineStyle: {
            color: '# 999'}},axisLabel: {
          color: '# 666'}}].yAxis: [{type: 'category'.axisTick: { show: false },
        data: ['Motor Home'.'Today's Headlines'.Baidu Tieba.'A bit of information'.'WeChat'.'weibo'.'zhihu'].axisLine: {
          lineStyle: {
            color: '# 999'}},axisLabel: {
          color: '# 666'}}].series: [{name: 'heat'.type: 'bar'.label: {
          normal: {
            show: true.position: 'inside'}},data: [300.270.340.344.300.320.310].itemStyle: {
          // emphasis: {
          // color: '#37a2da'
          // }}}, {name: 'positive'.type: 'bar'.stack: 'total'.label: {
          normal: {
            show: true}},data: [120.102.141.174.190.250.220].itemStyle: {
          // emphasis: {
          // color: '#32c5e9'
          // }}}, {name: 'negative'.type: 'bar'.stack: 'total'.label: {
          normal: {
            show: true.position: 'left'}},data: [-20, -32, -21, -34, -90, -130, -110].itemStyle: {
          // emphasis: {
          // color: '#67e0e3'
          // }}}}; chart.setOption(option);return chart;
}

Page({
  data: {
    echarts,
    ec: {
      onInit: initChart
    }
  },
  onReady() {
    setTimeout(function () {
      // How to get the chart instance
      console.log(chart)
    }, 2000); }})Copy the code

Taro reference

See examples/taro

The preparatory work

Install dependencies

npm install echarts-for-weixin
Copy the code

Create a new file in the project root directoryproject.package.jsonOr custom named, this file is small programpackage.jsonAnd in the next step add small program custom build NPM way. The goal is to be able to share projectsnode_modules

project.package.json

{
  "dependencies": {
    "echarts": "^ 5.1.2." "."echarts-for-weixin": "^ 1.0.2"}}Copy the code

inproject.config 的 settingAdd small program custom build NPM way, refer toCustomizing the way NPM is built for node_modules and miniprogram_npm locations

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

performTaroOr package commands for project development

npm run dev:weapp
Copy the code

Build NPM in applets developer tools. Note: The project directory that the applets development tool opens isdistfolder

Click on the developer Tools menu bar: Tools –> Build NPM

The introduction of Echarts

In the globalapp.config.jsAdd or use to a single needechartsAdd reference components to the page configuration

{
  "usingComponents": {
    "ec-canvas": "echarts-for-weixin"}}Copy the code

Introduced in the pageechartsfromnpmThe introduction ofecharts, can also introduce a local custom buildechartsTo reduce the volume

import * as echarts from 'echarts' // Import echarts from NPM
import * as echarts from './echarts' // Or import custom built Echarts locally
Copy the code

Will introduce theechartsTo the component

<ec-canvas 
  id='mychart-dom-area' 
  canvas-id='mychart-area' 
  echarts={echarts} // Pass the imported Echarts to the component
  ec={this.state.ec}
/>
Copy the code

ec-canvasPlease refer to the specific usage and how to initialize the diagramEcharts official applets example

The sample code

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] | |The '-']})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 className='echarts'>
        <ec-canvas 
          id='mychart-dom-area' 
          canvas-id='mychart-area' 
          echarts={echarts} 
          ec={this.state.ec}
        />
      </View>)}}Copy the code

Taro is quoted as needed

See examples/ tarle-manual-Load

Note: The project directory that the applets developer tools open is the packaged dist directory

The preparatory work

Install dependencies

npm install echarts-for-weixin
Copy the code

Create a new file in the project root directoryproject.package.jsonOr custom named, this file is small programpackage.jsonAnd in the next step add small program custom build NPM way. And configureconfig/index.jsIn thecopyOptions,project.package.jsonCopied to thedistDirectory and rename it topackage.json. And copynode_modules/echarts-for-weixin 至 dist/node_modules/echarts-for-weixinAvoid reinstalling dependencies for projects opened in applets developer tools

project.package.json

{
  "dependencies": {
    "echarts-for-weixin": "^ 1.0.2"}}Copy the code

config/index.js

{
  copy: {
    patterns: [{from: 'project.package.json'.to: 'dist/package.json' }, // Specify the file to copy
      { from: 'node_modules/echarts-for-weixin/'.to: 'dist/node_modules/echarts-for-weixin/'}].options: {}}}Copy the code

inproject.config 的 settingAdd small program custom build NPM way, refer toCustomizing the way NPM is built for node_modules and miniprogram_npm locations

{
  "setting": {
    "packNpmManually": true."packNpmRelationList": [{"packageJsonPath": "./package.json"."miniprogramNpmDistDir": ". /"}}}]Copy the code

performTaroOr package commands for project development

npm run dev:weapp
Copy the code

Build NPM in applets developer tools. Note: The project directory that the applets development tool opens isdistfolder

Click on the developer Tools menu bar: Tools –> Build NPM

The introduction of Echarts

In the globalapp.config.jsAdd or use to a single needechartsAdd reference components to the page configuration

{
  "usingComponents": {
    "ec-canvas": "echarts-for-weixin"}}Copy the code

Introduced in the pageecharts/coreAnd required components, Taro packaging will only package imported components, so as to achieve the purpose of importing on demand

// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from 'echarts/core';
// 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 'echarts/charts';
// 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 'echarts/components';
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
  CanvasRenderer,
  // SVGRenderer,
} from 'echarts/renderers';
// Register the required components
echarts.use(
  [
    TitleComponent,
    TooltipComponent, 
    GridComponent, 
    BarChart, 
    CanvasRenderer, 
    HeatmapChart, 
    VisualMapComponent,
    VisualMapContinuousComponent,
    VisualMapPiecewiseComponent,
  ]
);
Copy the code

Will introduce theechartsTo the component

<ec-canvas 
  id='mychart-dom-area' 
  canvas-id='mychart-area' 
  echarts={echarts} // Pass the imported Echarts to the component
  ec={this.state.ec}
/>
Copy the code

ec-canvasPlease refer to the specific usage and how to initialize the diagramEcharts official applets example

The sample code

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] | |The '-']})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 className='echarts'>
        <ec-canvas 
          id='mychart-dom-area' 
          canvas-id='mychart-area' 
          echarts={echarts} 
          ec={this.state.ec}
        />
      </View>)}}Copy the code

You can look at dependency analysis in the applets developer tools to determine the file size and whether it is properly imported on demand

Refer to the link

In wechat, use Apache ECharts (Incubating)
NPM support
Develop third-party custom components
Get started with the WeUI component library
Applets WeUI component library

Introduce ECharts through NPM in wechat applet

The installation

Applet reference

Taro reference

The preparatory work

The introduction of Echarts

Taro is quoted as needed

The preparatory work

The introduction of Echarts

Refer to the link

Related Posts

Styled components Explore in depth how the Styled components work

V8 garbage collection? Just read this one!

React simple data graphics – Learn how to make a progress bar