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