在使用vue2中的 echarts组件时 我在渲染折线图时 其中一个属性是这样写的series: [ { name: "queueSize", type: "line", //bar:柱状 line:折线图 data: this.queueSize, color: "#00C5AB", // symbol: "circle", //折线点设置为实心点 symbolSize: 8, //折线点的大小 }, { name: "enqueueCount", type: "line", //bar:柱状 line:折线图 data: this.enqueueCount, color: "#00C5AB", // symbol: "circle", //折线点设置为实心点 symbolSize: 8, //折线点的大小 }, { name: "consumerCount", type: "line", data: this.consumerCount, color: "#3F53FF", symbolSize: 8, //折线点的大小 }, { name: "producerCount", type: "line", data: this.producerCount, color: "#8DF3E8", symbolSize: 8, //折线点的大小 }, ], 而事实上,这段代码中有相当一部分重复,变化的只是name属性和data属性,其它属性都可以不变,而当这个list很长时这样写就非常耗时且重复度高,有什么简洁的写法吗
时间: 2024-02-14 14:03:23 浏览: 81
可以将这个数组抽离成一个变量,然后通过数组的map方法来遍历生成每一个series对象,示例代码如下:
```
const seriesArr = [
{ name: "queueSize", data: this.queueSize, color: "#00C5AB" },
{ name: "enqueueCount", data: this.enqueueCount, color: "#00C5AB" },
{ name: "consumerCount", data: this.consumerCount, color: "#3F53FF" },
{ name: "producerCount", data: this.producerCount, color: "#8DF3E8" }
];
const series = seriesArr.map(item => {
return {
name: item.name,
type: "line",
data: item.data,
color: item.color,
symbolSize: 8
};
});
```
这样做的好处是可以减少重复代码,同时也方便后续维护。
相关问题
用vue3+ts+echarts写一个双y轴折线图,不使用组件
好的,下面是实现代码:
```html
<template>
<div class="chart-container">
<canvas ref="chartCanvas"></canvas>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import * as echarts from "echarts";
export default defineComponent({
name: "DualAxisLineChart",
setup() {
const chartCanvas = ref<HTMLCanvasElement | null>(null);
onMounted(() => {
if (chartCanvas.value) {
const chart = echarts.init(chartCanvas.value);
chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
animation: false,
label: {
backgroundColor: "#505765",
},
},
},
xAxis: [
{
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisPointer: {
type: "shadow",
},
},
],
yAxis: [
{
type: "value",
name: "y1",
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: "{value} %",
},
},
{
type: "value",
name: "y2",
min: 0,
max: 500,
interval: 100,
axisLabel: {
formatter: "{value} km",
},
},
],
series: [
{
name: "data1",
type: "line",
yAxisIndex: 0,
data: [30, 40, 50, 60, 70, 80, 90],
},
{
name: "data2",
type: "line",
yAxisIndex: 1,
data: [100, 200, 300, 400, 450, 480, 500],
},
],
});
}
});
return {
chartCanvas,
};
},
});
</script>
<style scoped>
.chart-container {
width: 100%;
height: 400px;
}
</style>
```
这里使用了 `echarts` 库来实现双 y 轴折线图,具体的实现过程如下:
1. 在 `template` 中添加一个 `canvas` 元素,用于渲染图表;
2. 在 `setup` 中使用 `onMounted` 钩子,在组件挂载时初始化 `echarts` 实例,并设置图表的配置项;
3. 在 `return` 中返回 `chartCanvas`,该值被绑定到 `canvas` 的 `ref` 上,用于在初始化时获取 `canvas` 元素。
以上就是使用 `vue3` + `ts` + `echarts` 实现双 y 轴折线图的代码。
在vue中使用echarts实现两条折线图
好的,以下是使用 Vue 和 Echarts 实现两条折线图的基本步骤:
1. 安装 Echarts
在 Vue 项目中使用 Echarts 需要先安装 Echarts,可以使用 npm 或 yarn 进行安装:
```bash
npm install echarts
```
或
```bash
yarn add echarts
```
2. 引入 Echarts
在需要使用 Echarts 的组件中引入 Echarts:
```javascript
import echarts from 'echarts'
```
3. 创建 Echarts 实例
在组件的 `mounted` 钩子函数中创建 Echarts 实例,并绑定到 Vue 实例的 `chart` 属性上:
```javascript
mounted() {
// 基于准备好的dom,初始化echarts实例
const chartDom = this.$refs.chart
const myChart = echarts.init(chartDom)
// 将echarts实例绑定到Vue实例的chart属性上
this.chart = myChart
}
```
4. 渲染折线图
定义数据和配置项,然后在组件的 `mounted` 钩子函数中使用 Echarts 的 `setOption` 方法来渲染折线图:
```javascript
mounted() {
const chartDom = this.$refs.chart
const myChart = echarts.init(chartDom)
this.chart = myChart
// 定义数据和配置项
const data = {
xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
seriesData1: [120, 200, 150, 80, 70, 110, 130],
seriesData2: [80, 120, 110, 90, 60, 100, 80]
}
const option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['数据1', '数据2']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data.xData
},
yAxis: {
type: 'value'
},
series: [{
name: '数据1',
type: 'line',
data: data.seriesData1
}, {
name: '数据2',
type: 'line',
data: data.seriesData2
}]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
```
5. 在模板中渲染 Echarts 实例
最后,在模板中使用 `ref` 属性来引用 Echarts 容器,然后将容器渲染到页面中:
```html
<template>
<div>
<div ref="chart" style="width: 100%; height: 300px"></div>
</div>
</template>
```
这样就可以实现在 Vue 中使用 Echarts 渲染两条折线图了。