微信小程序使用echarts

第一种使用方法

wxml

<view style="height: 500rpx;">
          <ec-canvas id="mychart-dom-line" canvas-id="mychart-line"  ec="{{ ec }}"></ec-canvas>
</view>
<button bindtap="pie" type="primary">饼图</button>

js

https://github.com/ecomfe/echarts-for-weixin

找到里面的ec-canvas文件夹

import * as echarts from '../ec-canvas/echarts';
Page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit:Object
    }
  },
  drawWorkOrderCharts() {
    var oneComponent = this.selectComponent('#mychart-dom-line2')
    oneComponent.init((canvas, width, height,dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      canvas.setChart(chart);//canvas画布上创建一个图表
      chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'cross', // 默认为直线，可选为：'line' | 'shadow' | 'cross'
            axis: "x",
          },
        },
        grid: {
          top: 15,
          left: 15,
          bottom: 15,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {},
        series: [{
          name: '工单总数',
          type: 'line',
          data: [120, 130, 140, 133, 122, 167, 176],
        }, {
          name: '完成总数',
          type: 'line',
          data: [110, 120, 140, 80, 112, 160, 170],
        }]
      });
      this.setData({
        ec: {
          onInit: () => chart
        }
      })
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.drawWorkOrderCharts()//也可以直接调用，但是会有提示。
  },
})

第二种使用方法

import * as echarts from '~/ec-canvas/echarts';//这里我设置的绝对路径
var option = [];//图表配置项 声明
// 初始化图表函数  开始
let chart = null;
function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  })
  canvas.setChart(chart)
  return chart;
}
Page({
  data: {
    topLabel: '检验详情',
    ec: {
      onInit: initChart
    },
    Pie:null,
    x:null,
    y:null,
  },
  drawWorkOrderCharts() { //图表
    setTimeout(() => {
      let arr2 = [23, 24, 25, 26, 27, 28, 29];  //  X轴假数据
      let datas2 = [773, 768, 865, 937, 148, 487, 410];  // Y轴假数据
      let Pie = [
        { value: 23, name: '773' },
        { value: 24, name: '768' },
        { value: 25, name: '865' },
        { value: 26, name: '937' },
        { value: 27, name: '148' },
        { value: 28, name: '487' },
        { value: 29, name: '410' }
      ];  //   饼图假数据
      chart.setOption({
        // backgroundColor:'#578EFF',
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: 40,
          right: 10,
          bottom: 30,
          top: 20
        },
        xAxis: [{
          type: 'category',
          data: ['收缩压(mmHg)', '舒张压 (mmHg)', '脉搏 (bpm)'],
          axisLabel: {
            fontSize: 9
          }
        }],
        yAxis: [{
          type: "value"
        }],
        series: [{
          barWidth: "20%",
          data: [{
            value: 120,
            itemStyle: {
              color: '#578EFF',
            }
          },
          {
            value: 200,
            itemStyle: {
              color: '#51AEFF',
            }
          },
          {
            value: 150,
            itemStyle: {
              color: '#78A4FF',
            }
          }
          ],
          type: 'bar'
        }]
      })
      this.setData({
        x: arr2,
        y: datas2,
        Pie: Pie,
      })
    }, 1000);
  },
  pie() {//饼图
    option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '收益明细',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.data.Pie,
        }
      ]
    };
    chart.setOption(option)
  },
  reques() {//请求方式数据的方式
    wx.request({
      url: '填入自己的接口，把下面的假数据更改即可', //请求数据信息的接口地址
      data: {
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res) => {
        let arr2 = [23, 24, 25, 26, 27, 28, 29];  //  X轴假数据
        let datas2 = [773, 768, 865, 937, 148, 487, 410];  // Y轴假数据
        let Pie = [
          { value: 23, name: '773' },
          { value: 24, name: '768' },
          { value: 25, name: '865' },
          { value: 26, name: '937' },
          { value: 27, name: '148' },
          { value: 28, name: '487' },
          { value: 29, name: '410' }
        ];  //   饼图假数据
        // 显示Echarts图表类型信息，可以去Echarts官网复制粘贴
        //  默认输出柱状图的配置项
        option = {
          xAxis: {
            type: 'category',
            data: arr2
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            label: { //数据显示
              show: true,
              color: 'inherit',
              position: 'top',
              fontSize: 10,
            },
            data: datas2,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          },
          ]
        }
        // 输出到页面
        chart.setOption(option);
        // 数据获取 结束
        this.setData({
          x: arr2,
          y: datas2,
          Pie: Pie,
        })
      }
    })
  },
  onLoad: function (options) {
    this.drawWorkOrderCharts()
  },
  onReady: function () { },
})