uniapp微信小程序中使用echarts-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序中使用echarts。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、下载依赖

1.1、获取mpvue-echarts组件

可以先随便建个文件夹，然后 npm init。运行下面的命令行，下载依赖

npm install echarts mpvue-echarts

找到node_modules\mpvue-echarts\下的文件，保留src文件夹，其他删除，复制mpvue-echarts文件夹到项目的components中

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

uniapp小程序echarts,前端项目问题记录,echarts,uni-app,微信小程序

二、页面运用
需要准备的东西都已经好了，接下来正片开始！！

<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";  //这里根据自己存放的路径修改
import myEcharts from "@/components/mpvue-echarts/src/echarts.vue"; //这里根据自己存放的路径修改

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>

运行时报错
uniapp小程序echarts,前端项目问题记录,echarts,uni-app,微信小程序
解决方法：
1、找到components–》mpvue-echarts–》src–》echarts.vue

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

2、注释props中的echarts，如下

uniapp小程序echarts,前端项目问题记录,echarts,uni-app,微信小程序
3、在 onReady方法中添加

this.echarts = echarts

uniapp小程序echarts,前端项目问题记录,echarts,uni-app,微信小程序

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

uniapp小程序echarts,前端项目问题记录,echarts,uni-app,微信小程序文章来源地址https://www.toymoban.com/news/detail-616777.html