6 changed files with 3868 additions and 81 deletions
File diff suppressed because it is too large
@ -1,65 +0,0 @@ |
|||
<template> |
|||
<view style="width: 100%; height: 500rpx"><l-echart ref="chart"></l-echart></view> |
|||
</template> |
|||
|
|||
<script> |
|||
// import * as echarts from 'components/l-echart/echarts'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
option: { |
|||
radar: [ |
|||
{ |
|||
indicator: [ |
|||
{ text: '记忆力', max: 1 }, |
|||
{ text: '语言能力', max: 1 }, |
|||
{ text: '视空间', max: 1 }, |
|||
{ text: '注意力', max: 1 }, |
|||
{ text: '定向力', max: 1 }, |
|||
{ text: '计算能力', max: 1 }, |
|||
{ text: '逻辑执行', max: 1 }, |
|||
], |
|||
radius: 80, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
type: 'radar', |
|||
tooltip: { trigger: 'item' }, |
|||
areaStyle: {}, |
|||
data: [ |
|||
{ |
|||
value: [0.85, 0.65, 0.62, 0.71, 0.45, 0.55, 0.67], |
|||
name: 'A Software', |
|||
symbolSize: 5, |
|||
areaStyle: { color: 'rgba(24,144,255,.3)' }, |
|||
lineStyle: { color: '#1da5ff' }, |
|||
itemStyle: { color: '#1890ff' }, |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// this.$refs.chart.init(config => { |
|||
// const { canvas } = config; |
|||
// const chart = echarts.init(canvas, null, config); |
|||
// canvas.setChart(chart); |
|||
// chart.setOption(this.option); |
|||
// // 需要把 chart 返回 |
|||
// return chart; |
|||
// }); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-ec-canvas { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: block; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,130 @@ |
|||
<template> |
|||
<canvas |
|||
v-if="canvasId" |
|||
:id="canvasId" |
|||
:canvasId="canvasId" |
|||
:style="{ |
|||
width: cWidth * pixelRatio + 'px', |
|||
height: cHeight * pixelRatio + 'px', |
|||
transform: 'scale(' + 1 / pixelRatio + ')', |
|||
'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px', |
|||
'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px', |
|||
}" |
|||
@touchstart="touchStart" |
|||
@touchmove="touchMove" |
|||
@touchend="touchEnd" |
|||
@error="error" |
|||
> |
|||
</canvas> |
|||
</template> |
|||
|
|||
<script> |
|||
import uCharts from '@/common/u-charts.min.js'; |
|||
var canvases = {}; |
|||
|
|||
export default { |
|||
props: { |
|||
chartType: { |
|||
required: true, |
|||
type: String, |
|||
default: 'column', |
|||
}, |
|||
opts: { |
|||
required: true, |
|||
type: Object, |
|||
default() { |
|||
return null; |
|||
}, |
|||
}, |
|||
canvasId: { |
|||
type: String, |
|||
default: 'u-canvas', |
|||
}, |
|||
cWidth: { default: 375 }, |
|||
cHeight: { default: 250 }, |
|||
pixelRatio: { |
|||
type: Number, |
|||
default: 1, |
|||
}, |
|||
max: { |
|||
type: Number, |
|||
default: 100, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
init() { |
|||
switch (this.chartType) { |
|||
case 'radar': |
|||
this.initRadarChart(); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
initRadarChart() { |
|||
canvases[this.canvasId] = new uCharts({ |
|||
// $this: this, |
|||
// canvasId: this.canvasId, |
|||
context: uni.createCanvasContext(this.canvasId, this), |
|||
type: 'radar', |
|||
fontSize: 11, |
|||
padding: [20, 0, 0, 0], |
|||
legend: { show: false }, |
|||
background: '#FFFFFF', |
|||
pixelRatio: this.pixelRatio, |
|||
animation: true, |
|||
dataLabel: true, |
|||
categories: this.opts.categories, |
|||
series: this.opts.series, |
|||
width: this.cWidth * this.pixelRatio, |
|||
height: this.cHeight * this.pixelRatio, |
|||
extra: { |
|||
radar: { |
|||
max: this.max, //雷达数值的最大值 |
|||
gridType: 'radar', //radar或者circle可选，网格样式，默认radar |
|||
gridColor: '#eee', |
|||
labelColor: '#B9B9B9', |
|||
}, |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改 |
|||
changeData(cid, newdata) { |
|||
canvases[cid].updateData({ |
|||
series: newdata.series, |
|||
categories: newdata.categories, |
|||
}); |
|||
}, |
|||
touchStart(e) { |
|||
canvases[this.canvasId].showToolTip(e, { |
|||
format: function (item, category) { |
|||
return category + ' ' + item.name + ':' + item.data; |
|||
}, |
|||
}); |
|||
canvases[this.canvasId].scrollStart(e); |
|||
}, |
|||
touchMove(e) { |
|||
canvases[this.canvasId].scroll(e); |
|||
}, |
|||
touchEnd(e) { |
|||
canvases[this.canvasId].scrollEnd(e); |
|||
}, |
|||
error(e) { |
|||
console.log(e); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.charts { |
|||
width: 100%; |
|||
height: 100%; |
|||
flex: 1; |
|||
background-color: #ffffff; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue