上图为效果图,可以横向滑动图表,以下为实现具体步骤

1.首先要去uni-app插件市场下载 uCharts (使用 3.1.0 以上版本的 HBuilderX,否则要升级),选择导入插件https://ext.dcloud.net.cn/plugin?id=271

2.在 template 的代码

这里不要把echarts 和ucharts的配置用混,否则,(opts或eopts则会不生效)

 

3.样式(根据实际情况进行设置)

 

4.script (data里面定义的数据)

//图表的数据

serverDataDay: {
        categories: [],//x轴的日期
        series: [
          {
            name: "用电",
            data: [//具体的数据
              
            ],
            color: "#21A1FA",
            type: "line",
            symbol: "circle",
            symbolSize: 10,
            label: {
              show: true,
              color: "#21A1FA",
              fontWeight: "bold",
            },
            areaStyle: {//渐变区域,不需要则不加
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 163, 163, 0.2)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(225, 225, 225, 0.2)", // 100% 处的颜色
                  },
                ],
                global: false, 
              },
            },

            itemStyle: {
              color: "#00a3a3",
              borderWidth: 8,
              borderColor: "rgba(0, 163, 163, 0.3)",
            },
            lineStyle: {
              color: "#00a3a3",
              width: 3,
            },
          },
        ],
      },

//配置项

columneopts: {
        grid: {
          left: "3%",
          right: "6%",
          bottom: 25,
          top: 40,
          containLabel: true,
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLabel: {
            formatter: "{value} KWH",
          },
          axisPointer: {
            snap: true,
          },
        },
        dataZoom: [
          {
            type: "inside", //slider表示有滑动块的,
            start: 0, //数据窗口范围的起始百分比
            end: 60, //数据窗口范围的结束百分比
          },
        ],
        legend: {
          show: false,
        },
      },

以上步骤就可以实现了,不需要方法获取DOM,这样可以直接实现 

如有错误,欢迎大佬指出!!!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐