Vue Chart 折线图 markPoint 显示开关教程

要在 Vue Chart 折线图中显示 markPoint，您可以使用 Vue Chart 的 option 配置项中的 markPoint 属性来控制其显示开关。具体步骤如下：

1. 安装 Vue Chart 库。在命令行中运行以下命令：

npm install vue-chartjs chart.js

2. 在您的 Vue 组件中导入所需的模块，并创建一个继承自 VueChart 的新组件。例如，可以在一个名为 LineChart 的 .vue 文件中实现：

<template>
  <line-chart :chart-data="data" :options="options"></line-chart>
</template>
<script>
import { Line, mixins } from 'vue-chartjs';
export default {
extends: Line,
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
mounted() {
this.renderChart(this.chartData, this.options);
}
}
</script>

3. 在父组件中使用 LineChart 组件，并传递 chartData 和 options 属性。例如，可以在父组件的 .vue 文件中实现：

<template>
  <div>
    <button @click="toggleMarkPoint">Toggle MarkPoint</button>
    <line-chart :chart-data="chartData" :options="chartOptions"></line-chart>
  </div>
</template>
<script>
import LineChart from './LineChart.vue';
export default {
components: {
LineChart
},
data() {
return {
chartData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data 1',
data: [65, 59, 80, 81, 56, 55, 40]
}
]
},
chartOptions: {
// 其他配置项...
markPoint: {
// 默认显示开关为 true
// 可以在需要时通过修改此值来切换显示开关
show: true,
// 其他 markPoint 配置项...
}
}
}
},
methods: {
toggleMarkPoint() {
this.chartOptions.markPoint.show = !this.chartOptions.markPoint.show;
}
}
}
</script>

这样，您就可以通过点击按钮来切换折线图中 markPoint 的显示开关。