echart-weixin配置

原创已于 2022-08-31 17:49:36 修改 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #前端 #javascript

于 2022-08-31 17:45:18 首次发布

web前端专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用ECharts库，通过实例演示了如何配置柱状图和折线图，包括数据生成、坐标轴网格、图例和提示框设置。重点讲解了grid和legend的配置方法。

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

1、去github下载 echart for weixin ,这是兼容微信小程序的改版echart (搜索微信echart )

2、可参考demo 和 echart文档进行配置

3、要点说明：

grid：配置的是栅格也就是xy坐标轴第二现象的部分，可以设置偏移量，位置等

legend: 配置的是维度就是下面的bar 可点击控制那条折现等显示隐藏

//柱状
function getBarOption() {

    let xAxisData = [];
    let data1 = [];
    let data2 = [];
    let data3 = [];
    let data4 = [];
    for (let i = 0; i < 12; i++) {
        xAxisData.push('Class' + i);
        data1.push(+(Math.random() * 2).toFixed(2));
        data2.push(+(Math.random() * 59).toFixed(2));
        data3.push(+(Math.random() + 0.3).toFixed(2));
        data4.push(+Math.random().toFixed(2));
    }
    var emphasisStyle = {
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.3)'
        }
    };
    return {
        // color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        color:['rgba(235, 132, 48, 1)','rgba(241, 198, 5, 1)'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['计划完成', '实际完成'],
            left: '20%',
            textStyle:{
                color:"#999"
            },
        },
        grid: { //显示区域的位置调整
            // left: 20,
            // right: 20,
            // bottom: 15,
            // top: 40,
            // containLabel: true
            containLabel: true, //刻度区域是否包含刻度标签
            x: "2%",//x 偏移量
            y: "15%", // y 偏移量
            // width: "87%", // 宽度
            height: "79%"// 高度
        },
        xAxis: {
            data: [...months],
            // name: '月',
            nameLocation:"end",
            nameTextStyle:{
                color:"#999",
                fontSize:"12rpx",
                align:"left"
            },
            axisLine: { onZero: true,show:false },
            splitLine: { show: false },
            splitArea: { show: false },
            show:1,
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#999',
                interval:0, //去掉间隔显示
                rotate: 45
            }
        },
        yAxis: {
            name:'万元',
            nameTextStyle:{
                color:"#999"
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#999'
            }
        },
        series: [
            {
                name: '实际完成',
                barWidth:10,
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: schedules
            },
            {
                name: '计划完成',
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: plans
            },

        ]
    };
}

折线配置

//配置
const option = {
    color:['rgba(57, 119, 254, 1)'],
    grid: {
        containLabel: true,
        x: "2%",//x 偏移量
        y: "15%", // y 偏移量
        // width: "87%", // 宽度
        height: "79%"// 高度

    },
    tooltip: {
        show: true,
        trigger: 'axis',
        formatter:function(params){
            return params[0].name + ":" + params[0].data * 100 + "%"
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
        // show: false
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#999'
        }
    },
    yAxis: {
        x: 'center',
        type: 'value',
        // show: false
        // name:'完成率',
        nameTextStyle:{
            color:"#999"
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#999',
            formatter:function (val) {
                return 100*val +"%"

            }
        }
    },
};

// 配置维度(要合并到option中)

let legend = {
    legend: {
        data: ['a', 'b', 'c'],
        bottom: 20,
        left: "left",
        backgroundColor: '#fff',
        z: 100,
        icon:"circle",
        itemHeight:'12',
        formatter: function (name) {
            let names ={
                "a":"实际支付=",
                "b":"月度计划=",
                "c":"实际进度="
            }
            return names[name]
        },
        textStyle:{
            fontSize:'12',
            color:'rgba(51, 61, 95, 1)',
            width:"100%"
        }
    }
}