wx-charts 微信小程序图表应用

wx-charts 微信小程序图表应用

• .json文件引用

{
  "usingComponents": {
  	   "ec-canvas":"../../component/ec-canvas/ec-canvas"
  },
  "navigationBarTitleText": ""
}

• .wxml定义

<view class="container">
    <ec-canvas id="mychart" canvas-id="mychart-bar" ec="{{ ec }}" ></ec-canvas>
  </view>

• .js文件

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

data: {
    //折现属性
    series:[{
        data: ([34, 26, 25, 19, 37, 35, 10]).reverse(),
        name:'温度A',
        smooth:false,
        type:'line'
       }, {
        data: ([15, 12, 7, 23, 3, 14, 22]).reverse(),
        name: '温度B',
        smooth: false,
        type: 'line'
      }],
    // 默认7天
    ascissaData:(['周日','周一','周二','周三','周四','周五','周六']).reverse(),
    ec: {
      lazyLoad: true//延迟加载
    }
  },

/* 初始化图表*/
/* 界面初始化 */
 onLoad: function () {    
    this.echartsComponnet = this.selectComponent('#mychart');
     this.init_echarts() 
  },

//初始化图表
  init_echarts: function () {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },

  // 获取数据
  getOption: function () {
    var that = this
    console.log(that.data.series)
    console.log(that.data.ascissaData)
    var legendList = []
    for (var i in that.data.series) {
      var obj = {
        name: that.data.series[i].name,
        icon: 'circle',
        textStyle: {
          color: '#000000',
        }
      }
      legendList.push(obj)

      that.data.series[i].data.reverse()
    }
    var option = {
      // 折线图线条的颜色
      color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
      // 折线图的线条代表意义
      legend: {
        itemWidth: 5, //小圆点的宽度
        itemGap: 25,
        selectedModel: 'single', //折线可多选
        inactiveColor: '#87CEEB',
        data: legendList,
        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: that.data.ascissaData.reverse(),
        // show: false
      },
      yAxis: {
        x: 'center',
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        axisLine: { //y轴坐标是否显示
          show: false
        },
        axisTick: { //y轴刻度小标是否显示
          show: false
        }
      },
      series: that.data.series
    }
    return option
  },

效果图：