用vue写一个统计图,把代码写出来
时间: 2023-02-19 08:32:10 浏览: 51
你可以使用Vue.js的可视化库,比如vue-charts,来创建统计图。下面是一个简单的示例:
<template>
<div>
<v-chart :data="data" :options="options"></v-chart>
</div>
</template>
<script>
import { Bar } from 'vue-chartjs'
export default {
extends: Bar,
data () {
return {
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false
}
}
}
}
</script>
相关问题
用vue echarts写一个条形图并把它放在首页
好的,以下是简单的代码实现:
1. 在Vue项目中安装echarts
```
npm install echarts --save
```
2. 在需要使用条形图的组件中引入echarts
```javascript
import echarts from 'echarts'
```
3. 在组件中定义一个div容器用于展示echarts图表
```html
<template>
<div class="chart-container" ref="chart"></div>
</template>
```
4. 在组件的mounted生命周期中,使用echarts进行图表的初始化和配置
```javascript
mounted() {
// 获取dom元素
const container = this.$refs.chart
// 初始化echarts实例
const chart = echarts.init(container)
// 配置项
const option = {
// 图表标题
title: {
text: '销售统计',
subtext: '2021年'
},
// x轴数据
xAxis: {
type: 'category',
data: ['商品A', '商品B', '商品C', '商品D', '商品E']
},
// y轴数据
yAxis: {
type: 'value'
},
// 数据系列
series: [{
name: '销量',
type: 'bar',
data: [120, 200, 150, 80, 70]
}]
}
// 使用刚指定的配置项和数据显示图表
chart.setOption(option)
}
```
5. 在首页中引入该组件,并将其放置在需要的位置
```html
<template>
<div class="home-page">
<chart-component></chart-component>
</div>
</template>
<script>
import ChartComponent from '@/components/ChartComponent.vue'
export default {
name: 'HomePage',
components: {
ChartComponent
}
}
</script>
```
这样就可以在首页中展示一个简单的条形图了。当然,这只是一个简单的示例,你可以根据自己的需求进行更加复杂的配置。
vue2使用echarts统计图完整代码
以下是使用 Vue2 和 ECharts 绘制柱状图的完整代码示例:
```html
<template>
<div class="echarts-demo">
<div ref="chart" class="chart"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'EchartsDemo',
data () {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
}
},
mounted () {
this.initChart()
},
methods: {
initChart () {
const chartContainer = this.$refs.chart
const chart = echarts.init(chartContainer)
chart.setOption({
title: {
text: 'Weekly Sales Report'
},
tooltip: {},
xAxis: {
data: this.chartData.categories
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: this.chartData.data
}]
})
}
}
}
</script>
<style>
.chart {
height: 400px;
}
</style>
```
在这个示例中,我们定义了一个 `chartData` 对象,其中包含了需要绘制的图表数据。在 `mounted` 钩子函数中,我们调用了 `initChart` 方法,该方法使用 `echarts.init` 函数创建了一个图表实例并将其绑定到页面中的 `chart` DOM 元素上。然后,我们使用 `chart.setOption` 方法设置了图表的标题、提示信息、X 轴和 Y 轴的标签以及数据系列。最后,我们在 CSS 样式中为图表容器指定了一个高度。
使用这个示例代码,你可以在 Vue2 中很容易地绘制出一张 ECharts 柱状图。