This article will introduce to you how to use npm to introduce ECharts into WeChat applet. I hope it will be helpful to you!

Apache ECharts officially provides code examples and ec-canvas components for using Echarts in WeChat mini programs, but it has not Publish the npm package.

This project is modified on top of the official code to support ec-canvas The component is passed in echarts to support npm Introduction echarts Or echarts after local customization, which is more in line with Web development experience.

And publish the npm package to support the installation and use of small programs through npm. And supports Taro to introduce echarts on demand to reduce the packaging size. [Related learning recommendations: 小 program development tutorial]

Installation

npm install echarts-for-weixin

小program reference

Reference codetools/demo

1. First, add the usingComponents configuration field to the json file of the page

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

2. Create the project root directory package.json and execute npm install to install dependencies

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

3. Build npm in the mini program developer tools

Click the menu bar in the developer tools: Tools--> Build npm

4. Introduce echarts into the page, you can introduce echarts from npm, or you can introduce local custom built echarts to reduce Volume

import * as echarts from 'echarts' // 從 npm 引入 echarts
import * as echarts from './echarts' // 或者從本地引入自定義構(gòu)建的 echarts

5. Then you can use the component 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>

6. For the specific usage of ec-canvas and how to initialize the chart, please refer toEcharts Official Mini Program Example

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: {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
        type: 'shadow'        // 默認(rèn)為直線，可選為：'line' | 'shadow'
      },
      confine: true
    },
    legend: {
      data: ['熱度', '正面', '負(fù)面']
    },
    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: ['汽車之家', '今日頭條', '百度貼吧', '一點資訊', '微信', '微博', '知乎'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    series: [
      {
        name: '熱度',
        type: 'bar',
        label: {
          normal: {
            show: true,
            position: 'inside'
          }
        },
        data: [300, 270, 340, 344, 300, 320, 310],
        itemStyle: {
          // emphasis: {
          //   color: '#37a2da'
          // }
        }
      },
      {
        name: '正面',
        type: 'bar',
        stack: '總量',
        label: {
          normal: {
            show: true
          }
        },
        data: [120, 102, 141, 174, 190, 250, 220],
        itemStyle: {
          // emphasis: {
          //   color: '#32c5e9'
          // }
        }
      },
      {
        name: '負(fù)面',
        type: 'bar',
        stack: '總量',
        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 () {
      // 獲取 chart 實例的方式
      console.log(chart)
    }, 2000);
  }
})

Taro Reference

Reference Codeexamples/taro

Preparation

1. Installation dependencies

npm install echarts-for-weixin

2. Create a new file in the project root directoryproject.package.json Or customize the name. This file is the applet package.json, and add the applet to customize the npm build method in the next step. The purpose of this is to be able to share the projectnode_modules

project.package.json

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

3. at Add a small program to customize the npm building method in setting of project.config, refer to Customizing the node_modules and miniprogram_npm locations for building npm method

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

4. Execute the development or packaging commands of Taro for project development

npm run dev:weapp

5. Build npm in the applet developer tool. Note: The project directory opened by the mini program development tool is the dist folder

Click the menu bar in the developer tools: Tools--> Build npm

Introduce Echarts

1. Add it to the global app.config.js or use it individually if you need echarts Add the reference component

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

2. to the page configuration and introduce echarts into the page. You can introduce echarts from npm, You can also introduce local custom built echarts to reduce the size

import * as echarts from 'echarts' // 從 npm 引入 echarts
import * as echarts from './echarts' // 或者從本地引入自定義構(gòu)建的 echarts

3. Pass the introduced echarts to the component

<ec-canvas 
  id=&#39;mychart-dom-area&#39; 
  canvas-id=&#39;mychart-area&#39; 
  echarts={echarts} // 將引入的 echarts 傳給組件
  ec={this.state.ec}
/>

4. ec-canvas For specific usage and how to initialize the chart, please refer to Echarts official applet example

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 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>
    )
  }
}復(fù)制代碼

Taro on-demand reference

Reference codeexamples/taro-manual-load

Note: Mini Program Developer Tools are open The project directory is the packaged dist directory

Preparation work

1. Install dependencies

npm install echarts-for-weixin

2、在項目根目錄中新建文件 project.package.json 或者自定義命名，此文件是小程序的 package.json，并在下一步中添加小程序自定義構(gòu)建 npm 方式。并配置 config/index.js 中的 copy 選項，將 project.package.json 復(fù)制到 dist 目錄下并且重命名為 package.json。并且復(fù)制 node_modules/echarts-for-weixin 至 dist/node_modules/echarts-for-weixin 避免在小程序開發(fā)者工具中打開的項目重新安裝依賴

project.package.json

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

config/index.js

{
  copy: {
    patterns: [
      { from: 'project.package.json', to: 'dist/package.json' }, // 指定需要 copy 的文件
      { from: 'node_modules/echarts-for-weixin/', to: 'dist/node_modules/echarts-for-weixin/' }
    ],
    options: {}
  }
}

3、在 project.config 的 setting 中添加小程序自定義構(gòu)建 npm 方式，參考 自定義 node_modules 和 miniprogram_npm 位置的構(gòu)建 npm 方式

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

4、執(zhí)行 Taro 的開發(fā)或者打包命令進(jìn)行項目開發(fā)

npm run dev:weapp

5、小程序開發(fā)者工具中構(gòu)建 npm。注意：小程序開發(fā)工具打開的項目目錄是 dist 文件夾

點擊開發(fā)者工具中的菜單欄：工具 --> 構(gòu)建 npm

引入 Echarts

1、在全局的 app.config.js 中添加或者在單個需要使用到 echarts 的頁面配置中添加引用組件

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

2、在頁面中引入 echarts/core 和需要的組件，Taro 打包會只打包引入的組件，這樣達(dá)到按需引入的目的

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

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: ['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 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、可以查看小程序開發(fā)者工具中的依賴分析，確定文件大小以及是否正確按需引入

更多編程相關(guān)知識，請訪問：編程入門??！

The above is the detailed content of Detailed explanation of how to install and reference ECharts in WeChat applet?. For more information, please follow other related articles on the PHP Chinese website!