Penjelasan terperinci tentang cara memasang dan merujuk ECharts dalam program mini WeChat?

Artikel ini akan memperkenalkan kepada anda cara menggunakan npm untuk memperkenalkan ECharts ke dalam program mini WeChat saya harap ia akan membantu anda!

Apache ECharts secara rasmi menyediakan contoh kod dan komponen untuk menggunakan Echartsec-canvas dalam program mini WeChat, tetapi pakej npm belum dikeluarkan .

Projek ini diubah suai di atas kod rasmi untuk menyokong ec-canvas komponen yang dihantar ke echarts Ia boleh menyokong npm pengenalan echarts atau binaan tersuai tempatan echarts, yang lebih banyak. selaras dengan Web pengalaman.

dan lepaskan pakej npm untuk menyokong pemasangan dan penggunaan program mini melalui npm. Dan menyokong Taro memperkenalkan echarts atas permintaan untuk mengurangkan saiz pembungkusan. [Cadangan pembelajaran berkaitan: Tutorial pembangunan program mini]

Pemasangan

npm install echarts-for-weixin

Rujukan program mini

Kod rujukantools/demo

1. Mula-mula, tambah medan konfigurasi usingComponents pada fail json halaman

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

2. Cipta direktori akar projek package.json dan jalankan pemasangan npm untuk memasang dependensi

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

3. Small Build npm

dalam alat pembangun program Klik bar menu dalam alat pembangun: Tools--> > 4. Perkenalkan ia ke dalam halaman

, anda boleh mengimport

daripada , atau anda boleh mengimport tersuai tempatan

untuk mengurangkan saiz

echartsnpm5 boleh menggunakannya terus dalam wxml halaman yang sepadan Untuk penggunaan khusus komponen ini echartsecharts

6,

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

dan cara untuk memulakan carta, sila rujuk

contoh applet rasmi Echarts

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

ec-canvasPetikan Taro Kod rujukan

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: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      confine: true
    },
    legend: {
      data: ['热度', '正面', '负面']
    },
    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: '负面',
        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);
  }
})

Kerja penyediaan

examples/taroKebergantungan pemasangan

1. Buat fail baharu dalam direktori akar projek
Atau sesuaikan nama, fail ini ialah

program mini, dan tambah kaedah npm binaan tersuai program mini dalam langkah seterusnya. Tujuannya adalah untuk dapat berkongsi projek

npm install echarts-for-weixin

2. project.package.jsonpackage.jsonnode_modules

untuk menambah penyesuaian program mini dalam project.package.json's

Untuk cara membina npm, rujuk

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

Membina kaedah npm untuk menyesuaikan lokasi node_modules dan miniprogram_npm

3. project.configsettingLaksanakan arahan pembangunan atau pembungkusan
untuk pembangunan projek

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

4. TaroBina npm dalam alatan pembangun program mini. Nota: Direktori projek yang dibuka oleh alat pembangunan program mini ialah folder

npm run dev:weapp

Klik bar menu dalam alat pembangun: Alat --> Build npm

5. dist

Perkenalkan Echarts

Tambahkannya dalam global atau tambah komponen rujukan

dalam konfigurasi halaman tunggal yang perlu gunakan

1. app.config.jsPerkenalkan echarts ke dalam halaman, anda boleh memperkenalkan
daripada

, atau anda boleh memperkenalkan terbina tempatan

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

untuk mengurangkan saiz

2. echartsnpmecharts Hantar echarts yang diimport kepada komponen

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

3. echarts Untuk penggunaan khusus dan cara memulakan carta, sila rujuk
Contoh applet rasmi Echarts

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

4. ec-canvasKod contoh

Rujukan Taro atas permintaan

Kod rujukan

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>
    )
  }
}复制代码

Nota: Direktori projek yang dibuka oleh alat pembangun program mini ialah direktori

yang dibungkus

Kerja penyediaanexamples/taro-manual-load

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: '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 中添加小程序自定义构建 npm 方式，参考 自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式

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

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

npm run dev:weapp

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

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

引入 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 '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、可以查看小程序开发者工具中的依赖分析，确定文件大小以及是否正确按需引入

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

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara memasang dan merujuk ECharts dalam program mini WeChat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!