Example - wxCharts使用说明

[xiaolin3303]

Example

pie chart

var wxCharts = require('wxcharts.js');
new wxCharts({
    canvasId: 'pieCanvas',
    type: 'pie',
    series: [{
        name: 'cat1',
        data: 50,
    }, {
        name: 'cat2',
        data: 30,
    }, {
        name: 'cat3',
        data: 1,
    }, {
        name: 'cat4',
        data: 1,
    }, {
        name: 'cat5',
        data: 46,
    }],
    width: 360,
    height: 300,
    dataLabel: true
});

ring chart

new wxCharts({
    canvasId: 'ringCanvas',
    type: 'ring',
    series: [{
        name: '成交量1',
        data: 15,
    }, {
        name: '成交量2',
        data: 35,
    }, {
        name: '成交量3',
        data: 78,
    }, {
        name: '成交量4',
        data: 63,
    }],
    width: 320,
    height: 200,
    dataLabel: false
});

line chart

new wxCharts({
    canvasId: 'lineCanvas',
    type: 'line',
    categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
    series: [{
        name: '成交量1',
        data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
        format: function (val) {
            return val.toFixed(2) + '万';
        }
    }, {
        name: '成交量2',
        data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
        format: function (val) {
            return val.toFixed(2) + '万';
        }
    }],
    yAxis: {
        title: '成交金额 (万元)',
        format: function (val) {
            return val.toFixed(2);
        },
        min: 0
    },
    width: 320,
    height: 200
});

curve line chart

new wxCharts({
    ...
    extra: {
        lineStyle: 'curve'
    }
});

line chart tooltip

columnChart

new wxCharts({
    canvasId: 'columnCanvas',
    type: 'column',
    categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
    series: [{
        name: '成交量1',
        data: [15, 20, 45, 37, 4, 80]
    }, {
        name: '成交量2',
        data: [70, 40, 65, 100, 34, 18]
    }],
    yAxis: {
        format: function (val) {
            return val + '万';
        }
    },
    width: 320,
    height: 200
});

areaChart

new wxCharts({
    canvasId: 'areaCanvas',
    type: 'area',
    categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
    series: [{
        name: '成交量1',
        data: [70, 40, 65, 100, 34, 18],
        format: function (val) {
            return val.toFixed(2) + '万';
        }
    }, {
        name: '成交量2',
        data: [15, 20, 45, 37, 4, 80],
        format: function (val) {
            return val.toFixed(2) + '万';
        }
    }],
    yAxis: {
        format: function (val) {
            return val + '万';
        }
    },
    width: 320,
    height: 200
});

radarChart

new wxCharts({
    canvasId: 'radarCanvas',
    type: 'radar',
    categories: ['1', '2', '3', '4', '5', '6'],
    series: [{
        name: '成交量1',
        data: [90, 110, 125, 95, 87, 122]
    }],
    width: 320,
    height: 200,
    extra: {
        radar: {
            max: 150
        }
    }
});

[faywong]

请问如何将 label 画在饼图上？

假设一种场景：一般 series 里就 4 个数据，且占比不会相对差得很大，这时候是有空间把 label 画在饼图上的，用户看起来会更直接。

[faywong]

麻烦请教下：如何让 canvas 的内容描画在正中间？

[xiaolin3303]

@faywong 暂时不支持将label直接画在饼图上，后续会考虑加入

你的第二个问题如何让 canvas 的内容描画在正中间，图表具体内容是相对于canvas居中的，如果你的canvas并不是铺满屏幕的，你需要将canvas元素进行居中即可

[surane]

麻烦请教下：如何把ring图的起点设置在6点钟位置，现在pie和ring好像都是从3点钟位置开始的。

[xiaolin3303]

@surane 新增了opts.extra.pie.offsetAngle 具体查看参数文档

[Helaiqu]

如何让上图（type:ring） 下面所展示出来4个name值消失掉？
就是环形图下面的：成交量1-成交量4。
在线等，急！

[xiaomingIsGirl]

如何改变颜色

[surane]

@Helaiqu legend: false

[Helaiqu]

@surane 谢谢。

[aliceqin]

柱状图支持横向展示吗？请问需要怎么设置？

[yuxuemei]

雷达图radar 可以给每一项设置最大值吗

[tsj11]

可以设置图表标题吗？让标题显示在默认legend的位置

[namezy]

柱状图和线图可以一起使用吗？急急急！！！！！！！

[jf-wang]

如果我数据是从后台导出来的，如何让曲线图动态加载啊

[xiao872380658]

我想问一下 怎么让图表全屏显示呢