应项目要求,需要在小程序插入折线图,并且折线图根据返回的数据动态渲染。
自己配置的简单折线图方法(假数据):
首先,去Git上下载为方便在小程序上使用ECharts的组件,https://github.com/ecomfe/echarts-for-weixin
下载成功后就可以在微信开发者工具中打开项目,里面有很多不同类型的数据图表,选择符合自己的即可进行属性配置,这里,我选择的是最简单的且很常用的折线数据图;
拷贝 ec-canvas
目录到自己的项目根目录下,打开需要绘制折线图的 index 文件:
首先,在index.json中进行配置,
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
其次,在index.wxml中引入 <ec-canvas>
组件,
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
再次,在index.js中书写方法,配置折线图属性,下面是按照我个人风格配置的折线图样式,如果还有其他属性需要配置可以参考ECharts配置项文档
// 根据ec-canvas添加位置,正确引入路径
import * as echarts from '../../ec-canvas/echarts';
let chart = null;
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
//折线图配置项添加位置
};
chart.setOption(option);
return chart;
}
Page({
/**
* 页面的初始数据
*/
data: {
ec: {
onInit: initChart
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
}
})
因为配置项太多,所以我进行了省略,如果需要参考研究可以去我的git上下载https://github.com/chenlun1000/ECharts01.git
项目是小程序项目,下载下来需要导入自己的appID才能运行。
~~~~~~~~~
下一篇文章会接入数据接口进行动态的渲染折线图,请继续关注!