Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to install and quote ECharts in WeChat Mini Programs". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to install and quote ECharts in WeChat Mini Programs.

Apache ECharts officially provided code examples and ec-canvas components for using Echarts in WeChat Mini Programs, but did not release the npm package.

This project modifies the official code to support the introduction of ec-canvas components into echarts to support npm to introduce echarts or local custom built echarts, which is more in line with the Web development experience.

And release npm package, support Mini Program through npm installation and use. It also supports Taro to introduce echarts to reduce the packaging volume as needed. [recommended for related study: Mini Program Development tutorial]

Install npm install echarts-for-weixin Mini Program reference

Reference code tools/demo

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

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

2. Create package.json in the root directory of the project and execute npm install installation dependencies

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

3. Build npm in Mini Program developer tools

Click the menu bar in developer tools: tools-- > build npm

4. By introducing echarts into the page, you can introduce echarts from npm or custom built echarts locally to reduce the volume.

Import * as echarts from 'echarts' / / introduce echartsimport * as echarts from'. / echarts' / / from npm or introduce custom-built echarts locally

5. You can then use this component directly in the wxml of the corresponding page

6. For more information on how to use ec-canvas and how to initialize it, please refer to Echarts's 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: {/ / axis indicator, axis trigger valid type:' shadow' / / defaults to straight line Optional: 'line' |' shadow'}, confine: true}, legend: {data: ['hot', '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: [' Auto House', 'Jinri Toutiao' 'Baidu Tieba','a little information', 'Wechat', 'Weibo', 'Zhihu'], axisLine: {lineStyle: {color:'# 999'}}, axisLabel: {color:'# 666'}}], series: [{name: 'hot' Type: 'bar', label: {normal: {show: true, position:' inside'}}, data: [300,270,340,344,300,320,310] ItemStyle: {/ / emphasis: {/ / color:'# 37a2da' / /}, {name: 'front', 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 obtain chart instance console.log (chart)}, 2000);}) Taro reference

Reference code examples/taro

Preparatory work

Installation dependency

Npm install echarts-for-weixin

Create a new file project.package.json or custom name in the root directory of the project, which is the package.json of Mini Program, and add Mini Program custom build npm method in the next step. The purpose of this is to be able to share the project node_modules

Project.package.json

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

Add Mini Program custom construction npm method to setting of project.config. Refer to the construction npm method of custom node_modules and miniprogram_npm locations.

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

Execute Taro development or packaging commands for project development

Npm run dev:weapp

Build npm in Mini Program developer tools. Note: the project directory opened by the Mini Program development tool is the dist folder

Click the menu bar in developer tools: tools-- > build npm

Introduction of Echarts

Add reference components to the global app.config.js or to a single page configuration that needs to be used to echarts

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

By introducing echarts into the page, you can introduce echarts from npm or a locally customized echarts to reduce the size

Import * as echarts from 'echarts' / / introduce echartsimport * as echarts from'. / echarts' / / from npm or introduce custom-built echarts locally

Pass the incoming echarts to the component

For more information on how to use ec-canvas and how to initialize it, please refer to the Echarts official Mini Program example.

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, 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: ['# 37A2Daqing,'# 32C5E9examples,'# 67E0E3areas,'# 91F2DEVE,'# FFDB5C','# FF9F7F'],} Series: [{name: 'Punch Card', type:' heatmap', data: data, label: {normal: {show: true}}, itemStyle: {emphasis: {shadowBlur: 10, shadowColor: 'rgba (0,0,0) Chart.setOption (option) return chart} export default class Echarts extends React.Component {state = {ec: {onInit: initChart}} render () {return ()} Taro on demand reference

Reference code examples/taro-manual-load

Note: the project directory opened by Mini Program developer tool is the packaged dist directory.

Preparatory work

1. Installation dependency

Npm install echarts-for-weixin

2. Create a new file project.package.json or custom name in the root directory of the project. This file is the package.json of Mini Program, and in the next step, add Mini Program custom construction npm method. And configure the copy option in config/index.js, copy the project.package.json to the dist directory and rename it to package.json. And copy node_modules/echarts-for-weixin to dist/node_modules/echarts-for-weixin to avoid reinstalling dependencies on projects opened in Mini Program developer tools

Project.package.json

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

Config/index.js

{copy: {patterns: [{from: 'project.package.json', to:' dist/package.json'}, / / specify the files that need copy {from: 'node_modules/echarts-for-weixin/', to:' dist/node_modules/echarts-for-weixin/'}], options: {}

3. Add Mini Program custom construction npm method to the setting of project.config. Refer to the construction npm method of custom node_modules and miniprogram_npm locations.

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

4. Execute Taro development or packaging commands for project development

Npm run dev:weapp

5. Build npm in Mini Program developer tools. Note: the project directory opened by the Mini Program development tool is the dist folder

Click the menu bar in developer tools: tools-- > build npm

Introduction of Echarts

1. Add reference components to the global app.config.js or to a single page configuration that needs to be used in echarts

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

2. Introduce echarts/core and required components into the page, and Taro packaging will package only the introduced components, so as to achieve the purpose of introducing them 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 suffiximport {/ / 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 Componentimport {/ / 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 stepimport {CanvasRenderer, / / SVGRenderer,} from 'echarts/renderers';// Register the required componentsecharts.use ([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer, HeatmapChart, VisualMapComponent, VisualMapContinuousComponent, VisualMapPiecewiseComponent,])

3. Pass the introduced echarts to the component

4. For more information on how to use ec-canvas and how to initialize it, please refer to Echarts's official Mini Program 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, 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: ['# 37A2Daqing,'# 32C5E9examples,'# 67E0E3areas,'# 91F2DEVE,'# FFDB5C','# FF9F7F'],} Series: [{name: 'Punch Card', type:' heatmap', data: data, label: {normal: {show: true}}, itemStyle: {emphasis: {shadowBlur: 10, shadowColor: 'rgba (0,0,0) Chart.setOption (option) return chart} export default class Echarts extends React.Component {state = {ec: {onInit: initChart}} render () {return ()}}

5. You can check the dependency analysis in Mini Program developer tools to determine the file size and whether it is introduced correctly on demand.

At this point, I believe you have a deeper understanding of "how to install and quote ECharts in WeChat Mini Programs". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.