使用wxcharts组件的图表，折现，扇形，柱形

大风刮来的

已于 2022-02-18 08:41:30 修改

阅读量484

点赞数 1

分类专栏： css html 文章标签： javascript 前端

于 2022-02-17 10:42:05 首次发布

本文链接：https://blog.csdn.net/weixin_48669322/article/details/122977862

版权

html 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

使用wxcharts组件的图表，折现，扇形，柱形

//js代码
var wxCharts = require('../../../utils/wxcharts');    // 引入下载到项目的wxcharts安装包
// 引入扇形，折线，柱形，引入下面才能用
var pieChart = null;
var lineChart = null;
var columnChart = null;

//以柱形图为例

//柱形图的点击事件
columnTouchHandler: function (e) {
        console.log(columnChart.getCurrentDataIndex(e));
        columnChart.scrollStart(e); //开始滚动
    },

    columnTouchmove: function (e) {
        columnChart.scroll(e);
    },

    columnTouchend: function (e) {
        columnChart.scrollEnd(e);
    },
//设置柱形图
   columnChart = new wxCharts({
            canvasId: 'columnCanvas',
            type: 'column',
            animation: true,
            categories: ['1月', '3月', '2月', '4月', '1月', '3月', '2月', '4月', '1月', '3月', '2月', '4月'],
            series: [{
                name: '成交量',
                data: [15.222, 20, 45, 37, 15, 20, 45, 37, 15, 20, 45, 37],
                format: function (val, name) {
                    return val.toFixed(0);
                }
            }, {
                name: '成交量2',
                data: [15, 30, 55, 47, 15, 30, 55, 47, 15, 30, 55, 47],
                format: function (val, name) {
                    return val.toFixed(0);
                }
            }],
            yAxis: {
                format: function (val) {
                    return val + '万';
                },
                // title: 'hello',
                min: 0
            },
            xAxis: {
                disableGrid: false,
                type: 'calibration'
            },
            extra: {
                column: {
                    width: 15
                }
            },
            enableScroll: true,
            // enableScroll:true,是否滑动配置
            width: wx.getSystemInfoSync().windowWidth,
            height: 200,
        });

多大的

<canvas canvas-id="columnCanvas" class="canvas" bindtouchstart="columnTouchHandler" bindtouchmove="columnTouchmove" bindtouchend="columnTouchend"></canvas>
<!-- bindtouchstart bindtouchmove bindtouchend这几个是数据太多，设置滑动查看-->