微信小程序_08_echart折线图

历史文章目录连接：

https://blog.csdn.net/yy763496668/article/details/113117040

此链接为CSDN连接，目的为方便大家一览博客目录！内容会定期更新。

正文：

在业务上，有时候需要通过一些图表的方式展示数据，让用户一目了然的了解数据。本片文章记录的就是折线图。

准备工作：

下载echarts 插件地址：https://github.com/ecomfe/echarts-for-weixin

通过地址可以看出，这个插件是专门针对微信出的echarts插件

引入组件：

修改配置文件 userStatistics.json：

{
  "usingComponents": {
    "ec-canvas": "../../../components/ec-canvas/ec-canvas"
  },
  "navigationBarTitleText":"用户统计"
}

修改 userStatistics.wxml

编写图标样式 userStatistics.wxss:

.container1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

编写 userStatistics.js:

// pages/statisticsPages/userStatistics/userStatistics.js
import * as echarts from '../../../components/ec-canvas/echarts';




const app = getApp();
 
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);


  var option = {
    //折线图标题
    title: {
      text: '用户统计',
      left: 'center'
    },
    // 折线图线条的颜色
    color: ["#37A2DA", "#67E0E3", "#9FE6B8","  #FFB6C1"],
    // 折线图的线条代表意义
    legend: {
      itemWidth:5,//小圆点的宽度
      itemGap:25,
      selectedModel:'single',//折线可多选
      inactiveColor:'#87CEEB',
      data: [
        {
          name: '新增用户数',
          icon: 'circle',
          textStyle: {
            color: '#000000',
          }
        },
        {
          name: '取消用户数',
          icon: 'circle',
          textStyle: {
            color: '#000000'
          }
        },
        {
          name: '净增用户数',
          icon: 'circle',
          textStyle: {
            color: '#000000'
          }
        },
        {
          name: '累积用户数',
          icon: 'circle',
          textStyle: {
            color: '#000000'
          }
        } 
      ],
      
      bottom: 0,
      left: 30,
      z: 100
    },
    // 刻度
    grid: {
      containLabel: true
    },
    // 悬浮图标
    tooltip: {
      show: true,
      trigger: 'axis',
      position: function (pos, params, dom, rect, size) {
        var obj = { top: 60 };
        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
        return obj;
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      //show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      axisLine:{//y轴坐标是否显示
        show:true
      },
      axisTick:{//y轴刻度小标是否显示
        show:true
      }
    },
    series: [{
        name: '新增用户数',
        type: 'line',
        // 设置折线是否平滑
        smooth: false,
        data: [18, 36, 65, 100, 78, 40, 33]
      }, 
      {
        name: '取消用户数',
        type: 'line',
        smooth: false,
        data: [12, 50, 51, 35, 70, 30, 20]
      }, 
      {
        name: '净增用户数',
        type: 'line',
        smooth: false,
        data: [22, 11, 44, 66, 77, 10, 5]
      }, 
      {
        name: '累积用户数',
        type: 'line',
        smooth: false,
        data: [10, 30, 31, 50, 40, 20, 10]
      }
    ]
  };
  chart.setOption(option);
  return chart;
}




Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  onLoad: function (options) {
  },
  onReady() {
    setTimeout(function () {
      // 获取 chart 实例的方式
      // console.log(chart)
    }, 2000);
  },
  onShow: function () {
    
  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {


  },


  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {


  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {


  },


  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {


  },


  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {


  }
})

以上就是折线图的基本配置。

【关注、点赞，收藏】

关注公众号，您将第一时间收到文章更新

微信公众号：猿媛大本营

QQ群号：1056320746