uni-app 请问现在还有实现折线图或者柱状图或者其他的统计常用的组件嘛
uni-app 请问现在还有实现折线图或者柱状图或者其他的统计常用的组件嘛
2019-03-25 12:01
同上
1 回复
在uni-app中,确实有多种方式可以实现折线图、柱状图等常用的统计图表组件。一个常见且强大的解决方案是使用ECharts,它是一个使用JavaScript实现的开源可视化图表库。uni-app可以通过集成ECharts来实现丰富的图表功能。
以下是一个在uni-app中使用ECharts实现折线图和柱状图的简单示例:
1. 安装ECharts
首先,确保你的uni-app项目中已经安装了ECharts。你可以通过npm安装:
npm install echarts --save
2. 创建图表组件
在components
目录下创建一个名为MyChart.vue
的组件,用于封装ECharts图表。
<template>
<view class="container">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
ec: {
lazyLoad: true // 延迟加载
}
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
this.lineChart();
this.barChart();
},
lineChart() {
// 初始化折线图
const chart = echarts.init(this.$mp.page.selectComponent('#mychart-dom-line').canvas, null, {
width: '100%',
height: '400px'
});
chart.setOption({
// 折线图配置
xAxis: {},
yAxis: {},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line'
}]
});
},
barChart() {
// 初始化柱状图
const chart = echarts.init(this.$mp.page.selectComponent('#mychart-dom-bar').canvas, null, {
width: '100%',
height: '400px'
});
chart.setOption({
// 柱状图配置
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
});
}
}
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
3. 使用图表组件
在你的页面中使用MyChart
组件:
<template>
<view>
<MyChart />
</view>
</template>
<script>
import MyChart from '@/components/MyChart.vue';
export default {
components: {
MyChart
}
};
</script>
这个示例展示了如何在uni-app中使用ECharts来创建折线图和柱状图。你可以根据需要进一步定制图表的配置和样式。