197 lines
4.7 KiB
Vue
197 lines
4.7 KiB
Vue
<template>
|
|
<div class="water-intake-charts">
|
|
<custom-echart-mixin :chart-data="handelData" :option="chartsData.option" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed } from 'vue';
|
|
let itemStyle = reactive({
|
|
itemStyle: { borderRadius: [8, 8, 0, 0] },
|
|
});
|
|
let legendList = reactive(['种子', '番茄', '小麦']);
|
|
|
|
const chartsData = reactive({
|
|
option: {
|
|
color: ['#0AF2FE', '#2196f3', '#02fd94'],
|
|
series: [
|
|
{
|
|
type: 'pie', // 饼图
|
|
clockWise: false,
|
|
radius: [60, 40],
|
|
center: ['40%', '50%'],
|
|
hoverAnimation: false,
|
|
itemStyle: {
|
|
borderRadius: 5,
|
|
normal: {
|
|
label: {
|
|
position: 'outside',
|
|
formatter: function (params) {
|
|
if (params.name !== '') {
|
|
return '{name|' + params.name + '}' + '\n\n{value|' + params.value + '}吨';
|
|
} else {
|
|
return '';
|
|
}
|
|
},
|
|
align: 'left',
|
|
rich: {
|
|
name: {
|
|
fontSize: 14,
|
|
fontFamily: 'PingFang SC',
|
|
fontWeight: 500,
|
|
color: '#fff',
|
|
},
|
|
value: {
|
|
fontSize: 20,
|
|
fontFamily: 'D-DIN',
|
|
fontWeight: 400,
|
|
},
|
|
},
|
|
},
|
|
labelLine: {
|
|
width: 4,
|
|
show: true,
|
|
length: 30,
|
|
length2: 60,
|
|
color: '#fff',
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
data: [
|
|
{
|
|
value: 11325,
|
|
name: '种子',
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 5,
|
|
borderRadius: 20,
|
|
shadowBlur: 0,
|
|
borderColor: '#0AF2FE',
|
|
shadowColor: '#0AF2FE',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: '3000',
|
|
name: '',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
color: 'rgba(0, 0, 0, 0)',
|
|
borderColor: 'rgba(0, 0, 0, 0)',
|
|
borderWidth: 0,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 123000,
|
|
name: '化肥',
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 5,
|
|
borderRadius: 20,
|
|
shadowBlur: 0,
|
|
borderColor: '#2196f3',
|
|
shadowColor: '#2196f3',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: '3000',
|
|
name: '',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
color: 'rgba(0, 0, 0, 0)',
|
|
borderColor: 'rgba(0, 0, 0, 0)',
|
|
borderWidth: 0,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 601,
|
|
name: '农药',
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 5,
|
|
borderRadius: 20,
|
|
shadowBlur: 0,
|
|
borderColor: '#02fd94',
|
|
shadowColor: '#02fd94',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: '3000',
|
|
name: '',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
color: 'rgba(0, 0, 0, 0)',
|
|
borderColor: 'rgba(0, 0, 0, 0)',
|
|
borderWidth: 0,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
valData: [],
|
|
});
|
|
|
|
const randomVal = (num) => {
|
|
let list = [];
|
|
for (let i = 0; i < legendList.length; i++) {
|
|
let addNum = [10, 8, 2, 5];
|
|
let val = {
|
|
name: num + '月',
|
|
value: Number(Math.random() * 100 + addNum[i]).toFixed(2),
|
|
seriesType: 'bar',
|
|
type: legendList[i],
|
|
...itemStyle,
|
|
};
|
|
list[i] = val;
|
|
}
|
|
return list;
|
|
};
|
|
let handelData = computed(() => {
|
|
let list = [];
|
|
let maxMouth = 6;
|
|
for (let i = 0; i < maxMouth; i++) {
|
|
let val = randomVal(i + 1);
|
|
list = [...list, ...val];
|
|
}
|
|
|
|
list.map((m) => {
|
|
return { ...m, value: Number(m.value + Math.random() + 10).toFixed(2) };
|
|
});
|
|
// console.info('handelData', list);
|
|
return list;
|
|
});
|
|
|
|
onMounted(() => {});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.water-intake-charts {
|
|
height: 100%;
|
|
}
|
|
</style>
|