微信小程序中简单使用echarts图表-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序中简单使用echarts图表。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.复制组件至page同级目录下（ec-canvas）

微信小程序中简单使用echarts图表

2. 在js中引入

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

3.在wxml写个标签

<view class="container" wx:if="{{status==0}}">
        <ec-canvas class="ec-canvas" id="chart-dom-line" canvas-id="chart-line" ecData="{{chartData}}" ec="{{ec}}"></ec-canvas>
    </view>

样式我是这么设置的（在wcss），差不多大写微信里尺寸可以

/**数据图表样式**/
.ec-canvas {
    width: 100%;
    height: 100%;
  }
  
  .container {
    height: 35vh;
    background: white;
    border-radius: 10rpx;
  }

4.编写数据咯（数据肯定是从接口传的，我就不写死了直接方法也贴出来）

先创建对象

//在page data 中定义
pptn: { // 对象
            name: "流量",//这个字段是展示图表上方的文字的
            data: [],
            waterLev: [],
            unit: "mm",
            color: { //设置颜色 以下是两个渐变
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 158, 1)'
                }, {
                    offset: 1,
                    color: 'rgba(11, 70, 74, 0.29)'
                }],
                global: false
            }
        },
 ec: {
            onInit: initChart
        },
chartData: {},

初始化图表

var chart = null;
function initChart(canvas, width, height) {//初始化
    chart = echarts.init(canvas, null, {
        width: width,
        height: height
    });
    canvas.setChart(chart);
    chart.setOption(option);
    return chart;
};

定义option

var option = {
    legend: {
        data: [],
        icon: 'roundRect',
        itemWidth: 10,
        itemHeight: 8,
        textStyle: {
            fontSize: 10,
        },
        top: 3,
        left: 'center',
        z: 100
    },
    grid: {
        right: '15%',
        top: '15%',
        containLabel: true,
    },
    tooltip: {
        trigger: 'axis',
        textStyle: {
            color: 'white',
        },
        formatter: function (params) {
            let str = '';
            let clipboardData = '';
            str += "水位：" + params[0].name + " m";
            params.forEach(function (item) {
                str += "\n" + item.marker + " " + item.seriesName + " : " + item.value;
            });
            clipboardData = str.replace(/\{([^}]+)\}\s+/g, '');
            wx.setClipboardData({
                data: clipboardData,
                success: function () {
                    wx.hideToast({
                        success: (res) => {},
                    })
                },
            })
            return str;
        },
        confine: true,
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        position: function (point, params, dom, rect, size) {
            // 固定在顶部
            return [point[0], '20%'];
        }
    },
    dataZoom: [{
        show: false
    }],
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
        axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0,
        },
        name: '水位:m'
    },
    yAxis: {
        x: 'center',
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
        name: 'm³/s'
    },
    series: [],
};

定义方法掉接口数据定义option

 getZQR() {
        let code = this.data.stCode
        app.colorUISdk.request({
            url: '/dmp-micro-svc-base-manager/baseInfo/ZQRelationLines',
            method: "POST",
            data: {
                setCode: code,
                "pageNum": 0,
                "pageSize": 100
            },
            header: {
                'token': app.globalData.token,
            },
        }).then(res => {
            if (res.code == 200) {
                this.setPptn(res.obj[code]);//数据拿到调下一个方法
            }
        });
    }

定义方法接收

    setPptn(list) { //赋值给chartData
        let data = [];
        let waterLev = [];
        if (list) {
            list.forEach((item, index) => {
                data[index] = item.flow;//纵坐标的数据
                waterLev[index] = item.waterLev;//横坐标的数据
            });
            let pptn = this.data.pptn;
            pptn.data = data;
            pptn.waterLev = waterLev;
            this.setData({
                pptn: pptn,
                chartData: this.setEcData(pptn)//调用下面的方法
            });
        }
        this.setEcOption();
    }，
    setEcData() { //
        this.setData({
            chartData: {
                legendData: [],
                series: [],
                waterLev: []
            }
        });
        let chartData = {};
        if (arguments.length > 0) {
            let arr = [];
            let data = [];
            let date = arguments[0].waterLev;
            for (let i = 0; i < arguments.length; i++) {
                data.push(arguments[i].name)
                arr.push(this.setSeries(arguments[i]))
            }
            chartData.legendData = data;
            chartData.waterLev = date;
            chartData.series = arr;

        }
        return chartData;
    }，
    setSeries(param) { //设置
        return {
            name: param.name,
            color: param.color,
            type: 'line',
            areaStyle: {},
            symbol: 'circle',
            data: param.data,
            smooth: true,
        };
    }

最后一步传入数据

    setEcOption() {
        option.xAxis.data = this.data.chartData.waterLev;
        option.legend.data = this.data.chartData.legendData;
        option.series = this.data.chartData.series;
        setTimeout(() => {
            chart.setOption(option);
        }, 1000)
    },

微信小程序中简单使用echarts图表