微信小程序统计图表之折线图曲线图

最新推荐文章于 2024-09-12 18:14:16 发布

Android毕业设计源码

最新推荐文章于 2024-09-12 18:14:16 发布

阅读量966

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/u014388322/article/details/132801287

版权

微信小程序专栏收录该内容

42 篇文章 9 订阅

订阅专栏

博主介绍：本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；

🍅希望此文章可以帮助到您🍅

微信小程序文章推荐

微信小程序之绘制多个marker以及调用手机地图软件导航

图表说明：

使用的图标库是：uCharts跨平台图表库

说明：在使用之前需要先下载网站提供的js文件信息；下载完放在自己的小程序项目目录里面；

效果显示

一、json文件引入

{

    "usingComponents": {

        "qiun-wx-ucharts": "../charts/index"

    }

}

二、前端界面

<view class="mapCode">

    <view class="charts-box">

      <qiun-wx-ucharts type="line" opts="{{opts}}" chartData="{{chartData}}" />

    </view>

  </view>

三、js逻辑处理

在data里面设置图表的样式：

    opts: {

      color: ["#40ac44"],

      padding: [15, 10, 0, 15],

      dataLabel: false,

      dataPointShape: false,

      enableScroll: false,

      legend: {},

      xAxis: {

        disableGrid: true

      },

      yAxis: {

        gridType: "dash",

        dashLength: 2,

        data: [

          {

            min: 0,

            max: 150

          }

        ]

      },

      extra: {

        line: {

          type: "curve",

          width:3,

          activeType: "hollow",

          linearType: "custom"

        }

      }

    },

四、测试数据

getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2018","2019","2020","2021","2022","2023"],
            series: [
              {
                name: "成交量A",
                lineType: "dash",
                data: [35,8,25,37,4,20]
              },
              {
                name: "成交量B",
                data: [70,40,65,100,44,68]
              },
              {
                name: "成交量C",
                data: [100,80,95,150,112,132]
              }
            ]
          };
        this.setData({ chartData: JSON.parse(JSON.stringify(res)) });
      }, 500);
    },
  }