小程序中使用echarts

最新推荐文章于 2025-06-26 11:06:52 发布

卑微码农

最新推荐文章于 2025-06-26 11:06:52 发布

阅读量547

点赞数

CC 4.0 BY-SA版权

文章标签： js canvas

本文链接：https://blog.youkuaiyun.com/qq_42661906/article/details/106735576

本文介绍了如何在微信小程序中使用Echarts，首先需要下载专为小程序设计的ec-canvas插件，链接和提取码已提供。将插件引入项目后，可定制所需Echarts功能。接着，在WXML文件中添加相关代码，并在JS文件中创建对象以实现图表展示，例如仪表盘功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序中使用echarts需要下载专用插件ec-canvas
链接：https://pan.baidu.com/s/1Kg1x_5iUFIJtvx7l1Zpd4g
提取码：rgjg
下载后引到项目中
在这里插入图片描述
这个是echarts官方js，建议根据自己需求定制下载功能下载链接，下载后替换即可，示例中的js为仪表盘功能

在wxml中添加如下代码

<view class="echart_panel" style="height:260rpx;">
	<ec-canvas canvasId="mychart-bar" ec="{{ecLine}}" id="mychart-dom-bar" style="height:260rpx;"></ec-canvas>
</view>

要是用的js中引用js

var echarts = require("../../ec-canvas/echarts.js")

在js中创建对象

Page({
    data: {
        ecLine: {},
	},
	onload(){
		this.get();
	},
	get() {
        var ecLine = {
            onInit(canvas, width) {
                //初始化echarts元素，绑定到全局变量，方便更改数据
                var chartLine = echarts.init(canvas, null, {
                    width: width,
                    height: 150
                });
                canvas.setChart(chartLine);
                var score =a.getscore();
                var scores = score / 10000;
                根据个人需求创建option对象，具体配置看官方文档、示例
                var option = {
                    backgroundColor: '#fff',
                    tooltip: {
                        formatter: '{a} <br/>{b} : {c}%'
                    },
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [{
                        name: '积分',
                        type: 'gauge',
                        min: 0,
                        max: 10000,
                        radius: '100%',
                        center: ['50%', '70%'],
                        startAngle: 180,
                        endAngle: 0,
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [scores, 'red'],
                                    [1, '#888']
                                ],
                                width: 5,
                            }
                        },
                        axisLabel: { // 坐标轴小标记
                            distance: -40,
                            color: '#333',
                            formatter: function (v) {
                                switch (v + '') {
                                    case '0':
                                        return '0';
                                    case '1000':
                                        return '1千';
                                    case '2000':
                                        return '2千';
                                    case '3000':
                                        return '3千';
                                    case '4000':
                                        return '4千';
                                    case '5000':
                                        return '5千';
                                    case '6000':
                                        return '6千';
                                    case '7000':
                                        return '7千';
                                    case '8000':
                                        return '8千';
                                    case '9000':
                                        return '9千';
                                    case '10000':
                                        return '1万';
                                }
                            }

                        },
                        splitLine: { // 分隔线
                            length: 10, // 属性length控制线长
                            lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                                width: 1,
                                color: '#888'
                            },

                        },
                        pointer: {
                            show: false,
                        },
                        title: {
                            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontSize: '16',
                                color: '#f10',
                            },
                            offsetCenter: [0, -5]

                        },
                        detail: { // x, y，单位px
                            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                color: '#333',
                                fontSize: '18',
                            },
                            offsetCenter: [0, -30]
                        },
                        data: [{ //需要二次渲染的将data中的值放到app.js中，否知取不到值
                            value: score,
                            name: '累计积分'
                        }]
                    }]
                };
                //循环获取数据信息
                setInterval(() => {
                    var score =a.getscore();
                    var scores = score / 10000;
                    console.log(option.series[0].data[0].value);
                    option.series[0].data[0].value=score;
                    option.series[0].axisLine.lineStyle.color[0][0]=scores
                    //true是为了可以二次绘画
                    chartLine.setOption(option,true);
                }, 3000);
                chartLine.setOption(option,true);
                return chartLine;      
            }
        }
        this.setData({
            ecLine
        })
    },
})