echarts中对数据进行除法
时间: 2023-09-16 14:11:00 浏览: 104
在echarts中,可以通过使用formatter函数对数据进行除法。
假设你的数据是一个数组,可以在series中设置如下的formatter函数:
```javascript
series: [{
data: [10, 20, 30, 40, 50],
type: 'bar',
label: {
show: true,
formatter: function (params) {
// 对数据进行除法
return params.value / 2;
}
}
}]
```
上述代码中,formatter函数将每个数据除以2,并返回新的格式化后的数值作为标签显示在图表上。
如果你想在图表上显示除法后的结果而不改变原始数据,可以使用计算属性来实现。例如,假设你的数据是一个对象数组,可以使用Vue.js中的计算属性来对数据进行除法:
```javascript
<template>
<div>
<el-chart :data="chartData" />
</div>
</template>
<script>
import { reactive, computed } from 'vue'
import echarts from 'echarts'
export default {
setup() {
const data = reactive([
{ name: 'A', value: 10 },
{ name: 'B', value: 20 },
{ name: 'C', value: 30 },
{ name: 'D', value: 40 },
{ name: 'E', value: 50 }
])
const chartData = computed(() => {
return data.map(item => {
return {
name: item.name,
value: item.value / 2
}
})
})
return {
chartData
}
},
mounted() {
const chart = echarts.init(this.$refs.chart)
chart.setOption({
xAxis: {
type: 'category',
data: this.chartData.map(item => item.name)
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: this.chartData.map(item => item.value)
}
]
})
}
}
</script>
<style>
/* 必须设置高度,否则图表无法正常显示 */
.el-chart {
height: 400px;
}
</style>
```
上述代码中,通过使用computed函数来计算新的数据数组chartData,将每个数据除以2。然后在图表中使用chartData作为数据源,依然显示原始数据,但是图表上的数值已经除以2了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)