ApexCharts在vue下示例——线条
通过集成其针对Vue的包装组件vue-apexcharts来轻松地将ApexCharts与我们的Vue应用程序一起使用。
如何在vue.js中添加配置apexcharts请参考
代码内容
<template>
<div id="chart">
<apexchart
type="line" height="350" :options="chartOptions" :series="series"
></apexchart>
</div>
</template>
<script>
export default {
name: "lineTest",
computed: {
},
methods: {
},
data() {
return {
//数据集(数据名称，数据点)
series: [
{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
},
],
//图表格式
chartOptions: {
chart: {
//数据表的高度、类型（线条）、是否支持缩放
height: 350,
type: line,
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false //在线条上显示数据值
},
stroke: {
//线条类型
curve: straight
},
title: {
//标题内容以及对齐方式
text: Product Trends by Month,
align: left
},
grid: {
//图表背景样式及颜色
row: {
colors: [#f3f3f3, transparent],
opacity: 0.5
},
},
xaxis: {
//x轴坐标显示
categories: [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep],
}
},
};
},
};
</script>
<style scoped>
/*图表的宽度设置，如果没有设置则图表将铺满整个屏幕*/
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
使用
<template>
<div>
<LineTest />
</div>
</template>
<script>
import LineTest from "@/components/my_comp/apexchart_test/line";
export default {
name: "alarm",
components: {
LineTest },
data() {
return {
};
},
computed: {
},
methods: {
},
data() {
return {
};
},
};
</script>
<style scoped>
</style>
图像效果
其它参数效果
//图表格式
chartOptions: {
chart: {
//
height: 350,
type: line,
zoom: {
enabled: true //添加了右上角的缩放及移动
}
},
chartOptions: {
chart: {
//数据表的高度、类型（线条）、是否支持缩放
height: 350,
type: line,
zoom: {
enabled: false
}
},
dataLabels: {
enabled: true//在线条上显示数据值
},
