微信小程序中使用Echarts展示折线图

效果图

主要实现的功能输入地区和频次查询油价的调整消息

1.从echarts-for-weixin官网下载文件

2.项目中引入echarts

将整个文件夹放在项目pages同级的目录下面

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

3.在微信小程序中使用

在Page.data中定义接收的数据

请求并处理数据

initpie()方法

setOption()方法 折线图配置项



ts文件

Page({

  /**
   * 页面的初始数据
   */
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    OliData: [],
    _num: 0,
    show: false,
    number: 3,
    area: "重庆",
    color: "#f7f7fb",
    ec: {
      //onInit: initChart //关闭自动加载
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    },
    xData:[],
    y89:[],
    y92:[],
    y95:[],
    onReady() {
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

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

  },

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

  },

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

  },

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

  },

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

  // },

  setOption(chart:any,piedata:any){
    var option = {
      title: {
        text: '油价趋势图',
        left: 'center'
      },
      legend: {
        data: ['89', '92', '95'],
        top: 50,
        left: 'center',
        backgroundColor: '#c0ebd7',
        z: 10
      },
      grid: {
        containLabel: true
      },
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data:piedata[0],
        // show: false
      },
      yAxis: {
        x: 'center',
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        min: 'dataMin'   //设置最小刻度为数据中的最小值
        // show: false
      },
      series: [{
        name: '89',
        type: 'line',
        smooth: true,//是否是光滑的曲线
        data: piedata[1]
      }, {
        name: '92',
        type: 'line',
        smooth: true,
        data: piedata[2]
      }, {
        name: '95',
        type: 'line',
        smooth: true,
        // data: [10, 30, 31, 50, 40, 20, 10]
        data: piedata[3]
      }]
    };
    chart.setOption(option);
    return chart;
  },
  inittpie(echartsData:any){
    //获取折线图组件
     let compent= this.selectComponent('#mychart-dom-line');
     compent.init((canvas, width, height, dpr)=> {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
       //调用设定EChart报表状态的函数，并且把从后端拿到的数据传过去
       this.setOption(chart,echartsData);
       // 注意这里一定要返回 chart 实例，否则会影响事件处理等
       return chart;
    })
  },
  OliSearch() {
    var that = this;
    wx.request({
      url: 'https://*****=(CITYNAME="' + that.data.area + '")&pageNumber=1&pageSize=' + that.data.number + '',
      header: {
        'content-type': 'application/json'
      },
      method: 'GET',
      success: function (res) {
        let mu:any = [];//Table数据
        var xd:any=[];//X轴数据
        var y89:any=[];//y轴89号汽油数据
        var y92:any=[];//y轴92号汽油数据
        var y95:any=[];//y轴95号汽油数据
        res.data.result.data.forEach(element => {
          var de = {
            area: element.CITYNAME, datetime: element.DIM_DATE.substr(0,10),
            V89: element.V89, V92: element.V92, V95: element.V95
          };
          mu.push(de);
          xd.push(element.DIM_DATE.substr(0,10));
          y89.push(element.V89);
          y92.push(element.V92);
          y95.push(element.V95);
        });
        that.setData({
          OliData: mu,
          xData:xd,
          y89: y89,
          y92: y92,
          y95: y95,
        })
        // 在这里解析数据并渲染到页面上
        var da=[xd.reverse(),y89.reverse(),y92.reverse(),y95.reverse()]
        //调用初始化图形的方法
        that.inittpie(da);
      },
      fail: function (error) {
        // 请求失败，处理错误
        console.log(error);
      }
    })
  },
  onChange(s:any) {
    console.log(s.detail)
  },
  onClick() {
    this.setData({
      show: true,
    });
  },
  onClose() {
    this.setData({
      show: false,
    });
  },
  onFinish(e) {
    const { selectedOptions, value } = e.detail;
    const fieldValue = selectedOptions
      .map((option:any) => option.text || option.name)
      .join('/');
    this.setData({
      fieldValue,
      cascaderValue: value,
      show: false
    })
  },
  onInput(event:any) {
    this.setData({
      currentDate: event.detail,
    });
  },
})
import * as echarts from '../../ec-canvas/echarts.js';

wxml文件

    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-field model:value="{{ area }}" required clearable label="地区" placeholder="请输入地区 默认重庆" border="{{ true }}" />
          <van-field model:value="{{ number }}" label="频次" placeholder="请输入调整的频次 默认3次" border="{{ true }}" />
        </van-cell-group>
      </van-col>
    </van-row>
    <van-row>
      <van-col offset="10" span="8">
        <van-button type="info" bind:click="OliSearch">查询</van-button>
      </van-col>
    </van-row>
    //加载折线图
     <view class="container" wx:if="{{OliData.length>0}}">
      <ec-canvas style="width: 100%; height: 500px;margin-top: -100px;" id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}" />
    </view>

json文件

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

感谢这两位大佬的文章指点：

微信小程序使用echarts动态获取数据

微信小程序中使用ECharts--折线图、柱状图、饼图