微信小程序添加Echarts图表

• 第一步 下载Echarts插件

这个echarts插件不是像vant组件一样使用npm下载 而是去下面这个地址下载GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

下载好解压文件后长这样，我们将里面的ec-canvas文件复制到微信小程序的文件夹中，一般放在pages同级目录下

在你所需要引入的page页面中的json文件，wxml和js文件分别添加一下代码 

//home.json  在usingComponents添加 路径为你ec-canvas文件的相对路径
{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}


// home.wxml 这里必须拿一个view包裹住 设置 高宽 不然显示不出来
<view class="chart_one"> 
    <ec-canvas  class="canvas" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

// home.js 在js文件里先引入 然后写方法 这个方法是写在page({})外 ，
// 但是定义的参数是放在page({})里的data中 具体如下
import * as echarts from '../../ec-canvas/echarts';
function initChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
   
    var option = {
      title: {
        text: '测试下面legend的红色区域不应被裁剪',
        left: 'center'
      },
      legend: {
        data: ['A', 'B', 'C'],
        top: 50,
        left: 'center',
        backgroundColor: 'red',
        z: 100
      },
      grid: {
        containLabel: true
      },
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        // show: false
      },
      yAxis: {
        x: 'center',
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
        // show: false
      },
      series: [{
        name: 'A',
        type: 'line',
        smooth: true,
        data: [18, 36, 65, 30, 78, 40, 33]
      }, {
        name: 'B',
        type: 'line',
        smooth: true,
        data: [12, 50, 51, 35, 70, 30, 20]
      }, {
        name: 'C',
        type: 'line',
        smooth: true,
        data: [10, 30, 31, 50, 40, 20, 10]
      }]
    };
   
    chart.setOption(option);
    return chart;
  }
Page({
    data:{
       ec: {
            onInit: initChart
        }}
}),
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    }

// home.wxss
  .chart_one{
	width: 750rpx;
	height: 600rpx;
  }

亲测 这样是可以成功将echarts图表显示出来的