微信小程序echarts

资源包百度网盘链接：https://pan.baidu.com/s/1fG4tHS78b3gTsw79s040FA?pwd=1111 
提取码：1111

微信小程序echarts除了书写的规范之外还有就是你的echarts文件节夹的放置位置很重要一定要和你的页面在同一个文件夹里面在同一个文件夹里面

此文件在page文件夹下面我将echarts文件夹的component直接放在资源中大家可以直接下载使用

以下是书写方法

1.将component文件夹放在/page/你的文件节夹下面  例如我设置的/page/aabb

2.在aabb.json中配置

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

3.在aabb.js中配置引入

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

4.在Page之前配置echarts

代码如下

let chart = null;

function initChart(canvas, width, height, dpr) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);

    var option = {
        legend: {
            selectedMode: false,
            data: ['任务总数', '已完成', '延期完成'],
            bottom:10,
            itemWidth:12,
            itemHeight:12
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '任务总数',
                data: [3, 1.2, 1, 1, 2],
                type: 'bar',
                itemStyle: {
                    color: '#5B8FF9'
                }
            },
            {
                name: '已完成',
                data: [4, 1, 2, 1, 1],
                type: 'bar',
                itemStyle: {
                    color: '#56D589'
                }
            },
            {
                name: '延期完成',
                data: [1, 1, 0.5, 0.5, 1],
                type: 'bar',
                itemStyle: {
                    color: '#FF5733'
                }
            }
        ]
    };

    chart.setOption(option);
    return chart;
}

5.在Page的data中配置

Page({
   data:{
        ec: {
            onInit: initChart
        }
    },
})

6.在aabb.wxml中添加

 <view style="width：100px;heigh:100px">
            <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
        </view>

运行代码完成