ApexCharts在vue下示例——线条

通过集成其针对Vue的包装组件vue-apexcharts来轻松地将ApexCharts与我们的Vue应用程序一起使用。

如何在vue.js中添加配置apexcharts请参考在VUE中使用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//在线条上显示数据值
            },