188 lines
3.9 KiB
Vue
188 lines
3.9 KiB
Vue
<template>
|
||
<view style="width:55%; height:60%">
|
||
<l-echart ref="chartRef"></l-echart>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||
export default {
|
||
name: "circular",
|
||
props: {
|
||
apiData: {
|
||
type: Object, // 定义 props 类型
|
||
default: null // 默认值
|
||
}
|
||
},
|
||
data() {
|
||
return {}
|
||
},
|
||
watch: {
|
||
// 监听 message 的变化
|
||
apiData(val) {
|
||
// console.log('父组件传递的值发生变化：', val);
|
||
this.init(val);
|
||
}
|
||
},
|
||
methods: {
|
||
async init(data) {
|
||
var option = {
|
||
xAxis: {
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: {
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
// 内圆
|
||
{
|
||
type: "pie",
|
||
radius: ["0", "55%"],
|
||
center: ["50%", "50%"],
|
||
z: 4,
|
||
hoverAnimation: false,
|
||
data: [{
|
||
name: "",
|
||
value: 90,
|
||
itemStyle: {
|
||
normal: {
|
||
// borderColor:'#28B4FF',
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: "rgba(0,0,0,0.1)",
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "rgba(0,0,0,0.1)",
|
||
},
|
||
{
|
||
offset: 0.65,
|
||
color: "rgba(0,0,0,0.1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#28B4FF",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
rich: {
|
||
a: {
|
||
color: "#994D01",
|
||
align: "center",
|
||
fontSize: 30,
|
||
padding: [0, 0, 56, 0],
|
||
fontWeight: "bold",
|
||
},
|
||
b: {
|
||
color: "#AF6E2F",
|
||
align: "center",
|
||
fontSize: 16,
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
// formatter: function(params) {
|
||
// return (
|
||
// "{a|" + params.value + "}\n\n" + "{b|" +
|
||
// "全部领取" + "}"
|
||
// );
|
||
// },
|
||
position: "center",
|
||
show: true,
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
}, ],
|
||
},
|
||
//进度图
|
||
{
|
||
type: "gauge",
|
||
radius: 70,
|
||
detail: {
|
||
formatter: "{value}分",
|
||
show: true,
|
||
offsetCenter: [0, 0],
|
||
fontSize: 25,
|
||
color:'rgb(49, 190, 255)',
|
||
},
|
||
data: [{
|
||
value: data.score,
|
||
}],
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 20,
|
||
color: [
|
||
[1, 'rgb(12,54,77)']
|
||
]
|
||
}
|
||
},
|
||
progress: {
|
||
show: true,
|
||
width: 20,
|
||
itemStyle: {
|
||
color: {
|
||
// type: 'linear',
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#28B4FF' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#55ffff' // 100% 处的颜色
|
||
}
|
||
],
|
||
global: false // 缺省为 false
|
||
}
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
pointer: {
|
||
show: false
|
||
}
|
||
},
|
||
],
|
||
};
|
||
// chart 图表实例不能存在data里
|
||
const chart = await this.$refs.chartRef.init(echarts);
|
||
chart.setOption(option)
|
||
// 监听窗口大小改变事件，并调用resize方法
|
||
window.onresize = function() {
|
||
myChart.resize();
|
||
};
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
|
||
</style> |