微信小程序使用Echarts图表组件,动态加载数据,图表模糊处理
1:下载 GitHub 上的项目https://github.com/ecomfe/echarts-for-weixin2:项目下载之后,打开小程序开发工具,可以看到效果如下3:如果是在项目里面引入组件的话,将github上下载的ec-canvas文件夹复制到你的项目里面。4:组件已经复制到了我的项目里面,想实现一个折线图,现在可以去组件中复制代码。wxml<!--index.wxml--&
·
1:下载 GitHub 上的项目
https://github.com/ecomfe/echarts-for-weixin
2:项目下载之后,打开小程序开发工具,可以看到效果如下
3:如果是在项目里面引入组件的话,将github上下载的ec-canvas
文件夹复制到你的项目里面。
4:组件已经复制到了我的项目里面,想实现一个折线图,现在可以去组件中复制代码。
wxml
<!--index.wxml-->
<view class="container">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>
js
import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '测试下面legend的红色区域不应被裁剪',
left: 'center'
},
color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
legend: {
data: ['A', 'B', 'C'],
top: 50,
left: 'center',
backgroundColor: 'red',
z: 100
},
grid: {
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
// show: false
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
// show: false
},
series: [{
name: 'A',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: 'B',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}, {
name: 'C',
type: 'line',
smooth: true,
data: [10, 30, 31, 50, 40, 20, 10]
}]
};
chart.setOption(option);
return chart;
}
Page(
data: {
ec: {
onInit: initChart
}
}
});
json
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
css
/**index.wxss**/
ec-canvas {
width: 100%;
height: 100%;
}
5:动态加载数据,都写在js中
定义全局变量,方便赋值
let pieData = []
定义图表
data: {
ec: {
lazyLoad: true, // 延迟加载
},
},
解决小程序视图模糊的问题,定义全局函数,并且调用返回数据
//获取像素比
const getPixelRatio = () => {
let pixelRatio = 0
wx.getSystemInfo({
success: function (res) {
pixelRatio = res.pixelRatio
},
fail: function () {
pixelRatio = 0
}
})
return pixelRatio
}
// console.log(pixelRatio)
let dpr = getPixelRatio()
初始化图表,添加 devicePixelRatio: dpr 解决小程序视图模糊的问题
//初始化图表
init_echarts: function () {
this.echartsComponnet.init((canvas, width, height) => {
// 初始化图表
const Chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr //解决小程序视图模糊的问题,必写
});
Chart.setOption(this.getOption());
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
return Chart;
});
},
指定图表的配置
getOption: function () {
// 指定图表的配置项和数据
var option = {
// legend: {
// bottom: '5',
// left: '15%'
// },
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
top: '-15%',
hoverAnimation:false,
label: {
position: 'inner',
formatter: function (params) {
return params.value + '%';
},
fontSize: 14,
color: '#fff'
},
labelLine: {
show: false
},
color: ['#09BB07', '#F57325', '#4289FD', '#FF5343'],
data: pieData
}]
};
return option;
},
获取数据时给图表赋值,并且初始化图表
// 获取课堂签到统计
async getTaskSignCount(data) {
let res = await getTaskSignCount(data)
console.log(res);
if (res.data.status == '10000') {
this.setData({
taskList: res.data.data
})
let arr = []
<!-- ...数据处理 -->
pieData = arr
this.init_echarts(); //初始化图表
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)