1. Toy模板网首页
  2. > Toy博客

微信小程序使用Echart实现折线图案例

8月前 作者：人民的石头 分类：Toy博客 阅读(61) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序使用Echart实现折线图案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

 一、实现效果

微信小程序使用Echart实现折线图案例

二、echart引入参考另一位博主博客

微信小程序引入echarts图表（保姆式）_啊翔呀的博客-CSDN博客_微信小程序引入echarts

总结来就是以下几步

 1.首先，下载echarts微信版 地址：GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

2.把ec-canvas文件复制到项目中，由于我项目采用的是分包，故直接复制到需要使用到echart图表的包下。

微信小程序使用Echart实现折线图案例

 3.在app.json文件中加入下代码

"usingComponents": {
    "ec-canvas": "/ec-canvas/ec-canvas"
  },

4.datacharts.wxml文件

<!-- 头部标题 -->
<view class="title_search">
  <view class="seeck_md">
    <!-- 返回 -->
    <view class="logout" bindtap="logout">
      <image class="logout_ic" src="/images/add.png">
      </image>
      <text class="logout_txt">返回</text>
    </view>
    <!--消息-->
    <view class="msg_title_center">
      <view class="msg" bindtap="open_msg">
        <text class="msg_txt">个人数据</text>
      </view>
    </view>
  </view>
  <view class="logout">
    <image class="logout_ic">
    </image>
    <text class="logout_txt"></text>
  </view>
</view>

<scroll-view class='scbg' scroll-y='true'>
   <!-- 刷新时间  -->
  <view class="refresh">{{titleDate}}</view>
  <view class="chart_module">
    <!-- 大气压等选择 -->
    <view class="blood_class_selet">
      <view bindtap="booldPress" class="{{pressList[0].checked?'bloodPressureActived':'bloodPressure'}}" >气压</view>
      <view bindtap="booldTa" class="{{pressList[1].checked?'bloodPressureActived':'bloodPressure'}}">大气</view>
      <view bindtap="booldO" class="{{pressList[2].checked?'bloodPressureActived':'bloodPressure'}}">
        OX</view>
      <view bindtap="booldHaert" class="{{pressList[3].checked?'bloodPressureActived':'bloodPressure'}}">频率</view>
      <view bindtap="booldWeight" class="{{pressList[4].checked?'weightActive':'weight'}}">
      重量</view>
    </view>
    <!--图表数据-->
    <view class="echarts">
      <ec-canvas force-use-old-canvas="true" id="my-echarts" canvas-id="echarts" ec="{{ec}}"></ec-canvas>
    </view>
    <!--月、季度、年选择-->
    <view class="day_select">
      <view class="time_interval">时间跨度</view>
      <view class="bottom_button">
        <view class="{{diseaseList[0].checked?'mouth':'mouthnomal'}}" bindtap="weekSelcet">月</view>
        <view class="{{diseaseList[1].checked?'yearative':'year'}}" bindtap="monthSelect">季</view>
        <view class="{{diseaseList[2].checked?'yearative':'year'}}" bindtap="yearselect">年</view>
      </view>
    </view>
  </view>

  <!-- 历史数据 -->
  <view class="history_data">历史数据</view>
  <block wx:for="{{HistoryDataList}}" wx:key="id" wx:for-item="itemName" wx:for-index="id">
    <view class='box'>
      <view class='firstblock'>
        <!-- 日期 -->
        <text class='showdata'>{{itemName.data_times}}</text>
        <view class='tel'>
          <text class='showdataone'>{{itemName.values}}</text>
          <!-- <text class='showdatatwo'>/{{itemName.values}}</text> -->
          <text class='dataunit'>{{itemName.unit}}</text>
        </view>
      </view>
    </view>
  </block>
</scroll-view>

5.datacharts.wxss

page {
  background: #f0f0f0;
  left: 0rpx;
  right: 0rpx;
}

.refresh {
  font-size: 22rpx;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  margin-bottom: 20rpx;
}

/* 图表模块 */
.echarts {
  width: 580rpx;
  height: 400rpx;
  font-size: 24rpx;
  color: #000;
  background-color: white;
  border-radius: 30rpx;
  padding-bottom: 30rpx;
}
#echarts{
  background-color: #0455a7;
}

.chart_module {
  display: flex;
  justify-content: flex-end;
  margin-top: 30rpx;
  align-items: flex-end;
  margin-right: 30rpx;
  flex-direction: row;
}

/* 日期选择*/
.day_select {
  display: flex;
  position: absolute;
  flex-direction: row;
}

.time_interval {
  font-size: 28rpx;
  height: 56rpx;
  align-items: center;
  display: flex;
  color: #a7a7a7;
  margin-right: 10rpx;
}

/* 大气模块选择*/
.blood_class_selet {
  height: 430rpx;
  width: 80rpx;
  background-color: #d3d3d3;
  color: #000;
  border-radius: 20rpx;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-right: 20rpx;
}

/* 大气*/
.bloodPressure {
  width: 74rpx;
  height: 64rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  margin-top: 4rpx;
}

.bloodPressureActived {
  width: 74rpx;
  height: 64rpx;
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  margin-top: 4rpx;
}

/* 重量 */
.weightActive {
  width: 74rpx;
  height: 64rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  margin-bottom: 4rpx;
  background-color: white;
}

.weight {
  width: 74rpx;
  height: 64rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  margin-bottom: 4rpx;
}
/* 重量 */

/* 时间选择模块*/
.bottom_button {
  display: flex;
  flex-direction: row;
  background-color: #d3d3d3;
  width: 280rpx;
  height: 56rpx;
  align-items: center;
  border-radius: 28rpx;
  justify-content: space-between;
  margin-right: 20rpx;
  margin-bottom: 10rpx;
  font-size: 28rpx;
}

.mouth {
  width: 84rpx;
  height: 46rpx;
  background-color: white;
  align-items: center;
  margin-left: 5rpx;
  justify-content: center;
  display: flex;
  border-radius: 24rpx;
}

.mouthnomal {
  width: 84rpx;
  height: 46rpx;
  align-items: center;
  margin-left: 5rpx;
  justify-content: center;
  display: flex;
}

.year {
  width: 84rpx;
  height: 46rpx;
  align-items: center;
  margin-left: 5rpx;
  justify-content: center;
  display: flex;
  border-radius: 24rpx;
  margin-right: 5rpx;
}

.yearative {
  width: 84rpx;
  height: 46rpx;
  background-color: white;
  align-items: center;
  margin-left: 5rpx;
  justify-content: center;
  display: flex;
  border-radius: 24rpx;
  margin-right: 5rpx;
}

/* 图表模块 */

/* 历史记录 */
.scbg {
  background-color: #f0f0f0;
  width: 100%;
  height: calc(100vh - 200rpx);
  left: 0rpx;
  right: 0rpx;
  top: 0rpx;
  padding-bottom: 30rpx;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

/* 历史数据 */
.history_data {
  margin-top: 40rpx;
  margin-bottom: 30rpx;
  margin-left: 30rpx;
  font-weight: bold;
  color: #444444;
}

/* 历史数据item */
.box {
  background-color: white;
  margin-top: 20rpx;
  border-radius: 20rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.firstblock {
  height: 150rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 20rpx;
  flex-direction: row;
  padding-right: 30rpx;
}

.showtime {
  font-size: 24rpx;
  color: #333333;
  font-family: PingFangSC-regular;
}

.showdataone {
  font-size: 32rpx;
  color: #000000;
  font-family: PingFangSC-regular;
  font-weight: bold;
  margin-right: 5rpx;
}

.showdatatwo {
  font-size: 32rpx;
  color: #000000;
  font-weight: bold;
  font-family: PingFangSC-regular;
}

.dataunit {
  font-size: 24rpx;
  color: #363636;
  margin-left: 10rpx;
  margin-right: 10rpx;
  font-family: PingFangSC-regular;
}

.showdata {
  width: 160rpx;
  font-size: 24rpx;
  color: #a7a7a7;
  margin-left: 30rpx;
}
/* 历史数据item */

/* 头部搜索 */
/* 搜索标题 */
.title_search{
  background: linear-gradient(to right, #0455a7, #62c8ec);
  height: 170rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
}
.seeck_md{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-end;
}

/* 消息 */
.msg{
  width: 180rpx;
  height: 90rpx; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 0rpx;
  margin-left: 30rpx;

}

.msg_title_center{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.msg_txt{
  font-size: 36rpx;
  height: 80rpx;
  width: 160rpx;
  margin-bottom: 20rpx;
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: center;
}

/* 返回 */
.logout{
  width: 100rpx;
  height: 90rpx; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx; 
  margin-left: 30rpx;
}
.logout_ic{
  height: 44rpx;
  width: 48rpx;
  margin-right: 2rpx;
}
.logout_txt{
  font-size: 24rpx;
  height: 40rpx;
  width: 60rpx;
  margin-bottom: 10rpx;
  align-items: flex-start;
  color: #fff;
  display: flex;
  justify-content: flex-start;
}
/* 搜索标题 */
/* 头部搜索  */

6.datacharts.ts，注意由于我是放在分包里面故在js文件中引入为import * as echarts from '../../../../ec-canvas/echarts';

如果放在主包引用则改为

import * as echarts from '../../ec-canvas/echarts';文章来源地址https://www.toymoban.com/news/detail-437534.html

// 引入echarts.js
import * as echarts from '../../../../ec-canvas/echarts';

let chart = null;

Page({
  data: {
    ec: {
      onInit: initChart
    },
    titleDate: '',
    refreshData: '',
    diseaseList: [//月、季、年控件标记
      { diseaseCode: "0", diseaseName: "0", checked: true },
      { diseaseCode: "1", diseaseName: "1", checked: false },
      { diseaseCode: "2", diseaseName: "2", checked: false },
    ],
    pressList: [//气压、大气、OX、频率、重量控件标记
      { diseaseCode: "0", diseaseName: "0", checked: true },
      { diseaseCode: "1", diseaseName: "1", checked: false },
      { diseaseCode: "2", diseaseName: "2", checked: false },
      { diseaseCode: "3", diseaseName: "3", checked: false },
      { diseaseCode: "4", diseaseName: "4", checked: false },
    ],
    list: [{
      username: "2021-7-6",
      send_timestamp: "120",
      centent: "阅读，",
      total_likes: 2,
      unit: "mmhg"
    },
    ],
    HistoryDataList: [{
      data_times:'2022/12/01 10:11:02',
      values:'86/142',
      unit:'mmhg'
    },
    {
      data_times:'2022/11/30 08:01:52',
      values:'82/140',
      unit:'mmhg'
    }],//历史数据
    templeDataList: [{}],//临时接收历史数据
    patientId:""
  },

  // 页面加载
  onLoad(options) {
    var bloodTagss = options.bloodTag;

    this.data.patientId=""+ options.patientId;
    // console.log("======页面加载==获取病人id====" + this.data.patientId)

    //头部时间
    var timeStamp = new Date();
    var titledt = this.formatDate(timeStamp);
    this.setData({
      titleDate: titledt
    });

  },

  onShow() {

  },

  onReady: function () {

  },

  //气压历史数据
  bloodPresure: function () {

    var that = this;
    that.setData({
      HistoryDataList: []
    })

  },

  // OX历史数据
  bloodOxygen: function () {
    var that = this;
    that.setData({
      HistoryDataList: []
    });

  
  },

  //获取历史OX数据
  bloodSugerData: function () {
    var that = this;
    that.setData({
      HistoryDataList: []
    });


      that.getBloodSugarChart()
 

  },

  //心率历史数据
  getDataList: function () {

    var that = this;
    that.setData({
      HistoryDataList: []
    })

    this.getHeartRata()
  },

  //体重历史数据
  getWeightDataList: function () {
    var that = this;
    that.setData({
      HistoryDataList: []
    })
  },

  // 退出登录
  logout: function () {
    wx.navigateBack({})
  },

  // 气压
  booldPress: function () {

    // 状态切换
    let that = this;
    for (const key in that.data.pressList) {
      that.data.pressList[key].checked = false;
    }

    that.data.pressList[0].checked = true;
    this.setData({
      pressList: that.data.pressList
    })
    //数据处理  
    that.bloodPressureCurve();
  },

  // 大气
  booldTa: function () {

    // 状态切换
    let that = this;
    for (const key in that.data.pressList) {
      that.data.pressList[key].checked = false;
    }

    that.data.pressList[1].checked = true;

    this.setData({
      pressList: that.data.pressList
    })
    //数据处理  
    that.getBloodSugarChart()
  },

  // OX
  booldO: function () {
    // 状态切换
    let that = this;
    for (const key in that.data.pressList) {
      that.data.pressList[key].checked = false;
    }

    that.data.pressList[2].checked = true;
    this.setData({
      pressList: that.data.pressList
    })
    //数据处理  
    that.getBloodOxygenChart()
  },

  //频率
  booldHaert: function () {
    // 状态切换
    let that = this;
    for (const key in that.data.pressList) {
      that.data.pressList[key].checked = false;
    }

    that.data.pressList[3].checked = true;
    this.setData({
      pressList: that.data.pressList
    })
    //数据处理  
    that.getHeartRata();
  },

  // 重量
  booldWeight: function () {
    // 状态切换
    let that = this;
    for (const key in that.data.pressList) {
      that.data.pressList[key].checked = false;
    }

    that.data.pressList[4].checked = true;
    this.setData({
      pressList: that.data.pressList
    })
    //数据处理  weight


    that.weghtCurve();
  },

  // 周选择
  weekSelcet: function () {
    // 状态切换
    let that = this;
    for (const key in that.data.diseaseList) {
      that.data.diseaseList[key].checked = false;
    }

    that.data.diseaseList[0].checked = true;
    this.setData({
      diseaseList: that.data.diseaseList
    })
      
  },

  // 月度
  monthSelect: function () {
    // 状态切换
    let that = this;
    for (const key in that.data.diseaseList) {
      that.data.diseaseList[key].checked = false;
    }

    that.data.diseaseList[1].checked = true;
    this.setData({
      diseaseList: that.data.diseaseList
    })
    // 数据处理

  },

  //年切换
  yearselect: function () {
    // 状态切换
    let that = this;
    for (const key in that.data.diseaseList) {
      that.data.diseaseList[key].checked = false;
    }

    that.data.diseaseList[2].checked = true;
    this.setData({
      diseaseList: that.data.diseaseList
    })

  },

  //气压图表数据
  bloodPressureCurve: function () {

    let option = {
      title: {
        text: 'mmhg',
        y: '5%',
        x: '2%',
        textStyle: {
          fontSize: 12,
          fontWeight: 'normal',
        },
      },
      color: ["#05c8ac", '#60A0ff'],  //线的颜色
      legend: {
        data: ['m压', 'h压'],    //标识哪个颜色对应哪个数据
        padding: 1,   //   内边距
        x: '30%',
        y: '6%',
      },
      grid: {
        top: '24%',
        left: '3%',
        right: '4%',
        bottom: '11%',
        containLabel: true
      },
      xAxis: {//x轴
        type: 'category',
        data: [1,2,3,4,5,6]
      },
      yAxis: {//y轴
        type: 'value'
      },
      series: [
        {
          data: [110,102,103,99,98,140],
          name: "m压",
          type: 'line',
          smooth: false,
          label: {
            show: true
          }
        },
        {
          data: [70,65,85,81,76,78],
          name: "h压",
          type: 'line',
          smooth: false,
          label: {
            show: true
          }
        }
      ],
      dataZoom: [
        {
          type: 'inside',// 内置于坐标系中
          show: false,
          left: 33, //滚动条靠左侧的百分比
          start: 0,
          end: 80,
          xAxisIndex: [0]
        }, {
          type: 'inside',
          show: true,
          xAxisIndex: [0],
          start: 0,//滚动条的起始位置
          end: 0.25 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        }
      ]
    };

    chart.setOption(option);

  },

  //大气图表数据
  getBloodSugarChart: function () {

    let option = {
      title: {
        text: 'mg/dl',
        y: '3%',
        x: '2%',
        textStyle: {
          fontSize: 12,
          fontWeight: 'normal',
        },
      },
      color: ["#05c8ac"],  //线的颜色
      legend: {
        data: [''],    //标识哪个颜色对应哪个数据
        padding: 1,   //   内边距
        x: '30%',
        y: '5%',
      },
      grid: {
        top: '24%',
        left: '3%',
        right: '4%',
        bottom: '11%',
        containLabel: true
      },
      xAxis: {//x轴
        type: 'category',
        data: ['11/01','11/02','11/03','11/04']
      },
      yAxis: {//y轴
        type: 'value'
      },
      series: [
        {
          data: [20,30,34,29],
          name: "大气",
          type: 'line',
          smooth: false,
          label: {
            show: true
          }
        }, {
          data: [],
          name: "大气",
          type: 'line',
          smooth: false,
          label: {
            show: true
          }
        }
      ],
      dataZoom: [
        {
          type: 'inside',// 内置于坐标系中
          show: false,
          left: 33, //滚动条靠左侧的百分比
          start: 0,
          end: 80,
          xAxisIndex: [0]
        }, {
          type: 'inside',
          show: true,
          xAxisIndex: [0],
          start: 0,//滚动条的起始位置
          end: 80 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        }
      ]
    };
    wx.hideToast()
    chart.setOption(option);
  },

  //OX图表数据
  getBloodOxygenChart: function () {

    let option = {
      title: {
        text: '%',
        y: '3%',
        x: '2%',
        textStyle: {
          fontSize: 12,
          fontWeight: 'normal',
        },
      },
      color: ["#05c8ac"],  //线的颜色
      legend: {
        data: [''],    //标识哪个颜色对应哪个数据
        padding: 1,   //   内边距
        x: '30%',
        y: '5%',
      },
      grid: {
        top: '24%',
        left: '3%',
        right: '4%',
        bottom: '11%',
        containLabel: true
      },
      xAxis: {//x轴
        type: 'category',
        data: [1,2,3,4,5]
      },
      yAxis: {//y轴
        type: 'value'
      },
      series: [
        {
          data: [70,72,74,80,65],
          name: "OX",
          type: 'line',
          smooth: false,
          label: {
            show: true
          }
        }, {
          data: [],
          name: "",
          type: 'line',
          smooth: false,
          label: {
            show: true
          }
        }
      ],
      dataZoom: [
        {
          type: 'inside',// 内置于坐标系中
          show: false,
          left: 33, //滚动条靠左侧的百分比
          start: 0,
          end: 80,
          xAxisIndex: [0]
        }, {
          type: 'inside',
          show: false,
          xAxisIndex: [0],
          start: 0,//滚动条的起始位置
          end: 80, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        }
      ]
    };
    wx.hideToast()
    chart.setOption(option);
  },

  //心率图表数据处理
  getHeartRata: function () {
    
    let option = {
      title: {
        text: 'bmp',
        y: '5%',
        x: '2%',
        textStyle: {
          fontSize: 12,
          fontWeight: 'normal',
        },
      },
      color: ["#05c8ac"],  //线的颜色
      legend: {
        data: [''],    //标识哪个颜色对应哪个数据
        padding: 1,   //   内边距
        x: '30%',
        y: '6%',
      },
      grid: {
        top: '24%',
        left: '3%',
        right: '4%',
        bottom: '11%',
        containLabel: true
      },
      xAxis: {//x轴
        type: 'category',
        data: [1,2,3,4,5]
      },
      yAxis: {//y轴
        type: 'value'
      },
      series: [
        {
          data: [88,90,89,93,100],
          name: "收缩压",
          type: 'line',
          smooth: false,
          label: {
            show: true
          }
        },
        {
          data: [],
          name: "",
          type: 'line',
          smooth: false,
          label: {
            show: true
          }
        }
      ],
      dataZoom: [
        {
          type: 'inside',// 内置于坐标系中
          show: false,
          left: 33, //滚动条靠左侧的百分比
          start: 0,
          end: 80,
          xAxisIndex: [0]
        }, {
          type: 'inside',
          show: false,
          xAxisIndex: [0],
          start: 0,//滚动条的起始位置
          end: 80 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        }
      ]
    };

    chart.setOption(option);
  },

  //重量
  weghtCurve: function () {
 
    let option = {
      title: {
        text: 'kg',
        y: '5%',
        x: '2%',
        textStyle: {
          fontSize: 12,
          fontWeight: 'normal',
        },
      },
      color: ["#05c8ac"],  //线的颜色
      legend: {
        data: [''],    //标识哪个颜色对应哪个数据
        padding: 1,   //   内边距
        x: '30%',
        y: '6%',
      },
      grid: {
        top: '24%',
        left: '3%',
        right: '4%',
        bottom: '11%',
        containLabel: true
      },
      xAxis: {//x轴
        type: 'category',
        data: ['11/01','11/02','11/03','11/04','11/05']
      },
      yAxis: {//y轴
        type: 'value'
      },
      series: [
        {
          data: [66,65,59,68,70],
          name: "收缩压",
          type: 'line',
          smooth: false,
          label: {
            show: true
          }
        },
        {
          data: [],
          name: "",
          type: 'line',
          smooth: false,
          label: {
            show: true
          }
        }
      ],
      dataZoom: [
        {
          type: 'inside',// 内置于坐标系中
          show: false,
          left: 33, //滚动条靠左侧的百分比
          start: 0,
          end: 80,
          xAxisIndex: [0]
        }, {
          type: 'inside',
          show: true,
          xAxisIndex: [0],
          start: 0,//滚动条的起始位置
          end: 0.25 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        }
      ]
    };

    chart.setOption(option);
  },

  //转换为时间格式
  formatDate(time: Date) {
    let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
    var date = new Date(time);

    date.setDate(date.getDate());
    let weekDay = date.getDay();
    var weekDate = show_day[weekDay]

    var YY = date.getFullYear() + '-';
    var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
    var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
    var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
    var mm = ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
    var ss = ':' + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    return MM + DD + "日 " + weekDate + " " + hh + mm;
  },

  onPullDownRefresh() {
    //数据处理  
    var timeStamp = new Date();
    var titledt = this.formatDate(timeStamp);
    this.setData({
      titleDate: titledt
    })
    console.log("============" + this.formatDate(timeStamp))
  },
})

// 初始化图表函数
function initChart(canvas: any, width: any, height: any, dpr: any) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  })

  // canvas.setChart(chart)
  // 显示Echarts图表类型信息，可以去Echarts官网复制粘贴
  let option = {
    title: {
      text: 'mmhg',
      y: '5%',
      x: '2%',
      textStyle: {
        fontSize: 12,
        fontWeight: 'normal',
      },
    },
    color: ["#05c8ac", '#60A0ff'],  //线的颜色
    legend: {
      data: ['m压', 'h压'],     //标识哪个颜色对应哪个数据
      padding: 1,   //   内边距
      x: '30%',
      y: '6%',
    },
    grid: {
      top: '24%',
      left: '3%',
      right: '4%',
      bottom: '11%',
      containLabel: true
    },
    xAxis: {//x轴
      type: 'category',
      data: [1,2,3,4,5,6]
    },
    yAxis: {//y轴
      type: 'value'
    },
    series: [
      {
        data: [110,102,103,99,98,140],
        name: "m压",
        type: 'line',
        smooth: false,
        label: {
          show: true
        }
      },
      {
        data: [70,65,85,81,76,78],
        name: "h压",
        type: 'line',
        smooth: false,
        label: {
          show: true
        }
      }
    ],
    dataZoom: [
      {
        type: 'inside',// 内置于坐标系中
        show: false,
        left: 33, //滚动条靠左侧的百分比
        start: 0,
        end: 80,
        xAxisIndex: [0]
      }, {
        type: 'inside',
        show: true,
        xAxisIndex: [0],
        start: 0,//滚动条的起始位置
        end: 0.25 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
      }
    ]
  };

  chart.setOption(option);
  return chart;
}

到了这里，关于微信小程序使用Echart实现折线图案例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序echart导出图片

    微信小程序echart导出图片

    echarts版本5.1.0 用到的echarts组件是uni插件市场的echart组件 关键代码是  

    2024年02月10日
    浏览(31)
  • 微信小程序Canvas绘制曲线图饼图柱状图雷达图蛛网图实现（附源码）

    微信小程序Canvas绘制曲线图饼图柱状图雷达图蛛网图实现（附源码）

    小程序绘图源码下载

    2024年02月11日
    浏览(43)
  • uni-app+vue2 微信小程序 使用canvas绘制折线图/波形图

    uni-app+vue2 微信小程序 使用canvas绘制折线图/波形图

      接口返回一个数组，每一项均是一个数字，代表着y坐标，x坐标需自己处理。 我的数据是1024个浮点数，在-10到10之间 波形图需要xy轴缩放功能，用c3的 transform: scale()是不行的，至少会失真。 然后背景的格子，我这里是每个格子要求100个点，初始缩放下是11个格子，10条线（

    2024年04月26日
    浏览(49)
  • echart 实现多柱状图+多折线图

    echart 实现多柱状图+多折线图

    当图表中存在多个柱状图时，如何让每条折线折点对应在每个柱状图中点位置？  配置如下： 图例如下：

    2024年02月11日
    浏览(28)
  • 【微信小程序】echart中canvas原生组件层级太高遮挡vantui中的组件

    【微信小程序】echart中canvas原生组件层级太高遮挡vantui中的组件

    之前的问题图片如下： 最开始想到的方案是降低canvas的层级，但是canvas是原生组件，他的层级是没法改变 所以又想到改变vant组件的层级，但是一样无果。。。 随后，看到网上大篇幅的都是使用显示隐藏来操控picker的，这样会如果页面可以滑动，就导致用户还是可以看到ec

    2024年02月13日
    浏览(35)
  • 微信小程序--》从零实现小程序项目案例

    微信小程序--》从零实现小程序项目案例

    🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页：亦世凡华、 🛺系列专栏：微信小程序 🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。 👀引言        ⚓经过web前端开发的学习，相信大家对于前端开发有了一

    2024年02月03日
    浏览(26)
  • 微信小程序实现生成分享海报案例

    微信小程序实现生成分享海报案例

    一、引入插件painter （1）克隆地址：https://gitcode.net/mirrors/Kujiale-Mobile/Painter （2）下载的 painter 放到小程序的 components 目录下 二、页面中引入插件 （1）页面的 json 文件 （2）页面的 wxml 文件 其中 painter 插件可以获取绘制出来的图片路径， image 标签展示出来 三、绘制海报 1、

    2024年02月08日
    浏览(79)

  • 微信小程序引用echart报错 ，上传代码报t.addEventListener is not a function

    最近做项目用到echart新版本，5.4.0。在微信开发工具里面可以正常运行。代码上传的时候就会报错，真机和预览也报错。 解决办法 在ec-canvas文件夹下的 wx-canvas.js文件中添加 addEventListener() {} 空函数，如下： 再上传就不会出错了

    2024年02月11日
    浏览(32)
  • 微信小程序实现商品加入购物车案例

    微信小程序实现商品加入购物车案例

    思考： 购物车中的数据保存在哪里？用哪种数据结构进行保存？ 小程序中可能有多个页面需要对购物车中的数据进行操作，因此我们想到把数据存到全局中。可以使用 wx.setStorageSync() 储存，用 wx.getStorageSync() 进行获取，以数组格式方便对数据进行操作。 一、商品加入购物车

    2024年02月10日
    浏览(38)
  • 【微信小程序（黑马程序课程）案例实现——本地生活的首页基本布局】

    【微信小程序（黑马程序课程）案例实现——本地生活的首页基本布局】

    一. 新建一个项目 二. 添加页面和删除页面 （1） 添加页面 ——app.json/pages中添加路径，并删除原有的路径 （2）删除页面——路径已经被删除，现在删除文件 三.设置导航栏效果 ——app.json/windows中更改 效果图： 代码如下： 四.设置tabBar效果 ——在app.json中创建tabBar（与win

    2024年04月16日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包