参考链接：
ShengChangWei/uni-app-start
项目结构
通过HBuilderx > 文件 > 项目，选择uni-app项目，模板我选择的是默认模板，确认创建，文件夹如下图：
image.png
使用wx-charts
1.直接引用编译好的文件 dist/wxcharts.js 或者 dist/wxcharts-min.js
新增unit文件夹，存放 dist/wxcharts.js 或者 dist/wxcharts-min.js
2.页面引用
//html
<canvas canvas-id="pieCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
//css,style
//有资料说设置canvas的尺寸为2倍大小，然后缩小到50%比较高清；
.canvas{
width: 100%;
height: 300px;
/* transform: scale(0.5); */ //设置scale来展示图形大小
}
//js
import wxCharts from '../../unit/wxcharts.js';
var _self;
var Charts=null;
touchHandler: function (e) {
console.log(Charts.getCurrentDataIndex(e));
},
onLoad: function (e) {
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
} catch (e) {
console.error('getSystemInfoSync failed!');
}
Charts = new wxCharts({
animation: true,
canvasId: 'pieCanvas',
type: 'pie',
series: [
{name: '成交量1',data: 15},
{name: '成交量2',data: 45},
{name: '成交量3',data: 35},
{name: '成交量4',data: 25}
],
width: windowWidth,
height: 300,
dataLabel: false,
});
}
600*400*0.5.png
600*400.png
100%*300.png
100%*300*0.5.png
参数说明
opts Object
opts.canvasId String required 微信小程序canvas-id
opts.width Number required canvas宽度，单位为px
opts.height Number required canvas高度，单位为px
opts.title Object (only for ring chart)
opts.title.name String 标题内容
opts.title.fontSize Number 标题字体大小（可选，单位为px）
opts.title.color String 标题颜色（可选）
opts.subtitle Object (only for ring chart)
opts.subtitle.name String 副标题内容
opts.subtitle.fontSize Number 副标题字体大小（可选，单位为px）
opts.subtitle.color String 副标题颜色（可选）
opts.animation Boolean default true 是否动画展示
opts.legend Boolen default true 是否显示图表下方各类别的标识
opts.type String required 图表类型，可选值为pie, line, column, area，radar，ring
opts.categories Array required (饼图、圆环图不需要) 数据类别分类
opts.dataLabel Boolean default true 是否在图表中显示数据内容值
opts.dataPointShape Boolean default true 是否在图表中显示数据点图形标识
opts.xAxis Object X轴配置
opts.xAxis.disableGrid Boolean default false 不绘制X轴网格（适用于折线图，柱形图，区域图）
opts.yAxis Object Y轴配置
opts.yAxis.format Function 自定义Y轴文案显示
opts.yAxis.min Number Y轴起始值
opts.yAxis.max Number Y轴终止值
opts.yAxis.title String Y轴titleopts.yAxis.titleFontColor String Y轴title的文字的颜色opts.yAxis.fontColor String Y轴文字的颜色opts.yAxis.gridColor String Y轴格子的颜色opts.yAxis.disabled Boolean default false 不绘制Y轴
opts.series Array required 数据列表
同一个页面上多个图表
//html
<canvas canvas-id="pieCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
<canvas canvas-id="barCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
//css,style
.canvas{
width: 100%;
height: 300px;
}
//js
import wxCharts from '../../unit/wxcharts.js';
var _self;
var pie=null;
var line=null;
onLoad: function (e) {
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
console.log("width",res.windowWidth)
windowWidth = res.windowWidth;
console.log("width",windowWidth)
} catch (e) {
console.error('getSystemInfoSync failed!');
}
pie = new wxCharts(
{
animation: true,
canvasId: 'pieCanvas',
type: 'pie',
series: [ {name: '成交量1',data: 15},
{name: '成交量2',data: 45},
{name: '成交量3',data: 35},
{name: '成交量4',data: 25}],
width: windowWidth,
height: 300,
dataLabel: false,
}
);
line = new wxCharts(
{
animation: true,
canvasId: 'barCanvas',
type: 'line',
dataPointShape: "circle",
extra: {
lineStyle: 'curve' //线条的形状（弧形）
},
categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
series: [{
name: '成交量1',
data: [0.15, null, 0.45, 0.37, 0.4, 0.8],//设置某一个值为null会出现断层
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);
},
fontColor: "#333",
titleFontColor: "#333",
min: 0,
gridColor:"#333",
},
width: windowWidth,
height: 300,
dataLabel: true
}
);
},
image.png
相关问题
1.legend只能操作是否显示，没有办法类似于echarts中的一样，可以调整显示位置。
2.echarts中的center，radius都无法使用。例如饼图位置无法调整。
3.同一个页面多个图表，不知道这样写符不符合。
网友评论