编程知识 cdmana.com

考研题库小程序中如何使用Echarts统计刷题情况

在考研题库小程序中如何使用Echarts

在考研刷题小博士中,使用Echarts统计学习情况、刷题报告,使之数据可视化,方便大家对自己的学习和刷题情况一目了然。

微信小程序

1. 下载插件


首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。

2. 运行项目可查看图表示例

3. 使用组件


1)ec-canvas是提供的组件,将文件夹ec-canvas复制到自己的项目中

2)配置要应用组件的json文件,一定注意路径要写对。

{  "usingComponents": {    "ec-canvas": "../../ec-canvas/ec-canvas"  }}

3)在wxml里面写上如下标签

<view class="box">

		<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{
   { ec }}"></ec-canvas>

</view>

4)wxss记得再加一下

.box {
     width:100%;
     height:100%;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
}

5)js里面引入配置相关代码

// 1、引入依赖脚本

import * as echarts from '../../ec-canvas/echarts';

// 2、进行初始化数据

function initChart(canvas, width, height) {

	const chart = echarts.init(canvas, null, {

		width: width,

		height: height

	});

	canvas.setChart(chart);

	var option = {
		tooltip: {

			trigger: 'axis',

			axisPointer: {

				type: 'cross',

				label: {

					backgroundColor: '#6a7985'

				}

			}

		},

		legend: {

			data: ['答错','答对']

		},

		grid: {

			left: '3%',

			right: '4%',

			bottom: '3%',

			containLabel: true

		},

		xAxis: [

			{

				type: 'category',

				boundaryGap: false,

				data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],

				axisLine: {

					show: false,

				}

			}

		],

		yAxis: [

			{

				type: 'value',
				splitLine: {

					show: true,

					lineStyle: {

						type: 'dashed'

					}

				},

				axisLine: {

					show: false,

				}

			}

		],

		series: [

			{

				name: '答错',
        type: 'bar',
        data: data1

			},
      
      {

				name: '答对',
        type: 'bar',
        data: data2

			}

		]

	};
chart.setOption(option);

return chart;

}

Page({

data: {

ec: {

onInit: initChart // 3、将数据放入到里面

}

},

onReady() {

}

});

微信小程序,至于具体需求大家在Echarts官网找对应的图形。考研刷题小博士,如下:

版权声明
本文为[mon_star°]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_29528701/article/details/124734061

Scroll to Top