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

这篇具有很好参考价值的文章主要介绍了微信小程序中简单使用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图表

     结束 如果有不明白的地方 可以评论问我文章来源地址https://www.toymoban.com/news/detail-491586.html

到了这里,关于微信小程序中简单使用echarts图表的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包