uniapp的H5端使用图表

前段时间接到一个需求，要在H5端显示类似echart的图表，尝试了N种插件，最后终于发现....

需求：要做一个类似于交易所K线图的图表 （但是价格只有日线，且每天只有一个价格，所以定为用折线图实现）

首先echarts是可以在移动端生效的，不管什么操作都是可以的，但是一旦在H5就不可以，不管是pc的H5还是，手机的H5，非常的离奇，猜测可能是uniapp编译成H5的时候会改变生成的HTML结构导致，触控操作不生效（在pc的H5调试的）
 

其次又尝试了ucharts 虽然可以实现手动触控，但是无法实现多Y轴的连动，因为我的需求是当我的价格变动的时候Y轴也会展示不同的价格区间

最后找了一圈，才发现Dcloud 插件市场有这样的插件，名字还是叫echarts，但是完全可以实现H5的操作，地址放在这里了echarts - DCloud 插件市场
 

下面本人的实现代码，各位有相同需求的自取
 

<template>
  <view style="width: 100%; height: 100%">
    <l-echart ref="chartRef" @finished="initChart"></l-echart>
  </view>
</template>

<script>
  import * as echarts from "@/uni_modules/lime-echart/static/echarts.min.js";

  export default {
    name: "ZoomLineChart",
    props: {
      seriesData: {
        type: Array,
        required: true,
      },
      categories: {
        type: Array,
        required: true,
      },
    },
    data() {
      return {
        // categories: this.getLast7Days(),
        chart: null,
      };
    },
    watch: {
      seriesData: {
        handler(newVal) {
          if (this.chart && newVal && newVal.length > 0) {
            this.setChartOption();
          }
        },
        immediate: true,
      },
    },
    methods: {
      // getLast7Days() {
      //   const days = [];
      //   const now = new Date();
      //   for (let i = 6; i >= 0; i--) {
      //     const d = new Date(now);
      //     d.setDate(now.getDate() - i);
      //     const mm = String(d.getMonth() + 1).padStart(2, "0");
      //     const dd = String(d.getDate()).padStart(2, "0");
      //     days.push(`${mm}-${dd}`);
      //   }
      //   return days;
      // },

      async initChart() {
        this.chart = await this.$refs.chartRef.init(echarts);
        if (this.seriesData && this.seriesData.length > 0) {
          this.setChartOption();
        }
      },

      setChartOption() {
        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "line" },
          },
          grid: {
            left: 40,
            right: 20,
            bottom: 50,
            top: 40,
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.categories,
            axisLabel: {
              color: "#FFFFFF",
            },
          },
          yAxis: {
            type: "value",
            scale: true,
            axisLabel: {
              color: "#fff",
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
              },
            },
          },
          dataZoom: [
            {
              type: "inside",
              start: 0,
              end: 100,
            },
          ],
          series: [
            {
              name: this.$t("assets.token.text20"), // "Value"
              type: "line",
              smooth: true,
              symbol: "circle",
              data: this.seriesData,
              lineStyle: {
                width: 2,
                color: "#3b82f6",
              },
              itemStyle: {
                color: "#3b82f6",
              },
              areaStyle: {
                color: "rgba(59, 130, 246, 0.1)",
              },
            },
          ],
        };

        this.chart.setOption(option);
      },
    },
  };
</script>