Vent-App/pages/component/chart/line.vue

<template>
  <view style="width: 100%; height: 100%">
    <qiun-data-charts :type="type" :opts="mergedOpts" :chartData="chartData" />
  </view>
</template>

<script>
import qiunDataCharts from "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
export default {
  props: {
    chartData: { type: Object, default: () => ({}) }, // 图表数据
    chartOpts: { type: Object, default: () => ({}) }, // 图表配置项
    type: { type: String, default: "line" }, // 图表类型：line、area 等
  },
  components: { qiunDataCharts },
  data() {
    return {
      opts: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 10, 0, 15],
        dataLabel: false,
        enableScroll: false,
        update: true,
        duration: 0,
        animation: false,
        legend: {},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
            linearType: "custom",
          },
        },
      },
    };
  },
  computed: {
    mergedOpts() {
      // 合并默认配置与自定义配置
      return { ...this.opts, ...this.chartOpts };
    },
  },
  onReady() {},
  methods: {},
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
}
</style>