微信小程序1

小程序官方:

https://mp.weixin.qq.com

小程序开发文档:

https://developers.weixin.qq.com/miniprogram/dev/index.html

微信开发社区:

https://developers.weixin.qq.com/

image.png

WePY命令行工具

npm install wepy-cli -g

在开发目录中生成Demo开发项目

wepy new myproject

# 1.7.0之后的版本使用 wepy init standard myproject 初始化项目

切换至项目目录

cd myproject

安装依赖

npm  install

开启实时编译

wepy build --watch

项目的目录结构:

├── dist                   小程序运行代码目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件)
├── node_modules           
├── src                    代码编写的目录(该目录为使用WePY后的开发目录)
|   ├── components         WePY组件目录(组件不属于完整页面,仅供完整页面或其他组件引用)
|   |   ├── com_a.wpy      可复用的WePY组件a
|   |   └── com_b.wpy      可复用的WePY组件b
|   ├── pages              WePY页面目录(属于完整页面)
|   |   ├── index.wpy      index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)
|   |   └── other.wpy      other页面(经build后,会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件)
|   └── app.wpy            小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件)
└── package.json           项目的package配置

wepy 微信小程序

小程序组件化开发框架 https://tencent.github.io/wepy/

image.png

image.png

<style lang="less">
    @color: #4D926F;
    .userinfo {
        color: @color;
    }
</style>
<template lang="pug">
    view(class='container')
        view(class='userinfo' @tap='tap')
            mycom(:prop.sync='myprop' @fn.user='myevent')
            text {{now}}
</template>

<script>
    import wepy from 'wepy';
    import mycom from '../components/mycom';

    export default class Index extends wepy.page {
        
        components = { mycom };
        data = {
            myprop: {}
        };
        computed = {
            now () { return new Date().getTime(); }
        };
        async onLoad() {
            await sleep(3);
            console.log('Hello World');
        }
        sleep(time) {
            return new Promise((resolve, reject) => setTimeout(resolve, time * 1000));
        }
    }
</script>

安装使用

npm install wepy-cli -g

wepy init standard myproject

cd myproject
npm install

wepy build --watch

image.png

image.png

image.png

image.png

image.png

Highcharts

Report abuse

Highcharts中文官网

hcharts实现堆叠柱形图 https://www.jianshu.com/p/582299e18c7e

GIF.gif

<!DOCTYPE >
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    </head>
    <body>
        <div id="container" style="width:800px;height:400px"></div>
        
        <script>
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '堆叠柱形图'
        },
        xAxis: {
            categories: ['三年级一班', '三年级二班', '三年三班', '三年级四班', '三年级五班']
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    '总量: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: '未到',
            data: [1, 1, 2, 1, 2]
        }, {
            name: '迟到',
            data: [2, 2, 3, 2, 1]
        }, {
            name: '已到',
            data: [8, 9, 10, 11, 12]
        }]
    });
});



        </script>

    </body>

</html>

image.png

lang:语言文字对象,所有Highcharts文字相关的设置 chart:图表区、图形区和通用图表配置选项 colors:图表数据列颜色配置,是一个颜色数组 credits: 版权信息,Highcharts在图表的右下方放置的版权信息及链 drilldown:钻取,向下钻取数据,深入到其中的具体数据 exporting:导出模块,导出功能配置,导出即将图表下载为图片或打印图表 legend:图例,用不同形状、颜色、文字等 标示不同数据列,通过点击标示可以显示或隐藏该数据列 loading:加载中,加载选项控制覆盖绘图区的加载屏的外观和文字 navigation:导航,导出模块按钮和菜单配置选项组 noData:没有数据,没有数据时显示的内容 pane:分块,针对仪表图和雷达图专用的配置,主要设置弧度及背景色 plotOptions:针对不同类型图表的配置 series:数据列,图表上一个或多个数据系列,比如图表中的一条曲线,一个柱形 title:标题,包括即标题和副标题,其中副标题为非必须的 tooltip:数据点提示框,当鼠标滑过某点时,以框的形式提示改点的数据,比如该点的值,数据单位等 Axis:坐标轴,包括x轴和y轴。多个不同的数据列可共用同一个X轴或Y轴

图表类型 line:直线图 spline:曲线图 area:面积图 areaspline:曲线面积图 arearange:面积范围图 areasplinerange:曲线面积范围图 column:柱状图 columnrange:柱状范围图 bar:条形图 pie:饼图 scatter:散点图 boxplot:箱线图 bubble:气泡图 errorbar:误差线图 funnel:漏斗图 gauge:仪表图 waterfall:瀑布图 polar:雷达图 pyramid:金字塔

全局配置
Highcharts.setOptions({global: {全局参数}
lang: {语言文字}
});
主配置
Highcharts.chart('container', {accessibility: {无障碍设计}
chart: {图表配置}
colors: [颜色集合]
credits: {版权信息}
data: {数据功能模块}
drilldown: {钻取}
exporting: {导出}
labels: {标签}
legend: {图例}
loading: {加载}
navigation: {导航}
noData: {没有数据}
pane: {…}
plotOptions: {数据列配置}
responsive: {响应式}
series: [{数据列}]
subtitle: {副标题}
title: {标题}
tooltip: {数据提示框}
xAxis: [{X 轴}]
yAxis: [{Y 轴}]
zAxis: {Z 轴}
});
函数及属性
Axis: {坐标轴}
Chart: {图表对象}
Element: {SVG 元素}
Highcharts: {命名空间}
Legend: {图例}
Point: {数据点}
Renderer: {绘图工具}
Series: {数据列}

补充了这位作者的效果图

https://www.jianshu.com/p/582299e18c7e

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券