在考研题库小程序中如何使用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官网找对应的图形。考研刷题小博士，如下：
