一、下載依賴

1.1、獲取mpvue-echarts組件

可以先隨便建個文件夾，然后 npm init。運行下面的命令行，下載依賴

npm install echarts mpvue-echarts

找到node_modules\mpvue-echarts\下的文件，保留src文件夾，其他刪除，復(fù)制mpvue-echarts文件夾到項目的components中

1.2、獲取定制echarts的js文件
在https://echarts.apache.org/zh/builder.html定制echarts的js文件，然后下載，放到common目錄下

二、頁面運用
需要準(zhǔn)備的東西都已經(jīng)好了，接下來正片開始??！

<template>
  <view class="echarts-wrap">
    <my-echarts
      id="main"
      ref="mapChart"
      :onInit="initChart"
    />
  </view>
</template>
 
<script>
import * as echarts from "@/components/common/echarts.min.js";  //這里根據(jù)自己存放的路徑修改
import myEcharts from "@/components/mpvue-echarts/src/echarts.vue"; //這里根據(jù)自己存放的路徑修改

let chart = null;  //放外層方便拿到echart實例
export default {
  components: {
    myEcharts,
  },
  data() {
    return {
      echarts,
    };
  },
  onReady() {},
  mounted() {},
  methods: {
    initChart(canvas, width, height) {
			console.log(echarts,'echarts',1)
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
      });
      canvas.setChart(chart);
			let option = {
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '5%',
					containLabel: true
				},
				xAxis: {
					name: '時間',
					type: 'category',
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
				},
				yAxis: {
					show: true,
					name: '銷量',
					type: 'value'
				},
				dataZoom: [{
					type: 'inside',
					filterMode: 'empty',
					startValue: 0,
					endValue: 20,
					zoomOnMouseWheel: false
				}, {
					type: 'slider'
				}],
				series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "line",
          },
        ]
			}
      chart.setOption(option);

      return chart; // 返回 chart 后可以自動綁定觸摸操作
    },
    updateData(){
				console.log(echarts,'echarts',2)
        setTimeout(()=>{
            chart.setOption({
                series:[{
                    data:[30, 90, 111, 20, 70, 88, 11]
                }]
            })
        },1000)
    },
  },
};
</script>
 
<style>
.echarts-wrap {
  width: 100%;
  height: 300px;
}
</style>
	

運行時報錯

解決方法：
1、找到components–》mpvue-echarts–》src–》echarts.vue

import * as echarts from "@/components/common/echarts.min.js";

2、注釋props中的echarts，如下

3、在 onReady方法中添加

this.echarts = echarts

4、init方法中修改以下3處
const canvasId = this.canvasId; //------修改------
this.ctx = wx.createCanvasContext(canvasId,this);//------修改------
const query = wx.createSelectorQuery().in(this); //------修改------

文章來源地址http://www.zghlxwxcb.cn/news/detail-616777.html

到了這里，關(guān)于uniapp微信小程序中使用echarts的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！