小程序引用echarts制作折线图

js部分:

import * as echarts from '../../../ec-canvas/echarts.js';
import $http from '../../../utils/fly.js';

var Chart=null;
const app = getApp();
Component({
	/**
	 * 组件的属性列表
	 */
	data: {
		// total:0,      //待审批条数
		// total2:0,			//已审批条数
		busDatatype:'1',
		 ec: {
		
		      onInit: function (canvas, width, height) {
		
		        chart = echarts.init(canvas, null, {
		
		          width: width,
		
		          height: height
		
		        });
		
		        canvas.setChart(chart);
		
		        return chart;
		
		      },
		
		      lazyLoad: true // 延迟加载
		
				}

	},

	properties: {
		mes: {
			type: String,
			value: ''
		},
	},
	attached() {
		// this.searchBusiness(1, 0);  //折线图拿到数据
		// this.searchSM(1, 0, '2');
		// this.searchUserInfor(1);
		this.getList()
		 this.echartsComponnet = this.selectComponent('#mychart');
		    if (!Chart) {
		      this.init_echarts(); //初始化图表
		    } else {
		      this.setOption(Chart); //更新数据
		    }
	},
	methods:{

		//折线图请求数据
	// 	searchBusiness:function(pageNum, pageLength){    
	// 		this.$axios.post('/api/user/approverDownload', qs.stringify({   //折线
	// 				'type': this.busDatatype,
	// 				'pageNum':pageNum !== 0 ? pageNum : pageLength,
	// 		})).then(res=>{
	// 				// 成功后执行
	// 				if(res.data.errCode===0){
	// 						this.busData=res.data.data.list;
	// 						this.busDatatotal=res.data.data.total;
	// 						if(pageLength === null) return;
	// 						if(pageLength === 0) {
	// 								pageLength = Math.ceil(this.busDatatotal / 20);
	// 								if(pageLength === 0) {
	// 										return;
	// 								}
	// 								this.searchBusiness(0, pageLength);
	// 						}else if(pageLength > 0) {
	// 								this.initReviewChart();
	// 						}
	// 				}els
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的小程序 Echarts 折线图示例。你需要在小程序开发工具中新建一个页面,然后将下面的代码替换到对应的 .wxml 和 .js 文件中。 .wxml 文件代码: ```html <view class="container"> <ec-canvas id="chart" canvas-id="mychart" ec="{{ ec }}"></ec-canvas> </view> ``` .js 文件代码: ```javascript import * as echarts from '../../ec-canvas/echarts'; Page({ data: { ec: { lazyLoad: true } }, onLoad: function (options) { this.initChart(); }, initChart: function () { let that = this; let chart = null; let options = { title: { text: 'Echarts 折线图示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: {}, series: [{ name: '销量', type: 'line', data: [5, 20, 36, 10, 10, 20, 5] }] }; this.selectComponent('#chart').init((canvas, width, height) => { chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); chart.setOption(options); return chart; }); } }); ``` 这个示例中,使用了小程序提供的 ec-canvas 组件来绘制 Echarts 图表。在 onLoad 函数中调用了 initChart 函数来初始化图表,并在 initChart 函数中使用了 selectComponent 方法选择了 ec-canvas 组件,并通过调用它的 init 方法初始化了 Echarts 实例。最后,通过 setOption 方法设置了图表的配置项和数据系列。 需要注意的是,由于小程序不支持动态引入 Echarts 库,所以我们需要将 Echarts 的代码放在项目中,或者使用如上代码中的 import * as echarts from '../../ec-canvas/echarts'; 方法引入 Echarts 库。同时,也需要在小程序的 app.json 文件中声明使用的组件: ```json { "usingComponents": { "ec-canvas": "../../components/ec-canvas/ec-canvas" } } ``` 最后,你可以在小程序开发工具中预览这个示例,并根据自己的需求修改代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值